Mobile Responsive: Added media queries to demo pages for proper mobile layout and scrolling

Author: tsmluky

web/public/demoen/index.html

@@ -427,6 +427,104 @@
         padding: 32mm 20mm 22mm 20mm;
       }
     }
+
+    @media (max-width: 768px) {
+      .deck {
+        padding: 0;
+        height: 100%;
+        background: var(--bg);
+      }
+
+      .frame {
+        width: 100%;
+        height: 100%;
+        border: none;
+        border-radius: 0;
+        box-shadow: none;
+        aspect-ratio: auto;
+      }
+
+      .slides {
+        height: 100%;
+      }
+
+      section.slide {
+        padding: 80px 24px 100px 24px;
+        overflow-y: auto;
+        height: 100vh;
+        display: block;
+      }
+
+      .grid {
+        display: flex;
+        flex-direction: column;
+        gap: 24px;
+        height: auto;
+        min-height: 0;
+        padding-bottom: 40px;
+      }
+
+      .h1 {
+        font-size: 32px;
+      }
+
+      .h2 {
+        font-size: 24px;
+      }
+
+      .kicker {
+        font-size: 11px;
+      }
+
+      .lead {
+        font-size: 15px;
+      }
+
+      .card {
+        padding: 14px;
+      }
+
+      .twoCol {
+        grid-template-columns: 1fr;
+      }
+
+      .bigMetric {
+        grid-template-columns: 1fr;
+      }
+
+      .controls {
+        position: fixed;
+        bottom: 20px;
+        right: 20px;
+        z-index: 999;
+        background: rgba(11, 16, 32, .85);
+        backdrop-filter: blur(12px);
+        padding: 6px;
+        border-radius: 999px;
+        border: 1px solid var(--stroke);
+      }
+
+      .topbar {
+        position: fixed;
+        z-index: 999;
+        width: 100%;
+        top: 0;
+        padding: 12px 16px;
+      }
+
+      .brand {
+        font-size: 15px;
+      }
+
+      .meta {
+        display: none;
+      }
+
+      /* Hide meta on mobile to save space */
+      .stack {
+        gap: 12px;
+      }
+    }
   </style>
 </head>
 

web/public/demoes/index.html

@@ -440,6 +440,104 @@
         padding: 32mm 20mm 22mm 20mm;
       }
     }
+
+    @media (max-width: 768px) {
+      .deck {
+        padding: 0;
+        height: 100%;
+        background: var(--bg);
+      }
+
+      .frame {
+        width: 100%;
+        height: 100%;
+        border: none;
+        border-radius: 0;
+        box-shadow: none;
+        aspect-ratio: auto;
+      }
+
+      .slides {
+        height: 100%;
+      }
+
+      section.slide {
+        padding: 80px 24px 100px 24px;
+        overflow-y: auto;
+        height: 100vh;
+        display: block;
+      }
+
+      .grid {
+        display: flex;
+        flex-direction: column;
+        gap: 24px;
+        height: auto;
+        min-height: 0;
+        padding-bottom: 40px;
+      }
+
+      .h1 {
+        font-size: 32px;
+      }
+
+      .h2 {
+        font-size: 24px;
+      }
+
+      .kicker {
+        font-size: 11px;
+      }
+
+      .lead {
+        font-size: 15px;
+      }
+
+      .card {
+        padding: 14px;
+      }
+
+      .twoCol {
+        grid-template-columns: 1fr;
+      }
+
+      .bigMetric {
+        grid-template-columns: 1fr;
+      }
+
+      .controls {
+        position: fixed;
+        bottom: 20px;
+        right: 20px;
+        z-index: 999;
+        background: rgba(11, 16, 32, .85);
+        backdrop-filter: blur(12px);
+        padding: 6px;
+        border-radius: 999px;
+        border: 1px solid var(--stroke);
+      }
+
+      .topbar {
+        position: fixed;
+        z-index: 999;
+        width: 100%;
+        top: 0;
+        padding: 12px 16px;
+      }
+
+      .brand {
+        font-size: 15px;
+      }
+
+      .meta {
+        display: none;
+      }
+
+      /* Hide meta on mobile to save space */
+      .stack {
+        gap: 12px;
+      }
+    }
   </style>
 </head>