fix: Improve mobile layout and responsiveness in Layout and PrimaryNavigation styles

Author: lcomplete

app/client/src/components/Layout.css

@@ -75,7 +75,9 @@
 @media (max-width: 900px) {
     .layoutRoot {
         flex-direction: column;
-        min-height: 100vh;
+        height: 100vh;
+        height: 100dvh;
+        overflow: hidden;
     }
 
     .primary-nav-container {
@@ -91,16 +93,17 @@
 
     .layout-right {
         width: 100%;
-        height: auto;
+        height: 100%;
         flex: 1;
         /* Add padding at bottom for fixed nav */
-        padding-bottom: 56px;
+        padding-bottom: calc(50px + env(safe-area-inset-bottom, 0px));
+        overflow: hidden;
     }
 
     .content-area {
         flex-direction: column;
-        height: auto;
-        overflow: visible;
+        height: 100%;
+        overflow: hidden;
     }
 
     /* Hide secondary sidebar on mobile - will be shown as popup */
@@ -109,7 +112,9 @@
     }
 
     .main-content {
-        overflow: visible;
+        overflow-y: auto;
+        height: 100%;
+        -webkit-overflow-scrolling: touch;
     }
 
     /* Old sidebar compatibility */

app/client/src/components/Navigation/PrimaryNavigation.css

@@ -136,27 +136,21 @@
         backdrop-filter: saturate(180%) blur(20px);
         -webkit-backdrop-filter: saturate(180%) blur(20px);
         border-top: 1px solid rgba(60, 60, 67, 0.18);
+        justify-content: space-evenly;
     }
 
     .primary-nav-logo {
         display: none;
     }
 
     .primary-nav-items {
-        flex: 1;
-        flex-direction: row;
-        align-items: stretch;
-        justify-content: space-evenly;
-        gap: 0;
-        overflow-x: visible;
-        padding: 0 4px;
-        height: 100%;
+        display: contents;
     }
 
     .primary-nav-item {
         flex: 0 1 auto;
         margin: 0;
-        padding: 5px 8px 4px;
+        padding: 5px 4px 4px;
         min-width: 44px;
         border-radius: 0;
         position: relative;
@@ -229,7 +223,7 @@
         display: flex;
         flex: 0 1 auto;
         margin: 0;
-        padding: 5px 8px 4px;
+        padding: 5px 4px 4px;
         min-width: 44px;
         flex-direction: column;
         align-items: center;