Fix standalone spacing via JS detection instead of CSS-only media query

saimalshafi · claude · saimalshafi · commit 3be0f6270769 · 2026-04-27T14:31:25.000+02:00
window.navigator.standalone is the reliable iOS Safari "Add to Home Screen" detector — the CSS @media (display-mode: standalone) query can miss it. Sets data-standalone on <html> so CSS vars pick up safe-area-inset-bottom. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
diff --git a/Feather.jsx b/Feather.jsx
@@ -340,6 +340,10 @@ const GlobalStyle = (
         --content-bottom: calc(env(safe-area-inset-bottom, 0px) + 46px);
       }
     }
+    [data-standalone="true"] {
+      --bottom-gap: calc(env(safe-area-inset-bottom, 0px) + 4px) !important;
+      --content-bottom: calc(env(safe-area-inset-bottom, 0px) + 46px) !important;
+    }
     .feather-noscroll::-webkit-scrollbar { display: none; }
     .feather-noscroll { scrollbar-width: none; -ms-overflow-style: none; }
     @keyframes featherPulse {
@@ -487,6 +491,14 @@ export default function Feather() {
     }
   }, []);
 
+  // ----- Standalone detection: set data-standalone on <html> for reliable PWA spacing -----
+  useEffect(() => {
+    const standalone =
+      window.navigator.standalone === true ||
+      window.matchMedia("(display-mode: standalone)").matches;
+    if (standalone) document.documentElement.setAttribute("data-standalone", "true");
+  }, []);
+
   // ----- Boot: geolocate -----
   const didBoot = useRef(false);
   useEffect(() => {
