u

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
  *