Fix iOS Safari safe-area overlap on mobile

- JS probes actual env(safe-area-inset-*) values via hidden element
- Sets --safe-top / --safe-bottom CSS custom properties with device-
  specific minimum floors (47px for notched iPhones, 20px for older)
- Targeted .is-ios / .is-android body classes for platform-specific CSS
- Hardened channel-header and message-input-area padding via !important
  to override theme specificity issues
- Handles both Safari browser and PWA standalone modes

Author: ancsemi

public/css/style.css

@@ -9084,6 +9084,73 @@ select.cfn-select.cfn-input {
 }
 
 
+/* ═══════════════════════════════════════════════════════════
+   iOS / MOBILE SAFE-AREA HARDENING
+   JS probes env(safe-area-inset-*) and sets --safe-top /
+   --safe-bottom as CSS custom properties with device-specific
+   minimum floors.  These override env() when the browser
+   returns 0 despite a notch / Dynamic Island being present.
+   ═══════════════════════════════════════════════════════════ */
+
+@media (max-width: 768px) {
+  /* Header: use JS-measured safe-top when available, falling back to env() */
+  body.is-ios .channel-header,
+  body.is-android .channel-header {
+    padding-top: calc(8px + var(--safe-top, env(safe-area-inset-top, 0px))) !important;
+    min-height: calc(48px + var(--safe-top, env(safe-area-inset-top, 0px))) !important;
+  }
+
+  /* Left sidebar overlay */
+  body.is-ios .sidebar,
+  body.is-android .sidebar {
+    padding-top: var(--safe-top, env(safe-area-inset-top, 0px)) !important;
+  }
+
+  /* Right sidebar */
+  body.is-ios .right-sidebar,
+  body.is-android .right-sidebar {
+    padding-top: var(--safe-top, env(safe-area-inset-top, 0px)) !important;
+  }
+
+  /* Server bar */
+  body.is-ios .server-bar,
+  body.is-android .server-bar {
+    padding-top: calc(8px + var(--safe-top, env(safe-area-inset-top, 0px))) !important;
+  }
+
+  /* Message input — bottom safe area */
+  body.is-ios .message-input-area,
+  body.is-android .message-input-area {
+    padding-bottom: calc(8px + var(--safe-bottom, env(safe-area-inset-bottom, 0px))) !important;
+  }
+
+  /* Toasts */
+  body.is-ios #toast-container,
+  body.is-android #toast-container {
+    top: calc(8px + var(--safe-top, env(safe-area-inset-top, 0px)));
+  }
+}
+
+@media (max-width: 480px) {
+  body.is-ios .channel-header,
+  body.is-android .channel-header {
+    padding-top: calc(6px + var(--safe-top, env(safe-area-inset-top, 0px))) !important;
+    min-height: calc(44px + var(--safe-top, env(safe-area-inset-top, 0px))) !important;
+  }
+
+  body.is-ios .message-input-area,
+  body.is-android .message-input-area {
+    padding-bottom: calc(6px + var(--safe-bottom, env(safe-area-inset-bottom, 0px))) !important;
+  }
+}
+
+/* Remove safe-top padding when iOS keyboard is open (bottom padding already
+   handled by .ios-keyboard-open rule above) */
+body.is-ios.ios-keyboard-open .message-input-area {
+  padding-bottom: 6px !important;
+}
+
+
 /* ═══════════════════════════════════════════════════════════
    TOUCH & ACCESSIBILITY
    ═══════════════════════════════════════════════════════════ */

public/js/modules/app-ui.js

@@ -3302,12 +3302,60 @@ _submitPoll() {
 // the message input stays visible above the keyboard.
 
 _setupIOSKeyboard() {
-  if (!window.visualViewport) return;
-
   const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) ||
     (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1);
 
-  if (!isIOS) return;
+  // ── Safe-area probing (all mobile, but especially iOS) ──
+  // env(safe-area-inset-*) sometimes returns 0 even on notched devices
+  // (e.g. certain iOS versions in browser vs PWA mode, or when CSS env()
+  //  isn't evaluated). We probe the actual value via a hidden element and
+  // set CSS custom properties with a minimum floor as fallback.
+  if (isIOS || /Android/.test(navigator.userAgent)) {
+    const isMobile = window.innerWidth <= 768;
+    if (isMobile) {
+      document.body.classList.add(isIOS ? 'is-ios' : 'is-android');
+
+      // Detect standalone PWA mode
+      if (isIOS && (window.navigator.standalone || window.matchMedia('(display-mode: standalone)').matches)) {
+        document.body.classList.add('is-ios-pwa');
+      }
+
+      // Probe env(safe-area-inset-top) by measuring a hidden div
+      const probe = document.createElement('div');
+      probe.style.cssText = 'position:fixed;top:0;left:0;width:1px;pointer-events:none;visibility:hidden;'
+        + 'height:env(safe-area-inset-top,0px);height:constant(safe-area-inset-top)';
+      document.body.appendChild(probe);
+
+      requestAnimationFrame(() => {
+        const measuredTop = probe.offsetHeight;
+        probe.style.cssText = 'position:fixed;bottom:0;left:0;width:1px;pointer-events:none;visibility:hidden;'
+          + 'height:env(safe-area-inset-bottom,0px);height:constant(safe-area-inset-bottom)';
+
+        requestAnimationFrame(() => {
+          const measuredBottom = probe.offsetHeight;
+          document.body.removeChild(probe);
+
+          // Determine minimum safe-area for this device
+          let minTop = 0, minBottom = 0;
+          if (isIOS) {
+            const h = window.screen.height;
+            // iPhone X+ / Dynamic Island (screen height >= 812pt)
+            if (h >= 812) { minTop = 47; minBottom = 34; }
+            // Older iPhones
+            else { minTop = 20; minBottom = 0; }
+          }
+
+          const safeTop = Math.max(measuredTop, minTop);
+          const safeBottom = Math.max(measuredBottom, minBottom);
+          const root = document.documentElement;
+          root.style.setProperty('--safe-top', safeTop + 'px');
+          root.style.setProperty('--safe-bottom', safeBottom + 'px');
+        });
+      });
+    }
+  }
+
+  if (!window.visualViewport || !isIOS) return;
 
   const app = document.getElementById('app');
   const messages = document.getElementById('messages');