04/18 fix web app responsive 4

app/static/css/app.css

@@ -313,7 +313,8 @@ ul {
 /* ── App layout (vault) ──────────────────────────────────────────── */
 .vault-page {
   height: 100vh;
-  height: 100dvh;
+  height: -webkit-fill-available;
+  height: calc(var(--vh, 1vh) * 100);
   overflow: hidden;
 }
 
@@ -850,7 +851,7 @@ ul {
   width: 100%;
   max-width: 480px;
   max-height: 90vh;
-  max-height: 90dvh;
+  max-height: calc(var(--vh, 1vh) * 90);
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
   padding: 28px;
@@ -1457,8 +1458,8 @@ ul {
 @media (max-width: 768px) {
   .app-layout {
     flex-direction: column;
-    height: 100%;
-    min-height: 100dvh;
+    height: calc(var(--vh, 1vh) * 100);
+    min-height: calc(var(--vh, 1vh) * 100);
     overflow: hidden;
   }
 
@@ -1474,8 +1475,10 @@ ul {
     left: 0;
     bottom: 0;
     width: 280px !important;
+    height: 100% !important; /* Chrome needs explicit height on position:fixed */
     z-index: 90;
     overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
     transition: none;
   }
   .sidebar.mobile-open {
@@ -1483,6 +1486,14 @@ ul {
     flex-direction: column;
   }
 
+  /* Cancel all collapsed-state overrides inside mobile sidebar */
+  .sidebar.collapsed {
+    display: none !important;
+  }
+  .sidebar.collapsed.mobile-open {
+    display: flex !important;
+  }
+
   /* Mobile sidebar: always show full expanded state */
   .sidebar .sidebar-label {
     opacity: 1 !important;
@@ -1570,7 +1581,7 @@ ul {
   }
   .modal {
     max-width: 100% !important;
-    max-height: 92dvh;
+    max-height: calc(var(--vh, 1vh) * 92);
     border-radius: 16px 16px 0 0;
     padding: 20px 16px;
   }