refactor(ui): restore pinned top-bar + scrollable session list

Reverse course on the previous commit's body-level scroll: the user
prefers the classic app layout where the ctm header + QuotaStrip stay
pinned at the top, the Live-feed link stays pinned at the bottom, and
the session list scrolls in between.

The actual fix that was doing the heavy lifting sticks:
- Root is `h-dvh` (not `h-screen`) so the footer doesn't get shoved
  below the collapsible browser chrome on mobile — that was the real
  cause of "had to scroll twice to reach Live feed".
- `html, body, #root` uses `min-height: 100%` (not `height: 100%`)
  so nothing clips internal scroll containers.

Added `overscroll-contain` on the list's scroll div so momentum flings
don't chain into the body / pull-to-refresh on touch devices — tighter
app feel.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: aksOps

ui/src/components/SessionListPanel.tsx

@@ -36,13 +36,10 @@ export function SessionListPanel({
     <aside
       aria-label="Sessions"
       className={cn(
-        // On desktop the aside is a fixed-height flex column so the
-        // middle region gets its own scroll; on mobile the page body
-        // is the scroll container, so the aside flows naturally and
-        // the footer sits at the end of the document (reachable in
-        // one continuous scroll, letting the browser URL bar collapse
-        // as the user drags).
-        "flex flex-col border-r border-border bg-bg md:h-full md:min-h-0",
+        // Fixed-height flex column: header + scrollable list + footer.
+        // The inner div is the scroll container so the Live-feed link
+        // stays pinned at the viewport bottom at every width.
+        "flex h-full min-h-0 flex-col border-r border-border bg-bg",
         className,
       )}
     >
@@ -61,7 +58,15 @@ export function SessionListPanel({
         </label>
       </header>
 
-      <div className="md:min-h-0 md:flex-1 md:overflow-y-auto">
+      <div
+        className={cn(
+          "min-h-0 flex-1 overflow-y-auto",
+          // overscroll-contain stops the inner scroll from chaining
+          // into the body when the user flings past either end —
+          // gives a tighter, more app-like feel on touch devices.
+          "overscroll-contain",
+        )}
+      >
         {isLoading && (
           <div className="space-y-2 p-4">
             <Skeleton className="h-16 w-full" />

ui/src/routes/Dashboard.tsx

@@ -21,20 +21,18 @@ import { cn } from "@/lib/utils";
  *   >=768px    list (300px) | SessionDetail (auto-selects latest)
  *   <768px     list-only when no name; detail-only when name is set
  *
- * Height model differs by breakpoint:
+ * Height model: root is `h-dvh` at every breakpoint so the header +
+ * QuotaStrip stay pinned at top and the Live-feed footer stays pinned
+ * at bottom, with the session list scrolling inside. `h-dvh` (dynamic
+ * viewport) instead of `h-screen` (100vh) is critical on mobile —
+ * 100vh includes the collapsible browser chrome, which would push
+ * the footer below the visible area until the user scrolls once and
+ * the address bar collapses. `dvh` tracks the actual visible viewport.
  *
- *  < md  — the *document body* is the scroll container. Root is
- *          `min-h-dvh`, header/QuotaStrip flow naturally, list and
- *          detail panes grow to content height. Browser URL bar
- *          collapses on scroll the way users expect on mobile, and
- *          the "Live feed" footer sits at the bottom of the document
- *          so reaching it is a single continuous scroll.
- *
- *  ≥ md  — root is `h-dvh` (exact dynamic viewport). The middle flex
- *          row is `flex-1 min-h-0 overflow-hidden` so list + detail
- *          panes each own their own scroll container. Without the
- *          min-h-0 the flex → overflow chain breaks and children
- *          can't scroll.
+ * The middle flex row is `flex-1 min-h-0 overflow-hidden` so the
+ * list pane and the detail pane each own their own scroll container
+ * and never push the page height. Without `min-h-0` the flex →
+ * overflow chain breaks and children can't scroll.
  */
 export function Dashboard() {
   const { name } = useParams<{ name?: string }>();
@@ -66,7 +64,7 @@ export function Dashboard() {
   const detailVisible = Boolean(name);
 
   return (
-    <div className="flex min-h-dvh flex-col bg-bg text-fg md:h-dvh">
+    <div className="flex h-dvh flex-col bg-bg text-fg">
       <header className="flex shrink-0 items-center justify-between border-b border-border px-4 py-3">
         <h1 className="font-serif text-xl font-bold tracking-tight">ctm</h1>
         <div className="flex items-center gap-1">
@@ -117,7 +115,7 @@ export function Dashboard() {
         <CostChart />
       </div>
 
-      <div className="flex flex-1 md:min-h-0 md:overflow-hidden">
+      <div className="flex min-h-0 flex-1 overflow-hidden">
         <SessionListPanel
           activeName={name}
           className={cn(