Fix Android layout safe area top inset for AdMob and Next.js SSR hydration flash when running natively

Author: Apexperform-git

Skypulse/src/app/globals.css

@@ -39,9 +39,8 @@ body {
   background: hsl(var(--background));
   color: hsl(var(--foreground));
   scroll-behavior: smooth;
-  height: calc(100vh - var(--ad-banner-height));
-  margin-top: var(--ad-banner-height);
   overflow: hidden;
+  height: 100%;
 }
 
 /* Custom attribution component replaces built-in controls */

Skypulse/src/app/layout.tsx

@@ -155,7 +155,7 @@ export default function RootLayout({
         <script
           dangerouslySetInnerHTML={{
             __html: `
-              if (window.Capacitor && (window.location.pathname === '/' || window.location.pathname === '/index.html')) {
+              if ((window.Capacitor || navigator.userAgent.includes('Capacitor')) && (window.location.pathname === '/' || window.location.pathname === '/index.html')) {
                 document.documentElement.style.display = 'none';
                 window.location.replace('/map.html');
               }

Skypulse/src/app/page.tsx

@@ -14,19 +14,27 @@ export default function LandingPage() {
     const router = useRouter();
     const [isNative, setIsNative] = useState(() => {
         if (typeof window !== "undefined") {
-            return Capacitor.isNativePlatform();
+            return (window as any).Capacitor !== undefined || navigator.userAgent.includes("Capacitor");
         }
-        return false;
+        return true; // Default to true during SSR to prevent flash, then adjust
     });
 
+    // We need a second state to confirm Web so we don't accidentally show a black screen forever on Desktop SSR
+    const [isWebConfirmed, setIsWebConfirmed] = useState(false);
+
     useEffect(() => {
-        if (isNative) {
+        if (Capacitor.isNativePlatform() || navigator.userAgent.includes("Capacitor")) {
+            setIsNative(true);
             router.replace("/map");
+        } else {
+            setIsNative(false);
+            setIsWebConfirmed(true);
         }
-    }, [isNative, router]);
+    }, [router]);
 
     // Unconditionally block rendering the heavy marketing site if we know we're on mobile
-    if (isNative) {
+    // Or if we haven't confirmed it's Web yet (to prevent SSR flash on mobile)
+    if (isNative || !isWebConfirmed) {
         return (
             <div className="fixed inset-0 z-[9999] bg-[#050505] flex items-center justify-center">
                 {/* Optional subtle loading indicator if jumping to /map takes a split second */}

Skypulse/src/components/flight-tracker.tsx

@@ -915,7 +915,7 @@ function FlightTrackerInner() {
       <div
         data-map-theme={mapStyle.dark ? "dark" : "light"}
         className="pointer-events-none absolute inset-x-0 bottom-0 z-10"
-        style={{ top: "var(--ad-banner-height, 0px)" }}
+        style={{ top: "calc(env(safe-area-inset-top, 0px) + var(--ad-banner-height, 0px))" }}
       >
         {!fpvIcao24 && (
           <div className="pointer-events-auto absolute left-3 top-3 flex items-center gap-3 sm:left-4 sm:top-4">