fix: command timeline crushed to scrollbar height on fresh browsers

Author: seehiong

README.md

@@ -213,13 +213,24 @@ was designed almost entirely through this panel — including the print-design f
 
 **[Live demo on GitHub Pages](https://seehiong.github.io/blender-mcp-n8n/)** —
 auto-deployed by [`.github/workflows/deploy-studio.yml`](.github/workflows/deploy-studio.yml)
-on every push to `main` that touches `studio/`. There's no Bridge Server to reach
-from a Pages-hosted page, so the demo link always launches in Demo Mode.
-
-Running Studio anywhere else (locally, or your own bridge that happens to be down)
-behaves differently on purpose: the header shows **"Offline"** and a
-**"▶ Try Demo Mode"** button — demo mode is opt-in there, never automatic, so a
-genuinely offline bridge is never silently mistaken for a working connection.
+on every push to `main` that touches `studio/`.
+
+> [!NOTE]
+> **The connection check always runs in *your* browser, against `localhost` —
+> never against the page author's machine.** Studio's connection probe
+> (`studio/src/lib/api.js`) always targets `http://localhost:8008` (then `:8000`),
+> regardless of where the Studio page itself is hosted. So:
+> - If **you** have your own Bridge Server running locally, the hosted Pages demo
+>   will genuinely connect to it and drive **your own** Blender instance — hosting
+>   the UI once on Pages doesn't require running it locally too.
+> - If you **don't** have a bridge running, the header shows **"Offline"** and a
+>   **"▶ Try Demo Mode"** button appears. Demo mode is always opt-in, never
+>   automatic — a genuinely offline bridge is never silently mistaken for a
+>   working connection.
+>
+> Either way, no one visiting the Pages demo can ever reach *another visitor's*
+> Blender instance — the browser only ever talks to `localhost` on the machine
+> it's running on.
 
 Either way, once in Demo Mode:
 - Loads a static tool catalog (`studio/src/lib/demoTools.js`) so the guided forms,

studio/src/App.jsx

@@ -41,7 +41,12 @@ export default function App() {
     // §7.3: bottom Command Timeline dock — vertical axis, inverted (dragging
     // the handle up should grow the dock, which is the opposite sign of a
     // raw clientY delta since the dock is anchored to the bottom).
-    const timeline = useResizableSidebar({ storageKey: 'timelineHeight', axis: 'vertical', invert: true, minWidth: 100, maxWidth: 400, defaultWidth: 160 });
+    // min/default must fit title bar + ActionBar + the SVG diagram (~98px with
+    // 2 branch rows) — the old 100/160 values crushed the diagram to just its
+    // scrollbar on any browser with fresh localStorage, which looked like a
+    // rendering bug. The hook clamps stored values on load, so stale
+    // too-small heights persisted in existing browsers self-heal to >= min.
+    const timeline = useResizableSidebar({ storageKey: 'timelineHeight', axis: 'vertical', invert: true, minWidth: 220, maxWidth: 520, defaultWidth: 300 });
 
     const [session, setSession] = useState(null);
     const [filter, setFilter] = useState('');

studio/src/style.css

@@ -158,6 +158,29 @@ body:has(.sidebar-resize-handle.vertical.dragging) {
     cursor: row-resize;
 }
 
+/* Visible grab affordance for the dock divider: a centered grip pill on top
+   of the full-width line, so the resizable edge is discoverable instead of
+   an invisible 6px strip. */
+.sidebar-resize-handle.vertical::before {
+    content: '';
+    position: absolute;
+    top: 1px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 44px;
+    height: 4px;
+    border-radius: 4px;
+    background: var(--text-secondary);
+    opacity: 0.5;
+    transition: background 0.15s ease, opacity 0.15s ease;
+}
+
+.sidebar-resize-handle.vertical:hover::before,
+.sidebar-resize-handle.vertical.dragging::before {
+    background: var(--accent-color);
+    opacity: 1;
+}
+
 /* Action bar: playback transport + branch run, docked below the header,
    always visible regardless of sidebar scroll position (§7.4). */
 /* §7.5: the ActionBar is docked directly under the Command Timeline's
@@ -1694,7 +1717,10 @@ footer {
 
 .command-timeline-dock .command-tree-scroll {
     flex: 1;
-    min-height: 0;
+    /* Never let flexbox crush the diagram to just its scrollbar: the SVG is
+       ~98px tall with two branch rows. Combined with the dock's raised
+       min-height this keeps ticks visible even at minimum dock size. */
+    min-height: 110px;
 }
 
 .command-tree-scroll {