From ab441ae289e652a25db3ca58a8246c824b5e3dee Mon Sep 17 00:00:00 2001
From: Nguyen Ngo <ngodanguyen@gmail.com>
Date: Sat, 18 Apr 2026 15:09:39 -0400
Subject: [PATCH] 04/18 fix web app responsive 2

---
 app/static/css/app.css         | 39 ++++++++++++++++++++------
 app/templates/vault/index.html | 50 ++++++++++++++++++++--------------
 2 files changed, 60 insertions(+), 29 deletions(-)

diff --git a/app/static/css/app.css b/app/static/css/app.css
index 65df60d..fe44b65 100644
--- a/app/static/css/app.css
+++ b/app/static/css/app.css
@@ -608,6 +608,17 @@ ul {
   gap: 16px;
 }
 
+/* Inner wrapper constrains content width on very large screens */
+.vault-header-inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  max-width: 900px;
+  margin: 0 auto;
+  gap: 16px;
+}
+
 .vault-title {
   font-size: 18px;
   font-weight: 600;
@@ -667,12 +678,19 @@ ul {
 }
 
 /* ── Vault list ──────────────────────────────────────────────────── */
+/* Outer scroll container */
 .vault-list {
   flex: 1;
   overflow-y: auto;
   padding: 12px 24px 24px;
 }
 
+/* Content max-width — keeps items readable on very wide screens */
+.vault-list-inner {
+  max-width: 900px;
+  margin: 0 auto;
+}
+
 .vault-group-header {
   font-size: 12px;
   font-weight: 600;
@@ -735,11 +753,10 @@ ul {
   text-overflow: ellipsis;
 }
 
+/* Actions always visible — no hover-only opacity trick on desktop */
 .item-actions {
   display: flex;
   gap: 4px;
-  opacity: 0;
-  transition: opacity var(--transition);
 }
 .vault-item:hover .item-actions {
   opacity: 1;
@@ -1479,7 +1496,7 @@ ul {
   }
   .vault-list {
     padding: 8px 12px 80px;
-  } /* bottom pad for FAB */
+  } /* bottom pad for mobile FAB */
   .panel-body {
     padding: 16px;
   }
@@ -1632,20 +1649,26 @@ ul {
     width: 260px;
   }
   .vault-header {
-    padding: 18px 32px;
+    padding: 18px 40px;
   }
   .vault-list {
-    padding: 16px 32px 32px;
+    padding: 16px 40px 40px;
+  }
+  .vault-list-inner {
+    max-width: 1100px;
+  }
+  .vault-header-inner {
+    max-width: 1100px;
   }
   .panel-body {
-    padding: 24px 32px;
+    padding: 24px 40px;
   }
   .security-dashboard {
-    padding: 24px 32px;
+    padding: 24px 40px;
     gap: 28px;
   }
   .search-wrapper {
-    max-width: 440px;
+    max-width: 480px;
   }
   .modal {
     max-width: 520px;
diff --git a/app/templates/vault/index.html b/app/templates/vault/index.html
index cfd8478..3cdd539 100644
--- a/app/templates/vault/index.html
+++ b/app/templates/vault/index.html
@@ -184,33 +184,41 @@
     <!-- Vault view -->
     <div id="view-vault">
       <header class="vault-header">
-        <h2 class="vault-title" id="vault-title">All Items</h2>
-        <div class="vault-toolbar">
-          <div class="search-wrapper">
-            <span class="search-icon">🔍</span>
-            <input
-              type="search"
-              id="search-input"
-              placeholder="Search vault…"
-              autocomplete="off"
-            />
+        <div class="vault-header-inner">
+          <h2 class="vault-title" id="vault-title">All Items</h2>
+          <div class="vault-toolbar">
+            <div class="search-wrapper">
+              <span class="search-icon">🔍</span>
+              <input
+                type="search"
+                id="search-input"
+                placeholder="Search vault…"
+                autocomplete="off"
+              />
+            </div>
+            <div class="sort-wrapper">
+              <select id="sort-select" title="Sort by">
+                <option value="name-asc">Name A–Z</option>
+                <option value="name-desc">Name Z–A</option>
+                <option value="date-desc">Newest first</option>
+                <option value="date-asc">Oldest first</option>
+                <option value="folder">By folder</option>
+              </select>
+            </div>
+            <button class="btn-fab" id="btn-add-item" title="Add item">
+              +
+            </button>
           </div>
-          <div class="sort-wrapper">
-            <select id="sort-select" title="Sort by">
-              <option value="name-asc">Name A–Z</option>
-              <option value="name-desc">Name Z–A</option>
-              <option value="date-desc">Newest first</option>
-              <option value="date-asc">Oldest first</option>
-              <option value="folder">By folder</option>
-            </select>
-          </div>
-          <button class="btn-fab" id="btn-add-item" title="Add item">+</button>
         </div>
       </header>
       <div id="vault-spinner" class="spinner-overlay hidden">
         <div class="spinner"></div>
       </div>
-      <ul id="vault-list" class="vault-list"></ul>
+      <div class="vault-list">
+        <div class="vault-list-inner">
+          <ul id="vault-list"></ul>
+        </div>
+      </div>
     </div>
 
     <!-- Security dashboard view -->