Fix HF Space layout stability

server/app.py

@@ -44,11 +44,18 @@ WEB_CSS = dedent(
       --meeting: #f5c76a;
       --empty: rgba(255, 255, 255, 0.06);
       --danger: #ff8d8d;
+      --shell-max: 1180px;
+      --sidebar-width: 300px;
+      --content-min: 620px;
     }
     * { box-sizing: border-box; }
+    html {
+      min-height: 100%;
+      background: #07111f;
+    }
     body {
       margin: 0;
-      min-height: 100vh;
+      min-height: 100%;
       font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
       color: var(--text);
       background:
@@ -56,7 +63,7 @@ WEB_CSS = dedent(
         linear-gradient(180deg, #09111d 0%, #07111f 100%);
     }
     .shell {
-      max-width: 1180px;
+      width: min(100%, var(--shell-max));
       margin: 0 auto;
       padding: 32px 20px 40px;
     }
@@ -87,7 +94,8 @@ WEB_CSS = dedent(
     }
     .grid {
       display: grid;
-      grid-template-columns: 300px minmax(0, 1fr);
+      grid-template-columns: minmax(260px, var(--sidebar-width)) minmax(var(--content-min), 1fr);
+      align-items: start;
       gap: 18px;
       margin-top: 18px;
     }
@@ -191,14 +199,32 @@ WEB_CSS = dedent(
       max-height: 260px;
       color: #d7e6ff;
     }
+    .details-grid {
+      display: grid;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      gap: 16px;
+      margin-top: 16px;
+    }
     .status {
       margin-top: 12px;
       min-height: 24px;
       color: var(--muted);
     }
     .status.error { color: var(--danger); }
-    @media (max-width: 920px) {
-      .grid, .metrics { grid-template-columns: 1fr; }
+    @media (max-width: 1040px) {
+      :root {
+        --content-min: 0px;
+      }
+      .metrics {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+      }
+    }
+    @media (max-width: 760px) {
+      .grid,
+      .metrics,
+      .details-grid {
+        grid-template-columns: 1fr;
+      }
       .actions { grid-template-columns: 1fr; }
       .actions button[data-op="0"] { grid-column: span 1; }
     }
@@ -360,7 +386,7 @@ WEB_PAGE = dedent(
               <h2 class="section-title">Timeline</h2>
               <div id="timeline" class="timeline"></div>
 
-              <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px;">
+              <div class="details-grid">
                 <section>
                   <h2 class="section-title">Task Buffer</h2>
                   <ul id="tasks" class="task-list"></ul>