feat: ultra-aggressive mobile spacing refinement & native fidelity navigation redesign

apps/web/src/components/IframeSection.tsx

@@ -27,6 +27,8 @@ interface IframeSectionProps {
   dynamicGlow?: boolean;
   minHeight?: number;
   mobileWidth?: number;
+  mobileHeight?: string;
+  desktopHeight?: string;
 }
 
 import PropTypes from "prop-types";
@@ -129,6 +131,8 @@ export const IframeSection: React.FC<IframeSectionProps> = ({
   dynamicGlow = true,
   minHeight = 400,
   mobileWidth = 390,
+  mobileHeight,
+  desktopHeight,
 }) => {
   const containerRef = React.useRef<HTMLDivElement>(null);
   const iframeRef = React.useRef<HTMLIFrameElement>(null);
@@ -264,7 +268,20 @@ export const IframeSection: React.FC<IframeSectionProps> = ({
     return match ? parseFloat(match[1]) : null;
   };
 
-  const baseNumericHeight = parseNumericHeight(height);
+  const [isMobile, setIsMobile] = React.useState(false);
+
+  React.useEffect(() => {
+    const checkMobile = () => setIsMobile(window.innerWidth < 768);
+    checkMobile();
+    window.addEventListener("resize", checkMobile);
+    return () => window.removeEventListener("resize", checkMobile);
+  }, []);
+
+  const activeHeight = isMobile
+    ? mobileHeight || height
+    : desktopHeight || height;
+
+  const baseNumericHeight = parseNumericHeight(activeHeight);
   const finalScaledHeight = clipHeight
     ? clipHeight * scale
     : baseNumericHeight
@@ -273,11 +290,11 @@ export const IframeSection: React.FC<IframeSectionProps> = ({
 
   const chassisStyle = {
     height:
-      height === "100%"
+      activeHeight === "100%"
         ? "100%"
         : finalScaledHeight
           ? `${finalScaledHeight + headerHeightPx}px`
-          : `calc(${height} + ${headerHeightPx}px)`,
+          : `calc(${activeHeight} + ${headerHeightPx}px)`,
     minHeight: minHeight ? `${minHeight}px` : undefined,
   };