From 8b1dc6907c006bc81a45ed8f7e8b41738f522a78 Mon Sep 17 00:00:00 2001
From: Ryan <ryantl66@gmail.com>
Date: Thu, 13 Mar 2025 20:23:09 -0400
Subject: [PATCH] update cards max width

---
 index.html | 174 ++++++++++++++++++++++++++++-------------------------
 styles.css |   4 ++
 2 files changed, 96 insertions(+), 82 deletions(-)
diff --git a/index.html b/index.html
index 5afa110..3a0bf2c 100644
--- a/index.html
+++ b/index.html
@@ -20,7 +20,7 @@
   <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/mode/xml/xml.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/mode/css/css.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/mode/javascript/javascript.min.js"></script>
-  
+
 </head>
 
 <body>
@@ -28,11 +28,11 @@
     <div class="header-left">
       <img src="/assets/logo.svg" alt="Filing Cabinet Logo" class="header-logo">
     </div>
-  
+
     <div class="header-title">
       <h1>Multi File Upload Editor</h1>
     </div>
-  
+
     <div class="header-right">
       <div class="header-buttons">
         <button id="logoutBtn" title="Logout">
@@ -73,96 +73,104 @@
     <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="col-md-6 col-lg-7 d-flex">
-          <div class="card flex-fill">
-            <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%;">
-                <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;">
-                    <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;" />
-                  </div>
+        <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" 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%;">
+                    <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;">
+                        <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;" />
+                      </div>
+                    </div>
+                    <button type="submit" id="uploadBtn" class="btn btn-primary d-block mx-auto">Upload</button>
+                    <div id="uploadProgressContainer"></div>
+                  </form>
                 </div>
-                <button type="submit" id="uploadBtn" class="btn btn-primary d-block mx-auto">Upload</button>
-                <div id="uploadProgressContainer"></div>
-              </form>
+              </div>
             </div>
-          </div>
-        </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-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;">
-                <div id="folderTreeContainer"></div>
-              </div>
-              <!-- Folder actions -->
-              <div class="folder-actions mt-3">
-                <button id="createFolderBtn" class="btn btn-primary">Create Folder</button>
-                <!-- Create Folder Modal -->
-                <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;" />
-                    <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>
+            <!-- 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" 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;">
+                    <div id="folderTreeContainer"></div>
+                  </div>
+                  <!-- Folder actions -->
+                  <div class="folder-actions mt-3">
+                    <button id="createFolderBtn" class="btn btn-primary">Create Folder</button>
+                    <!-- Create Folder Modal -->
+                    <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;" />
+                        <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>
+                        </div>
+                      </div>
+                    </div>
+                    <button id="renameFolderBtn" class="btn btn-secondary ml-2" title="Rename Folder">
+                      <i class="material-icons">edit</i>
+                    </button>
+                    <!-- Rename Folder Modal -->
+                    <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;" />
+                        <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>
+                        </div>
+                      </div>
+                    </div>
+                    <button id="deleteFolderBtn" class="btn btn-danger ml-2" title="Delete Folder">
+                      <i class="material-icons">delete</i>
+                    </button>
+                    <!-- Delete Folder Modal -->
+                    <div id="deleteFolderModal" class="modal">
+                      <div class="modal-content">
+                        <h4>Delete Folder</h4>
+                        <p id="deleteFolderMessage">Are you sure you want to delete this folder?</p>
+                        <div style="margin-top:15px; text-align:right;">
+                          <button id="cancelDeleteFolder" class="btn btn-secondary">Cancel</button>
+                          <button id="confirmDeleteFolder" class="btn btn-danger">Delete</button>
+                        </div>
+                      </div>
                     </div>
                   </div>
-                </div>
-                <button id="renameFolderBtn" class="btn btn-secondary ml-2" title="Rename Folder">
-                  <i class="material-icons">edit</i>
-                </button>
-                <!-- Rename Folder Modal -->
-                <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;" />
-                    <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>
-                    </div>
+                  <div id="folderExplanation" class="folder-explanation">
+                    <details class="folder-help-details">
+                      <summary class="folder-help-summary">
+                        <i class="material-icons folder-help-icon">info</i>
+                        Folder Navigation &amp; Management Help Info
+                      </summary>
+                      <ul class="folder-help-list">
+                        <li>Click on a folder in the tree to view its files.</li>
+                        <li>Use [-] to collapse and [+] to expand folders.</li>
+                        <li>Select a folder and click "Create Folder" to add a subfolder.</li>
+                        <li>To rename or delete a folder, select it and then click the appropriate button.</li>
+                      </ul>
+                    </details>
                   </div>
                 </div>
-                <button id="deleteFolderBtn" class="btn btn-danger ml-2" title="Delete Folder">
-                  <i class="material-icons">delete</i>
-                </button>
-                <!-- Delete Folder Modal -->
-                <div id="deleteFolderModal" class="modal">
-                  <div class="modal-content">
-                    <h4>Delete Folder</h4>
-                    <p id="deleteFolderMessage">Are you sure you want to delete this folder?</p>
-                    <div style="margin-top:15px; text-align:right;">
-                      <button id="cancelDeleteFolder" class="btn btn-secondary">Cancel</button>
-                      <button id="confirmDeleteFolder" class="btn btn-danger">Delete</button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div id="folderExplanation" class="folder-explanation">
-                <details class="folder-help-details">
-                  <summary class="folder-help-summary">
-                    <i class="material-icons folder-help-icon">info</i>
-                    Folder Navigation &amp; Management Help Info
-                  </summary>
-                  <ul class="folder-help-list">
-                    <li>Click on a folder in the tree to view its files.</li>
-                    <li>Use [-] to collapse and [+] to expand folders.</li>
-                    <li>Select a folder and click "Create Folder" to add a subfolder.</li>
-                    <li>To rename or delete a folder, select it and then click the appropriate button.</li>
-                  </ul>
-                </details>
               </div>
             </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>
\ No newline at end of file
diff --git a/styles.css b/styles.css
index 374c455..1a4047e 100644
--- a/styles.css
+++ b/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;
