Enhance safe area support for iOS devices: update CSS for navbar and body to respect safe area insets and improve layout on mobile screens

Web/static/css/styles.css

@@ -34,6 +34,25 @@
     --ui-shadow-md: 0 10px 24px rgba(0, 0, 0, 0.5);
 }
 
+/* Safe Area Support for iPad notches, Dynamic Island, and rounded corners */
+html {
+    /* Ensure viewport-fit is respected */
+    viewport-fit: cover;
+}
+
+body {
+    /* Respect safe areas on mobile devices */
+    position: relative;
+}
+
+/* Future-proof: Support for various viewport and safe-area features */
+@supports (padding: max(0px)) {
+    body {
+        /* Ensure body padding never conflicts with safe areas */
+        padding: 0;
+    }
+}
+
 /* Make inputs visible in dark mode */
 :root[data-theme="dark"] input, 
 :root[data-theme="dark"] select, 
@@ -172,11 +191,16 @@ select:focus {
     box-shadow: none;
     -webkit-backdrop-filter: blur(10px);
     backdrop-filter: blur(10px);
+    /* Safe area insets for iPad notches and Dynamic Island */
+    padding-left: env(safe-area-inset-left, 0);
+    padding-right: env(safe-area-inset-right, 0);
 }
 
 .navbar-brand {
     font-weight: 800;
     letter-spacing: 0.02em;
+    /* Prevent navbar brand from extending into unsafe areas */
+    word-break: break-word;
 }
 
 @media (max-width: 900px) {
@@ -190,6 +214,41 @@ select:focus {
     }
 }
 
+/* Mobile and tablet safe area handling for navbar */
+@media (max-width: 992px) {
+    .navbar {
+        /* Ensure navbar spans full width but respects safe areas */
+        width: 100vw;
+        margin-left: calc(-50vw + 50%);
+        /* Safe area padding is already handled by navbar class */
+    }
+    
+    .navbar .container-fluid {
+        width: 100%;
+        box-sizing: border-box;
+        /* Ensure padding accounts for safe areas on small screens */
+        padding-left: max(env(safe-area-inset-left, 0), 12px);
+        padding-right: max(env(safe-area-inset-right, 0), 12px);
+    }
+    
+    .navbar-collapse {
+        /* Ensure collapsed navbar respects safe areas */
+        padding-left: env(safe-area-inset-left, 0);
+        padding-right: env(safe-area-inset-right, 0);
+    }
+}
+
+/* iPad-specific landscape and portrait handling */
+@media (max-height: 600px) and (orientation: landscape) {
+    .navbar {
+        padding-top: max(env(safe-area-inset-top, 0), 4px);
+    }
+    
+    .navbar .container-fluid {
+        padding-bottom: 4px;
+    }
+}
+
 /* Edit and generate buttons with theme-aware text for better visibility */
 .edit-button, .duplicate-button, .generate-qr-button {
     color: var(--ui-text) !important; /* Override any existing color */

Web/templates/base.html

@@ -169,13 +169,19 @@
             background-color: var(--module-primary-color) !important;
             position: sticky;
             top: 0;
-            padding-top: env(safe-area-inset-top, 0); /* iOS Safe Area */
+            /* iOS Safe Area insets for notches and rounded corners */
+            padding-top: env(safe-area-inset-top, 0);
+            padding-left: env(safe-area-inset-left, 0);
+            padding-right: env(safe-area-inset-right, 0);
             z-index: 1900;
         }
 
         .navbar .container-fluid {
             gap: 10px;
-            padding-bottom: env(safe-area-inset-bottom, 0); /* Fallback */
+            /* Ensure container respects safe areas on all sides */
+            padding-left: max(env(safe-area-inset-left, 0), 16px);
+            padding-right: max(env(safe-area-inset-right, 0), 16px);
+            padding-bottom: env(safe-area-inset-bottom, 0);
         }
         
         .navbar-brand {