update cards max width

index.html

@@ -73,17 +73,22 @@
     <div id="mainOperations" style="display: none;">
       <div class="row align-items-stretch" id="uploadFolderRow">
         <!-- Upload Card: 50% width on medium, 58% on large -->
+        <div class="container" style="max-width: 1400px; margin: 0 auto;">
+          <div class="row">
             <div class="col-md-6 col-lg-7 d-flex">
-          <div class="card flex-fill">
+              <div class="card flex-fill" style="max-width: 900px; width: 100%;">
                 <div class="card-header">Upload Files</div>
                 <!-- Card body is a flex container in column direction -->
                 <div class="card-body d-flex flex-column">
-              <form id="uploadFileForm" method="post" enctype="multipart/form-data" class="d-flex flex-column" style="height: 100%;">
+                  <form id="uploadFileForm" method="post" enctype="multipart/form-data" class="d-flex flex-column"
+                    style="height: 100%;">
                     <div class="form-group flex-grow-1" style="margin-bottom: 1rem;">
-                  <div id="uploadDropArea" style="border:2px dashed #ccc; padding:20px; cursor:pointer; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
+                      <div id="uploadDropArea"
+                        style="border:2px dashed #ccc; padding:20px; cursor:pointer; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
                         <span>Drop files here or click 'Choose files'</span>
                         <br />
-                    <input type="file" id="file" name="file[]" class="form-control-file" multiple required style="display:none;" />
+                        <input type="file" id="file" name="file[]" class="form-control-file" multiple required
+                          style="display:none;" />
                       </div>
                     </div>
                     <button type="submit" id="uploadBtn" class="btn btn-primary d-block mx-auto">Upload</button>
@@ -94,7 +99,7 @@
             </div>
             <!-- Folder Management Card: 50% width on medium, 42% on large -->
             <div class="col-md-6 col-lg-5 d-flex">
-          <div class="card flex-fill">
+              <div class="card flex-fill" style="max-width: 900px; width: 100%;">
                 <div class="card-header">Folder Navigation & Management</div>
                 <div class="card-body custom-folder-card-body">
                   <div class="form-group d-flex align-items-top" style="padding-top:0; margin-bottom:0;">
@@ -107,7 +112,8 @@
                     <div id="createFolderModal" class="modal">
                       <div class="modal-content">
                         <h4>Create Folder</h4>
-                    <input type="text" id="newFolderName" class="form-control" placeholder="Enter folder name" style="margin-top:10px;" />
+                        <input type="text" id="newFolderName" class="form-control" placeholder="Enter folder name"
+                          style="margin-top:10px;" />
                         <div style="margin-top:15px; text-align:right;">
                           <button id="cancelCreateFolder" class="btn btn-secondary">Cancel</button>
                           <button id="submitCreateFolder" class="btn btn-primary">Create</button>
@@ -121,7 +127,8 @@
                     <div id="renameFolderModal" class="modal">
                       <div class="modal-content">
                         <h4>Rename Folder</h4>
-                    <input type="text" id="newRenameFolderName" class="form-control" placeholder="Enter new folder name" style="margin-top:10px;" />
+                        <input type="text" id="newRenameFolderName" class="form-control"
+                          placeholder="Enter new folder name" style="margin-top:10px;" />
                         <div style="margin-top:15px; text-align:right;">
                           <button id="cancelRenameFolder" class="btn btn-secondary">Cancel</button>
                           <button id="submitRenameFolder" class="btn btn-primary">Rename</button>
@@ -162,7 +169,8 @@
             </div>
           </div>
         </div>
-
+      </div>
+    </div>
     <!-- File List Section -->
     <div id="fileListContainer" style="display: none;">
       <h2 id="fileListTitle">Files in (Root)</h2>
@@ -258,7 +266,8 @@
   <div id="renameFileModal" class="modal">
     <div class="modal-content">
       <h4>Rename File</h4>
-      <input type="text" id="newFileName" class="form-control" placeholder="Enter new file name" style="margin-top:10px;" />
+      <input type="text" id="newFileName" class="form-control" placeholder="Enter new file name"
+        style="margin-top:10px;" />
       <div style="margin-top:15px; text-align:right;">
         <button id="cancelRenameFile" class="btn btn-secondary">Cancel</button>
         <button id="submitRenameFile" class="btn btn-primary">Rename</button>
@@ -278,4 +287,5 @@
     });
   </script>
 </body>
+
 </html>

styles.css

@@ -330,7 +330,11 @@ body.dark-mode #loginForm button:hover {
   background-color: #fff;
   color: #000;
   border: 1px solid #ddd;
+  max-width: 900px;
+  width: 100%;
+  margin: 0 auto;
 }
+
 body.dark-mode .card {
   background-color: #2c2c2c;
   color: #e0e0e0;