u

index.html

@@ -104,6 +104,41 @@
     html {
       scrollbar-gutter: stable;
     }
+
+    :root {
+      --df-zoom: 1;
+      --df-vh: 100vh;
+    }
+
+    @media (max-width: 1699.98px) {
+      :root {
+        --df-zoom: 0.8;
+        --df-vh: calc(100vh / 0.8);
+      }
+      body {
+        zoom: 0.8;
+      }
+    }
+
+    @media (max-width: 1399.98px) {
+      :root {
+        --df-zoom: 0.65;
+        --df-vh: calc(100vh / 0.65);
+      }
+      body {
+        zoom: 0.65;
+      }
+    }
+
+    @media (max-width: 999.98px) {
+      :root {
+        --df-zoom: 0.5;
+        --df-vh: calc(100vh / 0.5);
+      }
+      body {
+        zoom: 0.5;
+      }
+    }
   </style>
 </head>
 

src/App.jsx

@@ -47,7 +47,7 @@ class App extends PureComponent {
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center',
-            minHeight: '100vh',
+            minHeight: 'var(--df-vh, 100vh)',
             bgcolor: 'background.default',
           }}
         >

src/components/AppShell.jsx

@@ -71,7 +71,7 @@ class AppSidebar extends PureComponent {
           position: 'sticky',
           top: 0,
           alignSelf: 'flex-start',
-          height: '100vh',
+          height: 'var(--df-vh, 100vh)',
         })}
       >
         <List disablePadding sx={{ flexGrow: 1 }}>
@@ -294,7 +294,7 @@ export default function AppShell() {
   const activeSub = activeNav ? resolveActiveSub(pathname, activeNav) : null;
 
   return (
-    <Box sx={{ display: 'flex', minHeight: '100vh', bgcolor: 'background.default' }}>
+    <Box sx={{ display: 'flex', minHeight: 'var(--df-vh, 100vh)', bgcolor: 'background.default' }}>
       <AppSidebar activeNav={activeNav} navigate={navigate} />
       <Box
         component="main"

src/devtools/AutomatInspector.jsx

@@ -338,7 +338,7 @@ class AutomatInspector extends PureComponent {
           position: 'sticky',
           top: 0,
           alignSelf: 'flex-start',
-          height: '100vh',
+          height: 'var(--df-vh, 100vh)',
           borderLeft: '1px solid',
           borderColor: 'divider',
           bgcolor: 'background.paper',

src/index.css

@@ -16,6 +16,53 @@ body {
   touch-action: manipulation;
 }
 
+:root {
+  --df-zoom: 1;
+  --df-vh: 100vh;
+}
+
+/* ────────────────────────────────────────────────────────────────────────────
+ * RESPONSIVE VIEWPORT ZOOM
+ *
+ * Automatically scales the UI down on narrower viewports:
+ * - < 1700px: 80% zoom
+ * - < 1400px: 65% zoom
+ * - < 1000px: 50% zoom
+ *
+ * `--df-vh` scales inversely with zoom so that elements with full-screen
+ * height (like AppSidebar and full-height page wrappers) always reach the
+ * true bottom of the viewport instead of shrinking.
+ * ──────────────────────────────────────────────────────────────────────────── */
+@media (max-width: 1699.98px) {
+  :root {
+    --df-zoom: 0.8;
+    --df-vh: calc(100vh / 0.8);
+  }
+  body {
+    zoom: 0.8;
+  }
+}
+
+@media (max-width: 1399.98px) {
+  :root {
+    --df-zoom: 0.65;
+    --df-vh: calc(100vh / 0.65);
+  }
+  body {
+    zoom: 0.65;
+  }
+}
+
+@media (max-width: 999.98px) {
+  :root {
+    --df-zoom: 0.5;
+    --df-vh: calc(100vh / 0.5);
+  }
+  body {
+    zoom: 0.5;
+  }
+}
+
 /* ────────────────────────────────────────────────────────────────────────────
  * SYSTEM-WIDE SPELLCHECK OFF
  *

src/main.jsx

@@ -53,7 +53,7 @@ createRoot(document.getElementById('root')).render(
       <AuthBootstrap>
         {/* Flex row so the dev inspector docks beside the app instead of
             overlaying it; the app content shrinks while the panel is open. */}
-        <Box sx={{ display: 'flex', alignItems: 'flex-start', minHeight: '100vh' }}>
+        <Box sx={{ display: 'flex', alignItems: 'flex-start', minHeight: 'var(--df-vh, 100vh)' }}>
           <Box sx={{ flexGrow: 1, minWidth: 0 }}>
             <App />
           </Box>