04/18 fix web app responsive 2

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;