diff --git a/src/app/shell/AppPanes.tsx b/src/app/shell/AppPanes.tsx
index fd1b2cd1..d603ed03 100644
--- a/src/app/shell/AppPanes.tsx
+++ b/src/app/shell/AppPanes.tsx
@@ -227,14 +227,16 @@ export function openCanvasPath(app: ShellView, path: string | undefined, occurre
 export function CanvasCovers({ app }: { readonly app: ShellView }) {
   return (
     <>
-      {app.varsGroup && app.leftTab === 'variables' && (
+      {app.varsGroup && (
         <VariablesView
+          key={app.project.path}
           project={app.project}
           selected={app.varsGroup}
           hidden={app.leftTab !== 'variables'}
           showToast={app.showToast}
           onRecordUndo={app.pushCommand}
           onClose={() => app.setVarsGroup(undefined)}
+          onDock={() => app.setLeftTab('variables')}
         />
       )}
       {app.contentName && (
diff --git a/src/app/styles.css b/src/app/styles.css
index 957fb47f..b6301967 100644
--- a/src/app/styles.css
+++ b/src/app/styles.css
@@ -1965,6 +1965,7 @@ html[data-platform='win32'] .titlebar {
   overflow: hidden;
 }
 .code-window-header {
+  touch-action: none;
   display: flex;
   align-items: center;
   gap: 8px;
@@ -1996,67 +1997,6 @@ html[data-platform='win32'] .titlebar {
   height: 100%;
 }
 
-.cw-rz {
-  position: absolute;
-  z-index: 2;
-}
-.cw-rz-n {
-  top: -3px;
-  left: 8px;
-  right: 8px;
-  height: 6px;
-  cursor: ns-resize;
-}
-.cw-rz-s {
-  bottom: -3px;
-  left: 8px;
-  right: 8px;
-  height: 6px;
-  cursor: ns-resize;
-}
-.cw-rz-e {
-  right: -3px;
-  top: 8px;
-  bottom: 8px;
-  width: 6px;
-  cursor: ew-resize;
-}
-.cw-rz-w {
-  left: -3px;
-  top: 8px;
-  bottom: 8px;
-  width: 6px;
-  cursor: ew-resize;
-}
-.cw-rz-se {
-  right: -3px;
-  bottom: -3px;
-  width: 12px;
-  height: 12px;
-  cursor: nwse-resize;
-}
-.cw-rz-nw {
-  left: -3px;
-  top: -3px;
-  width: 12px;
-  height: 12px;
-  cursor: nwse-resize;
-}
-.cw-rz-sw {
-  left: -3px;
-  bottom: -3px;
-  width: 12px;
-  height: 12px;
-  cursor: nesw-resize;
-}
-.cw-rz-ne {
-  right: -3px;
-  top: -3px;
-  width: 12px;
-  height: 12px;
-  cursor: nesw-resize;
-}
-
 /* Breadcrumbs (canvas toolbar) */
 .crumbs {
   flex: 1;
@@ -6636,11 +6576,19 @@ body > .embed-editor_provenance {
    The same sheet the CMS uses, with a table in it. Columns are either the
    rules a variable is declared in (a theme and its modes) or the things a
    family of names describes (h1…h6) — see electron/project/cssVars.ts. */
-.vars-view .cms-detail {
-  width: 100%;
-}
 /* Shared column bounds keep each group's headings and values aligned. Values
    shrink from their preferred width before wide sets need horizontal scroll. */
+.vars-sheet {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+  --vars-inset: 24px;
+  --vars-name-col: 200px;
+  --vars-col-min: 180px;
+  --vars-col: 260px;
+}
 .vars-body {
   padding-bottom: 40px;
   /* The sheet's own left/right inset. It lives INSIDE the rows (the first grid
@@ -6649,15 +6597,25 @@ body > .embed-editor_provenance {
      has an edge to sit against. */
   padding-left: 0;
   padding-right: 0;
-  --vars-inset: 24px;
-  --vars-name-col: 200px;
-  --vars-col-min: 180px;
-  --vars-col: 260px;
-  /* One group at a time scrolls sideways (each table's value stack is its own
-     scroller), so the sheet itself never does — otherwise a single wide group
-     would drag every other group's names off with it. */
+  /* Value strips share a position; names remain outside those scrollers. */
   overflow-x: hidden;
 }
+.vars-scrollbar-row:not([hidden]) {
+  display: grid;
+  grid-template-columns: calc(var(--vars-inset) + 18px + var(--vars-name-col)) minmax(0, 1fr);
+  flex-shrink: 0;
+  padding-block: 3px;
+  border-top: 1px solid var(--border);
+  background: var(--bg);
+}
+.vars-horizontal-scroll {
+  grid-column: 2;
+  min-width: 0;
+  height: 14px;
+  overflow-x: scroll;
+  overflow-y: hidden;
+  overscroll-behavior-x: contain;
+}
 /* A group is two stacks: the labels, which never move, and a scroller holding
    its values. Only the right-hand one scrolls, so a row always says what it is
    — and nothing has to be held in place against the scroll. */
@@ -6667,16 +6625,12 @@ body > .embed-editor_provenance {
   grid-template-columns: auto minmax(0, 1fr);
   align-items: start;
 }
-/* The horizontal bar lands on the group's "New variable" line, because the
-   value side has no row of its own down there — see Table. The bar sits at the
-   bottom of this box, so the padding is what centres it in that line: half a
-   row (15px) puts the bar's own middle (it is 8px tall) on the row's middle. */
 /* The value stack no longer scrolls as one box. A heading has to sit outside a
    horizontal scroller to stick to the sheet — a box that scrolls in x is a
    scroll container in both axes, and `position: sticky` inside one resolves
    against that box, so the headings rode the rows out of sight. The scrolling
    moved down to the rows; the heading strip above them is held level with it
-   from VariablesView. The room for the scrollbar goes with the scroller. */
+   by the sheet's shared scroll coordinator. */
 .vars-scroll {
   min-width: 0;
 }
@@ -6684,7 +6638,11 @@ body > .embed-editor_provenance {
   overflow-x: auto;
   overscroll-behavior-x: contain;
   min-width: 0;
-  padding-bottom: 19px;
+  /* Keep native trackpad scrolling while presenting only the shared bottom bar. */
+  scrollbar-width: none;
+}
+.vars-scroll-rows::-webkit-scrollbar {
+  display: none;
 }
 .vars-scroll-head {
   overflow: hidden;
@@ -6726,10 +6684,39 @@ body > .embed-editor_provenance {
 .vars-body > .props-empty {
   padding-left: var(--vars-inset);
 }
+.vars-view > .dockable-window-header {
+  position: relative;
+}
+.vars-window-heading {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  max-width: calc(50% - 108px);
+}
+.vars-view .cms-detail-title,
+.vars-view .cms-detail-path {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.vars-view .cms-saved {
+  flex-shrink: 0;
+}
+.vars-view .cms-detail-path {
+  max-width: calc(50% - 140px);
+}
+.vars-view .dockable-window-toggle {
+  margin-left: 0;
+}
 .vars-search {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  min-width: 80px;
   height: 24px;
   width: 180px;
-  margin-left: auto;
   padding: 0 8px;
   font-size: 11px;
 }
diff --git a/src/features/code/CodeWindow.tsx b/src/features/code/CodeWindow.tsx
index a3046d5c..e32e48d8 100644
--- a/src/features/code/CodeWindow.tsx
+++ b/src/features/code/CodeWindow.tsx
@@ -1,23 +1,11 @@
 import Popup from '../../ui/Popup';
-import React, { useState } from 'react';
-import type { PointerEvent } from 'react';
+import type React from 'react';
 import CodeEditor from '../../ui/CodeEditor';
 import type { CodeEditorProps } from '../../ui/CodeEditor';
 import { CloseIcon, CodeIcon } from '../../ui/Icons';
-import { usePointerDrag } from '../../ui/usePointerDrag';
+import { useWindowRectangle } from '../../ui/useWindowRectangle';
+import { WindowResizeHandles } from '../../ui/WindowResizeHandles';
 
-const clamp = (value: number, minimum: number, maximum: number): number =>
-  Math.min(Math.max(value, minimum), maximum);
-const WIDTH_PX_MIN = 340;
-const HEIGHT_PX_MIN = 220;
-const EDGES = ['n', 's', 'e', 'w', 'se', 'sw', 'ne', 'nw'] as const;
-type Edge = (typeof EDGES)[number];
-interface Rectangle {
-  readonly x: number;
-  readonly y: number;
-  readonly w: number;
-  readonly h: number;
-}
 interface CodeWindowProps extends CodeEditorProps {
   readonly title: string;
   readonly onClose: () => void;
@@ -27,7 +15,8 @@ interface CodeWindowProps extends CodeEditorProps {
 // A single pointer session owns movement and cleanup, including closing mid-drag.
 export default function CodeWindow(props: CodeWindowProps) {
   const { title, language, value, onChange, onClose, editorKey, revealLine } = props;
-  const { rectangle, startDrag, startResize } = useWindowRectangle();
+  const windowState = useWindowRectangle({ width: 340, height: 220 });
+  const { rectangle } = windowState;
   return (
     <Popup
       mode="popover"
@@ -36,9 +25,14 @@ export default function CodeWindow(props: CodeWindowProps) {
       className="code-window"
       role="dialog"
       label={title}
-      style={{ left: rectangle.x, top: rectangle.y, width: rectangle.w, height: rectangle.h }}
+      style={{
+        left: rectangle.x,
+        top: rectangle.y,
+        width: rectangle.width,
+        height: rectangle.height,
+      }}
     >
-      <div className="code-window-header" onPointerDown={startDrag}>
+      <div className="code-window-header" onPointerDown={(event) => windowState.start(event)}>
         <CodeIcon size={13} />
         <span className="code-window-title">{title}</span>
         <span className="type-tag">{language}</span>
@@ -56,77 +50,7 @@ export default function CodeWindow(props: CodeWindowProps) {
           revealLine={revealLine}
         />
       </div>
-      {EDGES.map((edge) => (
-        <div key={edge} className={`cw-rz cw-rz-${edge}`} onPointerDown={startResize(edge)} />
-      ))}
+      <WindowResizeHandles windowState={windowState} />
     </Popup>
   );
 }
-
-function useWindowRectangle() {
-  const [rectangle, setRectangle] = useState(windowRectangleInitial);
-  const startPointer = usePointerDrag();
-  const startDrag = (event: PointerEvent<HTMLDivElement>): void => {
-    const ElementType = event.currentTarget.ownerDocument.defaultView?.Element;
-    if (ElementType && event.target instanceof ElementType && event.target.closest('button')) {
-      return;
-    }
-    event.preventDefault();
-    const { clientX, clientY } = event;
-    startPointer(event, {
-      onMove: (next) => {
-        setRectangle((current) => ({
-          ...current,
-          x: clamp(rectangle.x + next.clientX - clientX, -current.w + 120, window.innerWidth - 60),
-          y: clamp(rectangle.y + next.clientY - clientY, 42, window.innerHeight - 48),
-        }));
-      },
-    });
-  };
-  const startResize =
-    (edge: Edge) =>
-    (event: PointerEvent<HTMLDivElement>): void => {
-      event.preventDefault();
-      event.stopPropagation();
-      const { clientX, clientY } = event;
-      startPointer(event, {
-        onMove: (next) => {
-          setRectangle(
-            windowRectangleResize(rectangle, edge, next.clientX - clientX, next.clientY - clientY),
-          );
-        },
-      });
-    };
-  return { rectangle, startDrag, startResize };
-}
-
-function windowRectangleInitial(): Rectangle {
-  // Proportional dimensions make real code usable while keeping the canvas visible.
-  const width = clamp(Math.round(window.innerWidth * 0.52), WIDTH_PX_MIN, 1040);
-  const height = clamp(
-    Math.round(window.innerHeight * 0.78),
-    HEIGHT_PX_MIN,
-    window.innerHeight - 140,
-  );
-  return { x: Math.max(60, window.innerWidth - width - 80), y: 96, w: width, h: height };
-}
-
-function windowRectangleResize(start: Rectangle, edge: Edge, dx: number, dy: number): Rectangle {
-  // Mutation stays local to this calculation; the state is replaced atomically.
-  let { x, y, w: width, h: height } = start;
-  if (edge.includes('e')) {
-    width = Math.max(WIDTH_PX_MIN, start.w + dx);
-  }
-  if (edge.includes('s')) {
-    height = Math.max(HEIGHT_PX_MIN, start.h + dy);
-  }
-  if (edge.includes('w')) {
-    width = Math.max(WIDTH_PX_MIN, start.w - dx);
-    x = start.x + (start.w - width);
-  }
-  if (edge.includes('n')) {
-    height = Math.max(HEIGHT_PX_MIN, start.h - dy);
-    y = start.y + (start.h - height);
-  }
-  return { x, y, w: width, h: height };
-}
diff --git a/src/features/variables/VariableSheetScroll.tsx b/src/features/variables/VariableSheetScroll.tsx
new file mode 100644
index 00000000..7dd57e2a
--- /dev/null
+++ b/src/features/variables/VariableSheetScroll.tsx
@@ -0,0 +1,93 @@
+import React, { useLayoutEffect, useMemo, useRef, useState } from 'react';
+import type { VariableBlock } from './variablesBridge';
+import { assert } from '../../../shared/core/assert';
+import { createScrollSync, SCROLL_PEERS_MAX } from './variableScroll';
+
+interface ScrollMetrics {
+  readonly maximum: number;
+  readonly viewport: number;
+  readonly gutter: number;
+}
+
+export function useVariableSheetScroll(blocks: readonly VariableBlock[], columnCount: number) {
+  const sync = useMemo(createScrollSync, []);
+  const bodyRef = useRef<HTMLDivElement>(null);
+  const barRef = useRef<HTMLDivElement>(null);
+  const [metrics, setMetrics] = useState<ScrollMetrics>({ maximum: 0, viewport: 0, gutter: 0 });
+  useLayoutEffect(() => () => sync.dispose(), [sync]);
+  useLayoutEffect(() => sync.register(barRef.current ?? undefined), [sync]);
+  useLayoutEffect(() => {
+    const body = bodyRef.current;
+    if (!body) {
+      return undefined;
+    }
+    const strips = body.querySelectorAll<HTMLElement>('.vars-scroll-rows, .vars-scroll-head');
+    assert(strips.length <= SCROLL_PEERS_MAX, 'Variable scroll: strip limit exceeded');
+    const measure = () => {
+      // A hidden editor has no geometry. Preserve its position until it is visible again.
+      if (body.clientWidth === 0) {
+        return;
+      }
+      const next = measureSheet(body, strips);
+      setMetrics((previous) =>
+        previous.maximum === next.maximum &&
+        previous.viewport === next.viewport &&
+        previous.gutter === next.gutter
+          ? previous
+          : next,
+      );
+    };
+    measure();
+    if (typeof ResizeObserver !== 'function') {
+      return undefined;
+    }
+    const observer = new ResizeObserver(measure);
+    observer.observe(body);
+    for (const strip of strips) {
+      observer.observe(strip);
+    }
+    return () => observer.disconnect();
+  }, [blocks, columnCount]);
+  useLayoutEffect(() => sync.fit(metrics.maximum), [sync, metrics]);
+  return { sync, bodyRef, barRef, metrics };
+}
+
+export function VariableScrollBar({
+  scroll,
+}: {
+  readonly scroll: ReturnType<typeof useVariableSheetScroll>;
+}) {
+  const { metrics, barRef, sync } = scroll;
+  return (
+    <div
+      className="vars-scrollbar-row"
+      hidden={metrics.maximum <= 0}
+      style={{ paddingRight: metrics.gutter }}
+    >
+      <div
+        className="vars-horizontal-scroll"
+        ref={barRef}
+        role="region"
+        aria-label="Scroll variable values horizontally"
+        tabIndex={0}
+        onScroll={(event) => sync.broadcast(event.currentTarget, event.currentTarget.scrollLeft)}
+      >
+        <div style={{ width: metrics.viewport + metrics.maximum, height: 1 }} />
+      </div>
+    </div>
+  );
+}
+
+function measureSheet(body: HTMLElement, strips: NodeListOf<HTMLElement>): ScrollMetrics {
+  assert(body.clientWidth > 0, 'Variable scroll: visible body is required');
+  assert(strips.length <= SCROLL_PEERS_MAX, 'Variable scroll: strip limit exceeded');
+  let maximum = 0;
+  for (const strip of strips) {
+    maximum = Math.max(maximum, strip.scrollWidth - strip.clientWidth);
+  }
+  return {
+    maximum,
+    viewport: strips[0]?.clientWidth ?? 0,
+    gutter: body.offsetWidth - body.clientWidth,
+  };
+}
diff --git a/src/features/variables/VariableTable.tsx b/src/features/variables/VariableTable.tsx
index d373d3c3..98c4b3db 100644
--- a/src/features/variables/VariableTable.tsx
+++ b/src/features/variables/VariableTable.tsx
@@ -6,7 +6,8 @@ import type { VariableSlot, VariableRename, SlotOffset } from './variableRows';
 import { assert } from '../../../shared/core/assert';
 import { LIMITS } from '../../../shared/core/limits';
 import { buildSheetSlots, stemOf, sectionPrefix, rowRenames } from './variableRows';
-import { createScrollSync } from './variableScroll';
+import type { createScrollSync } from './variableScroll';
+import { useVariableSheetScroll, VariableScrollBar } from './VariableSheetScroll';
 import Cell from './VariableCell';
 import useListReorder from '../../ui/useListReorder';
 import MoreMenu from '../../ui/MoreMenu';
@@ -90,11 +91,6 @@ function sheetOffset(offsets: readonly SlotOffset[], index: number): SlotOffset
   assert(offset.rows >= offset.head, 'Variable table: rows precede their heading');
   return offset;
 }
-function useScrollSync() {
-  const sync = useMemo(createScrollSync, []);
-  useEffect(() => () => sync.dispose(), [sync]);
-  return sync;
-}
 
 function SectionMenu({ onRename, onDuplicate, onDelete }: SectionMenuProps) {
   return (
@@ -241,7 +237,8 @@ function useSheet(props: SheetProps) {
   });
   // Owned here rather than by any one table, for the same reason the section
   // drag is: what it coordinates is the tables against each other.
-  const scrollSync = useScrollSync();
+  const scroll = useVariableSheetScroll(blocks, group.columns.length);
+  const scrollSync = scroll.sync;
 
   // The column headings name the selector's modes, not any one group's rows, so
   // they are the sheet's rather than the first table's. Written here, they stay
@@ -249,10 +246,7 @@ function useSheet(props: SheetProps) {
   // happened to be carrying them.
   const headRef = useRef<HTMLDivElement>(null);
   const headStripRef = useRef<HTMLDivElement>(null);
-  useEffect(
-    () => scrollSync?.register(group.columns.length, headStripRef.current ?? undefined),
-    [scrollSync, group.columns.length],
-  );
+  useLayoutEffect(() => scrollSync.register(headStripRef.current ?? undefined), [scrollSync]);
   // The group titles come to rest under this, so its height has to be known
   // rather than guessed — a row's height is set in CSS and read here.
   useLayoutEffect(() => {
@@ -275,7 +269,17 @@ function useSheet(props: SheetProps) {
 
   const single = group.columns.length === 1;
 
-  return { ...props, slots, slotOffsets, rowsDrag, scrollSync, headRef, headStripRef, single };
+  return {
+    ...props,
+    slots,
+    slotOffsets,
+    rowsDrag,
+    scroll,
+    scrollSync,
+    headRef,
+    headStripRef,
+    single,
+  };
 }
 export default function Sheet(props: SheetProps) {
   const state = useSheet(props);
@@ -296,41 +300,44 @@ function SheetView({ state }: { readonly state: ReturnType<typeof useSheet> }) {
   } = state;
   const { slotOffsets, rowsDrag, scrollSync } = state;
   return (
-    <>
-      <SheetHeader state={state} />
-      {blocks.map((block, index) => (
-        <Table
-          key={index}
-          block={block}
-          group={group}
-          onSave={onSave}
-          sectionDrag={{
-            props:
-              block.title !== undefined
-                ? rowsDrag.rowProps(sheetOffset(slotOffsets, index).head)
-                : {},
-            className:
-              block.title !== undefined
-                ? rowsDrag.rowClass(sheetOffset(slotOffsets, index).head)
-                : '',
-          }}
-          onAdd={onAdd}
-          onRename={onRename}
-          onRetitle={onRetitle}
-          onDuplicateSection={onDuplicateSection}
-          onDeleteSection={onDeleteSection}
-          rowsDrag={rowsDrag}
-          slotOffset={sheetOffset(slotOffsets, index).rows}
-          fluidOf={fluidOf}
-          onDraft={onDraft}
-          scrollSync={scrollSync}
-          // The group's headings are the sheet's now; only a matrix, whose
-          // columns are its own, still writes its own.
-          showHead={block.kind === 'matrix'}
-        />
-      ))}
-      {!blocks.length && <div className="props-empty">Nothing matches the search.</div>}
-    </>
+    <div className="vars-sheet">
+      <div className="cms-detail-body vars-body" ref={state.scroll.bodyRef}>
+        <SheetHeader state={state} />
+        {blocks.map((block, index) => (
+          <Table
+            key={index}
+            block={block}
+            group={group}
+            onSave={onSave}
+            sectionDrag={{
+              props:
+                block.title !== undefined
+                  ? rowsDrag.rowProps(sheetOffset(slotOffsets, index).head)
+                  : {},
+              className:
+                block.title !== undefined
+                  ? rowsDrag.rowClass(sheetOffset(slotOffsets, index).head)
+                  : '',
+            }}
+            onAdd={onAdd}
+            onRename={onRename}
+            onRetitle={onRetitle}
+            onDuplicateSection={onDuplicateSection}
+            onDeleteSection={onDeleteSection}
+            rowsDrag={rowsDrag}
+            slotOffset={sheetOffset(slotOffsets, index).rows}
+            fluidOf={fluidOf}
+            onDraft={onDraft}
+            scrollSync={scrollSync}
+            // The group's headings are the sheet's now; only a matrix, whose
+            // columns are its own, still writes its own.
+            showHead={block.kind === 'matrix'}
+          />
+        ))}
+        {!blocks.length && <div className="props-empty">Nothing matches the search.</div>}
+      </div>
+      <VariableScrollBar scroll={state.scroll} />
+    </div>
   );
 }
 
@@ -452,12 +459,14 @@ function useVariableTable(props: TableProps) {
   // are rendered for why they are two boxes rather than one.
   const headRef = useRef<HTMLDivElement>(null);
   const rowsRef = useRef<HTMLDivElement>(null);
-  // Keyed by how many columns this table has: only tables of the same width
-  // have a scroll position worth sharing.
-  useEffect(
-    () => scrollSync?.register(columns.length, rowsRef.current ?? undefined),
-    [scrollSync, columns.length],
-  );
+  useLayoutEffect(() => {
+    const removeRows = scrollSync.register(rowsRef.current ?? undefined);
+    const removeHead = scrollSync.register(headRef.current ?? undefined);
+    return () => {
+      removeRows?.();
+      removeHead?.();
+    };
+  }, [scrollSync, props.showHead]);
   // Whether this table's heading is a name its rows share (renameable) or a
   // comment above them (not — see sectionPrefix).
   const prefix = sectionPrefix(block);
@@ -528,10 +537,7 @@ function TableView({ state }: { readonly state: ReturnType<typeof useVariableTab
             step and each line runs across both. */}
         <TableScrollHead state={state} />
         <TableScrollRows state={state} />
-        {/* No counterpart to the add row here: the scroller's own scrollbar
-            stands in for it. Given one, the bar was pushed a row below the
-            button and read as belonging to whatever came next; without one it
-            sits on the same line, which is also the line it scrolls. */}
+        {/* Adding a variable is a label-side action; values need no extra row. */}
       </div>
     </div>
   );
@@ -722,28 +728,15 @@ function TableScrollHead({ state }: { readonly state: ReturnType<typeof useVaria
 }
 
 function TableScrollRows({ state }: { readonly state: ReturnType<typeof useVariableTable> }) {
-  const {
-    block,
-    onSave,
-    fluidOf,
-    onDraft,
-    scrollSync,
-    columns,
-    valueTemplate,
-    headRef,
-    rowsRef,
-    rowProps,
-  } = state;
+  const { block, onSave, fluidOf, onDraft, scrollSync, columns, valueTemplate, rowsRef, rowProps } =
+    state;
   return (
     <div
       className="vars-scroll-rows"
       ref={rowsRef}
       onScroll={(event) => {
         const { scrollLeft } = event.currentTarget;
-        if (headRef.current) {
-          headRef.current.scrollLeft = scrollLeft;
-        }
-        scrollSync?.broadcast(columns.length, event.currentTarget, scrollLeft);
+        scrollSync.broadcast(event.currentTarget, scrollLeft);
       }}
     >
       {block.rows.map((row, index) => (
diff --git a/src/features/variables/VariablesView.tsx b/src/features/variables/VariablesView.tsx
index f83684e8..f30d842a 100644
--- a/src/features/variables/VariablesView.tsx
+++ b/src/features/variables/VariablesView.tsx
@@ -19,6 +19,7 @@ import { fluidCheck, resolveValue } from './fluid';
 import { getHost, setHost } from '../style/model/host';
 import { CloseIcon, CheckIcon } from '../../ui/Icons';
 import Sheet from './VariableTable';
+import DockableWindow, { type WindowMode } from '../../ui/DockableWindow';
 import '../style/utilities.css';
 export { dropPlan, movesForDrop } from './variableRows';
 export { createScrollSync } from './variableScroll';
@@ -29,6 +30,7 @@ export interface VariablesViewProps {
   readonly selected?: VariableSelection | undefined;
   readonly hidden?: boolean;
   readonly onClose?: () => void;
+  readonly onDock?: () => void;
   readonly showToast?: ((message: string, kind: 'error') => void) | undefined;
   readonly onRecordUndo?: ((command: VariableUndo) => void) | undefined;
 }
@@ -53,72 +55,84 @@ function useVariablesView(props: VariablesViewProps) {
 
 export default function VariablesView(props: VariablesViewProps) {
   const state = useVariablesView(props);
-  return <VariablesViewBody state={state} />;
+  const [mode, setMode] = useState<WindowMode>('floating');
+  const changeMode = (next: WindowMode): void => {
+    setMode(next);
+    if (next === 'docked') {
+      props.onDock?.();
+    }
+  };
+  return <VariablesViewBody state={state} mode={mode} onModeChange={changeMode} />;
 }
-function VariablesViewBody({ state }: { readonly state: ReturnType<typeof useVariablesView> }) {
-  const {
-    hidden,
-    onClose,
-    saved,
-    query,
-    setQuery,
-    file,
-    group,
-    save,
-    move,
-    add,
-    rename,
-    retitle,
-    duplicateSection,
-    deleteSection,
-    fluidOf,
-    noteDraft,
-    blocks,
-  } = state;
+function VariablesViewBody({
+  state,
+  mode,
+  onModeChange,
+}: {
+  readonly state: ReturnType<typeof useVariablesView>;
+  readonly mode: WindowMode;
+  readonly onModeChange: (mode: WindowMode) => void;
+}) {
+  const { hidden, file, group } = state;
   if (!group) {
-    return <div className={`cms-view vars-view ${hidden ? 'hidden' : ''}`} />;
+    return undefined;
   }
 
   assert(file !== undefined, 'VariablesView: group must belong to a file');
   return (
-    <div className={`cms-view vars-view ${hidden ? 'hidden' : ''}`}>
-      <div className="cms-detail">
-        <div className="cms-detail-head">
-          <button className="ghost cms-back" title="Close" onClick={onClose}>
-            <CloseIcon size={13} />
-          </button>
-          <span className="cms-detail-title">{group.label}</span>
-          <span className={`cms-saved ${saved ? 'on' : ''}`}>
-            <CheckIcon size={11} /> Saved
-          </span>
-          <input
-            maxLength={LIMITS.attrCharsMax}
-            className="vars-search"
-            value={query}
-            placeholder="Search variables"
-            spellCheck={false}
-            onChange={(event) => setQuery(event.target.value)}
-          />
-          <span className="cms-detail-path">{file.rel}</span>
-        </div>
+    <DockableWindow
+      mode={mode}
+      onModeChange={onModeChange}
+      label="Variables"
+      className="vars-view"
+      hidden={hidden ?? false}
+      minimumSize={{ width: 560, height: 280 }}
+      storageKey="stacki.window.variables"
+      header={<VariablesWindowHeader state={state} />}
+    >
+      <Sheet
+        blocks={state.blocks}
+        group={group}
+        onSave={state.save}
+        onMove={state.move}
+        onAdd={state.add}
+        onRename={state.rename}
+        onRetitle={state.retitle}
+        onDuplicateSection={state.duplicateSection}
+        onDeleteSection={state.deleteSection}
+        fluidOf={state.fluidOf}
+        onDraft={state.noteDraft}
+      />
+    </DockableWindow>
+  );
+}
 
-        <div className="cms-detail-body vars-body">
-          <Sheet
-            blocks={blocks}
-            group={group}
-            onSave={save}
-            onMove={move}
-            onAdd={add}
-            onRename={rename}
-            onRetitle={retitle}
-            onDuplicateSection={duplicateSection}
-            onDeleteSection={deleteSection}
-            fluidOf={fluidOf}
-            onDraft={noteDraft}
-          />
-        </div>
+function VariablesWindowHeader({ state }: { readonly state: ReturnType<typeof useVariablesView> }) {
+  return (
+    <>
+      <div className="vars-window-heading">
+        <button className="ghost cms-back" title="Close" onClick={state.onClose}>
+          <CloseIcon size={13} />
+        </button>
+        <span className="cms-detail-title" title={state.group?.label}>
+          {state.group?.label}
+        </span>
+        <span className={`cms-saved ${state.saved ? 'on' : ''}`}>
+          <CheckIcon size={11} /> Saved
+        </span>
       </div>
-    </div>
+      <input
+        maxLength={LIMITS.attrCharsMax}
+        className="vars-search"
+        value={state.query}
+        placeholder="Search variables"
+        spellCheck={false}
+        onChange={(event) => state.setQuery(event.target.value)}
+      />
+      <span className="cms-detail-path" title={state.file?.rel}>
+        {state.file?.rel}
+      </span>
+    </>
   );
 }
 
diff --git a/src/features/variables/variableScroll.ts b/src/features/variables/variableScroll.ts
index 03099028..c1a2b6d4 100644
--- a/src/features/variables/variableScroll.ts
+++ b/src/features/variables/variableScroll.ts
@@ -5,68 +5,65 @@ import { LIMITS } from '../../../shared/core/limits';
 export interface ScrollPeer {
   scrollLeft: number;
 }
+
+// Each block contributes rows and a heading; the sheet adds its heading and scrollbar.
+export const SCROLL_PEERS_MAX = LIMITS.scanEntriesMax * 2 + 2;
+
 export function createScrollSync() {
-  const byColumns = new Map<number, Set<ScrollPeer>>();
-  let peerCount = 0;
-  let echoing = false;
-  let cancelFrame: (() => void) | undefined;
-  const release = () => {
-    echoing = false;
-    cancelFrame = undefined;
+  const peers = new Map<ScrollPeer, symbol>();
+  let expected = new WeakMap<ScrollPeer, number>();
+  let position = 0;
+  let maximum = Number.MAX_SAFE_INTEGER;
+  const apply = (element: ScrollPeer) => {
+    if (Math.abs(element.scrollLeft - position) > 0.5) {
+      element.scrollLeft = position;
+      // Browsers clamp narrower tables. Their delayed scroll events must not
+      // pull the common scrollbar back from the wider table's position.
+      expected.set(element, element.scrollLeft);
+    }
   };
-  const register = (count: number, element: ScrollPeer | undefined) => {
-    assert(Number.isSafeInteger(count), 'Variable scroll: columns must be an integer');
-    assert(count >= 0, 'Variable scroll: columns must be nonnegative');
-    assert(count <= LIMITS.scanEntriesMax, 'Variable scroll: column limit exceeded');
+  const register = (element: ScrollPeer | undefined) => {
     if (!element) {
       return undefined;
     }
-    const peers = byColumns.get(count) ?? new Set<ScrollPeer>();
-    if (!peers.has(element)) {
-      assert(peerCount < LIMITS.scanEntriesMax, 'Variable scroll: peer limit exceeded');
-      peerCount++;
-    }
-    peers.add(element);
-    byColumns.set(count, peers);
+    assert(peers.size < SCROLL_PEERS_MAX, 'Variable scroll: peer limit exceeded');
+    const registration = Symbol();
+    peers.set(element, registration);
+    apply(element);
     return () => {
-      if (peers.delete(element)) {
-        peerCount--;
-      }
-      if (!peers.size && byColumns.get(count) === peers) {
-        byColumns.delete(count);
+      if (peers.get(element) === registration) {
+        peers.delete(element);
+        expected.delete(element);
       }
     };
   };
-  const broadcast = (count: number, from: ScrollPeer, left: number) => {
+  const broadcast = (from: ScrollPeer, left: number) => {
     assert(Number.isFinite(left), 'Variable scroll: position must be finite');
-    assert(peerCount <= LIMITS.scanEntriesMax, 'Variable scroll: peer limit exceeded');
-    if (echoing) {
+    assert(peers.size <= SCROLL_PEERS_MAX, 'Variable scroll: peer limit exceeded');
+    const echo = expected.get(from);
+    expected.delete(from);
+    if (echo !== undefined && Math.abs(echo - left) <= 0.5) {
       return;
     }
-    echoing = true;
-    for (const element of byColumns.get(count) ?? []) {
-      if (element !== from && Math.abs(element.scrollLeft - left) > 0.5) {
-        element.scrollLeft = left;
-      }
+    position = Math.max(0, Math.min(maximum, left));
+    for (const element of peers.keys()) {
+      apply(element);
     }
-    // One frame suppresses the scroll events caused by these assignments.
-    if (typeof requestAnimationFrame === 'function') {
-      const frame = requestAnimationFrame(release);
-      cancelFrame = () => cancelAnimationFrame(frame);
-    } else {
-      const timer = setTimeout(release, 0);
-      cancelFrame = () => clearTimeout(timer);
+  };
+  const fit = (limit: number) => {
+    assert(Number.isFinite(limit), 'Variable scroll: range must be finite');
+    assert(limit >= 0, 'Variable scroll: range must be nonnegative');
+    maximum = limit;
+    position = Math.min(position, maximum);
+    for (const element of peers.keys()) {
+      apply(element);
     }
   };
   const dispose = () => {
-    cancelFrame?.();
-    cancelFrame = undefined;
-    echoing = false;
-    for (const peers of byColumns.values()) {
-      peers.clear();
-    }
-    byColumns.clear();
-    peerCount = 0;
+    peers.clear();
+    expected = new WeakMap();
+    position = 0;
+    maximum = Number.MAX_SAFE_INTEGER;
   };
-  return { register, broadcast, dispose };
+  return { register, broadcast, fit, dispose };
 }
diff --git a/src/ui/DockableWindow.tsx b/src/ui/DockableWindow.tsx
new file mode 100644
index 00000000..688dfc34
--- /dev/null
+++ b/src/ui/DockableWindow.tsx
@@ -0,0 +1,75 @@
+import { useRef } from 'react';
+import type { ReactNode } from 'react';
+import { MaximizeIcon, MinimizeIcon } from './Icons';
+import { PopupScopeContext, usePopupScope } from './popupScope';
+import { useWindowRectangle } from './useWindowRectangle';
+import { WindowResizeHandles } from './WindowResizeHandles';
+import type { WindowSize } from './windowGeometry';
+import './popup.css';
+import './dockableWindow.css';
+
+export type WindowMode = 'docked' | 'floating';
+interface DockableWindowProps {
+  readonly mode: WindowMode;
+  readonly onModeChange: (mode: WindowMode) => void;
+  readonly label: string;
+  readonly header: ReactNode;
+  readonly children: ReactNode;
+  readonly minimumSize: WindowSize;
+  readonly storageKey?: string;
+  readonly hidden?: boolean;
+  readonly className?: string;
+}
+
+// The dock is owned by the caller, so the same frame can later wrap either sidebar.
+// Keep one DOM tree through mode changes: editors retain focus, drafts and scroll position.
+export default function DockableWindow(props: DockableWindowProps) {
+  const windowState = useWindowRectangle(props.minimumSize, props.storageKey);
+  const { rectangle } = windowState;
+  const floating = props.mode === 'floating';
+  const surface = useRef<HTMLDivElement>(null);
+  const scope = usePopupScope(surface, { active: floating, role: 'dialog', anchor: undefined });
+  const action = floating ? 'Dock window' : 'Undock window';
+  return (
+    <div
+      ref={surface}
+      className={`popup-surface dockable-window ${props.className ?? ''}`}
+      data-window-mode={props.mode}
+      hidden={!floating && props.hidden}
+      role={floating ? 'dialog' : undefined}
+      aria-label={props.label}
+      style={
+        floating
+          ? {
+              left: rectangle.x,
+              top: rectangle.y,
+              width: rectangle.width,
+              height: rectangle.height,
+            }
+          : undefined
+      }
+    >
+      <PopupScopeContext.Provider value={scope}>
+        <div
+          className="dockable-window-header"
+          tabIndex={floating ? 0 : undefined}
+          aria-label={floating ? 'Move window with arrow keys' : undefined}
+          onPointerDown={floating ? (event) => windowState.start(event) : undefined}
+          onKeyDown={floating ? (event) => windowState.onKeyDown(event) : undefined}
+        >
+          {props.header}
+          <button
+            className="ghost dockable-window-toggle"
+            title={action}
+            aria-label={action}
+            onClick={() => props.onModeChange(floating ? 'docked' : 'floating')}
+          >
+            {floating ? <MaximizeIcon size={14} /> : <MinimizeIcon size={14} />}
+          </button>
+        </div>
+        <div className="dockable-window-body">{props.children}</div>
+        {floating && <WindowResizeHandles windowState={windowState} />}
+      </PopupScopeContext.Provider>
+    </div>
+  );
+}
diff --git a/src/ui/Icons.tsx b/src/ui/Icons.tsx
index 1c94671b..d955f200 100644
--- a/src/ui/Icons.tsx
+++ b/src/ui/Icons.tsx
@@ -363,6 +363,12 @@ export const MaximizeIcon = (props: IconProps) => (
   </I>
 );
 
+export const MinimizeIcon = (props: IconProps) => (
+  <I {...props}>
+    <path d="M5.5 2.5v3h-3M10.5 2.5v3h3M5.5 13.5v-3h-3M10.5 13.5v-3h3" />
+  </I>
+);
+
 export const DesktopIcon = (props: IconProps) => (
   <I {...props}>
     <rect x="2" y="3" width="12" height="8.5" rx="1.2" />
diff --git a/src/ui/WindowResizeHandles.tsx b/src/ui/WindowResizeHandles.tsx
new file mode 100644
index 00000000..fa39799a
--- /dev/null
+++ b/src/ui/WindowResizeHandles.tsx
@@ -0,0 +1,47 @@
+import { createPortal } from 'react-dom';
+import './windowResizeHandles.css';
+import { WINDOW_EDGES, type WindowEdge } from './windowGeometry';
+import type { useWindowRectangle } from './useWindowRectangle';
+
+const EDGE_LABELS: Readonly<Record<WindowEdge, string>> = {
+  n: 'top',
+  s: 'bottom',
+  e: 'right',
+  w: 'left',
+  se: 'bottom right',
+  sw: 'bottom left',
+  ne: 'top right',
+  nw: 'top left',
+};
+
+export function WindowResizeHandles({
+  windowState,
+}: {
+  readonly windowState: ReturnType<typeof useWindowRectangle>;
+}) {
+  return (
+    <>
+      {WINDOW_EDGES.map((edge) => (
+        <div
+          key={edge}
+          className={`window-resize window-resize-${edge}`}
+          role="separator"
+          tabIndex={0}
+          aria-label={`Resize window (${EDGE_LABELS[edge]})`}
+          aria-orientation={edge === 'n' || edge === 's' ? 'horizontal' : 'vertical'}
+          aria-valuemin={1}
+          aria-valuemax={edge === 'n' || edge === 's' ? window.innerHeight : window.innerWidth}
+          aria-valuenow={
+            edge === 'n' || edge === 's'
+              ? windowState.rectangle.height
+              : windowState.rectangle.width
+          }
+          aria-valuetext={`${windowState.rectangle.width} × ${windowState.rectangle.height} px`}
+          onPointerDown={(event) => windowState.start(event, edge)}
+          onKeyDown={(event) => windowState.onKeyDown(event, edge)}
+        />
+      ))}
+      {windowState.dragging && createPortal(<div className="window-drag-cover" />, document.body)}
+    </>
+  );
+}
diff --git a/src/ui/dockableWindow.css b/src/ui/dockableWindow.css
new file mode 100644
index 00000000..49f3f215
--- /dev/null
+++ b/src/ui/dockableWindow.css
@@ -0,0 +1,47 @@
+.dockable-window {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  background: var(--bg);
+  z-index: 6;
+}
+.dockable-window[hidden] {
+  display: none;
+}
+.dockable-window[data-window-mode='floating'] {
+  position: fixed;
+  inset: auto;
+  z-index: 250;
+  border: 1px solid var(--border-strong);
+  border-radius: 12px;
+  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
+  overflow: hidden;
+}
+.dockable-window-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-height: 44px;
+  padding: 0 12px;
+  flex-shrink: 0;
+  border-bottom: 1px solid var(--border);
+}
+[data-window-mode='floating'] > .dockable-window-header {
+  cursor: grab;
+  user-select: none;
+  touch-action: none;
+}
+.dockable-window-toggle {
+  margin-left: auto;
+  flex-shrink: 0;
+}
+.dockable-window-body {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
diff --git a/src/ui/useWindowRectangle.ts b/src/ui/useWindowRectangle.ts
new file mode 100644
index 00000000..46178db6
--- /dev/null
+++ b/src/ui/useWindowRectangle.ts
@@ -0,0 +1,116 @@
+import { useEffect, useState } from 'react';
+import type { KeyboardEvent, PointerEvent } from 'react';
+import { usePointerDrag } from './usePointerDrag';
+import {
+  fitWindowRectangle,
+  resizeWindowRectangle,
+  type WindowEdge,
+  type WindowSize,
+} from './windowGeometry';
+import { readWindowRectangle, storeWindowRectangle } from './windowPreferences';
+
+// Tool windows and the code editor share geometry, without knowing their dock location.
+export function useWindowRectangle(minimum: WindowSize, storageKey?: string) {
+  const [dragging, setDragging] = useState(false);
+  const [rectangle, setRectangle] = useWindowPlacement(minimum, { storageKey, dragging });
+  const startPointer = usePointerDrag();
+  const start = (event: PointerEvent<HTMLDivElement>, edge?: WindowEdge): void => {
+    if (event.button !== 0 || event.isPrimary === false) {
+      return;
+    }
+    if (
+      event.target instanceof Element &&
+      event.target.closest('button, input, select, textarea, a, [contenteditable], [role=button]')
+    ) {
+      return;
+    }
+    event.preventDefault();
+    const origin = { x: event.clientX, y: event.clientY };
+    setDragging(true);
+    startPointer(event, {
+      cursor: edge ? `${edge}-resize` : 'move',
+      onMove: (next) => {
+        const delta = { x: next.clientX - origin.x, y: next.clientY - origin.y };
+        setRectangle(
+          edge
+            ? resizeWindowRectangle(rectangle, edge, delta, viewportSize(), minimum)
+            : fitWindowRectangle(
+                { ...rectangle, x: rectangle.x + delta.x, y: rectangle.y + delta.y },
+                viewportSize(),
+                minimum,
+              ),
+        );
+      },
+      onEnd: () => setDragging(false),
+    });
+  };
+  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>, edge?: WindowEdge): void => {
+    if (event.target !== event.currentTarget) {
+      return;
+    }
+    const delta = keyDelta(event);
+    if (!delta) {
+      return;
+    }
+    event.preventDefault();
+    setRectangle((current) =>
+      edge
+        ? resizeWindowRectangle(current, edge, delta, viewportSize(), minimum)
+        : fitWindowRectangle(
+            { ...current, x: current.x + delta.x, y: current.y + delta.y },
+            viewportSize(),
+            minimum,
+          ),
+    );
+  };
+  return { rectangle, dragging, start, onKeyDown };
+}
+
+function useWindowPlacement(
+  minimum: WindowSize,
+  {
+    storageKey,
+    dragging,
+  }: {
+    readonly storageKey: string | undefined;
+    readonly dragging: boolean;
+  },
+) {
+  const [rectangle, setRectangle] = useState(() =>
+    readWindowRectangle(storageKey, viewportSize(), minimum),
+  );
+  const { width, height } = minimum;
+  useEffect(() => {
+    const fit = (): void => {
+      setRectangle((current) => fitWindowRectangle(current, viewportSize(), { width, height }));
+    };
+    window.addEventListener('resize', fit);
+    return () => window.removeEventListener('resize', fit);
+  }, [width, height]);
+  useEffect(() => {
+    if (!dragging) {
+      storeWindowRectangle(storageKey, rectangle);
+    }
+  }, [storageKey, rectangle, dragging]);
+  return [rectangle, setRectangle] as const;
+}
+
+function viewportSize(): WindowSize {
+  return { width: window.innerWidth, height: window.innerHeight };
+}
+
+function keyDelta(event: KeyboardEvent): { readonly x: number; readonly y: number } | undefined {
+  const step = event.shiftKey ? 50 : 10;
+  switch (event.key) {
+    case 'ArrowLeft':
+      return { x: -step, y: 0 };
+    case 'ArrowRight':
+      return { x: step, y: 0 };
+    case 'ArrowUp':
+      return { x: 0, y: -step };
+    case 'ArrowDown':
+      return { x: 0, y: step };
+    default:
+      return undefined;
+  }
+}
diff --git a/src/ui/windowGeometry.ts b/src/ui/windowGeometry.ts
new file mode 100644
index 00000000..76307a96
--- /dev/null
+++ b/src/ui/windowGeometry.ts
@@ -0,0 +1,89 @@
+import { assert } from '../../shared/core/assert';
+
+export interface WindowSize {
+  readonly width: number;
+  readonly height: number;
+}
+export interface WindowRectangle extends WindowSize {
+  readonly x: number;
+  readonly y: number;
+}
+export const WINDOW_EDGES = ['n', 's', 'e', 'w', 'se', 'sw', 'ne', 'nw'] as const;
+export type WindowEdge = (typeof WINDOW_EDGES)[number];
+const TOP_PX = 42;
+const MARGIN_PX = 8;
+
+export function initialWindowRectangle(viewport: WindowSize, minimum: WindowSize): WindowRectangle {
+  const width = Math.max(minimum.width, Math.min(1040, Math.round(viewport.width * 0.52)));
+  const height = Math.max(minimum.height, Math.round(viewport.height * 0.78));
+  return fitWindowRectangle(
+    {
+      x: Math.round((viewport.width - width) / 2),
+      y: Math.round((viewport.height - height) / 2),
+      width,
+      height,
+    },
+    viewport,
+    minimum,
+  );
+}
+
+export function fitWindowRectangle(
+  rectangle: WindowRectangle,
+  viewport: WindowSize,
+  minimum: WindowSize,
+): WindowRectangle {
+  assert(Number.isFinite(viewport.width), 'Window viewport width must be finite');
+  assert(viewport.width > 0, 'Window viewport width must be positive');
+  assert(Number.isFinite(viewport.height), 'Window viewport height must be finite');
+  assert(viewport.height > 0, 'Window viewport height must be positive');
+  const top = Math.min(TOP_PX, Math.max(0, viewport.height - MARGIN_PX - 36));
+  const left = Math.min(MARGIN_PX, Math.max(0, viewport.width - 1));
+  const available = {
+    width: Math.max(1, viewport.width - left - MARGIN_PX),
+    height: Math.max(1, viewport.height - top - MARGIN_PX),
+  };
+  const width = clamp(rectangle.width, Math.min(minimum.width, available.width), available.width);
+  const height = clamp(
+    rectangle.height,
+    Math.min(minimum.height, available.height),
+    available.height,
+  );
+  return {
+    x: clamp(rectangle.x, left, Math.max(left, viewport.width - width - MARGIN_PX)),
+    y: clamp(rectangle.y, top, Math.max(top, viewport.height - height - MARGIN_PX)),
+    width,
+    height,
+  };
+}
+
+export function resizeWindowRectangle(
+  start: WindowRectangle,
+  edge: WindowEdge,
+  delta: { readonly x: number; readonly y: number },
+  viewport: WindowSize,
+  minimum: WindowSize,
+): WindowRectangle {
+  assert(Number.isFinite(delta.x), 'Window horizontal resize delta must be finite');
+  assert(Number.isFinite(delta.y), 'Window vertical resize delta must be finite');
+  const fitted = fitWindowRectangle(start, viewport, minimum);
+  const widthMin = Math.min(minimum.width, fitted.width);
+  const heightMin = Math.min(minimum.height, fitted.height);
+  const right = fitted.x + fitted.width;
+  const bottom = fitted.y + fitted.height;
+  const x = edge.includes('w') ? clamp(fitted.x + delta.x, MARGIN_PX, right - widthMin) : fitted.x;
+  const y = edge.includes('n')
+    ? clamp(fitted.y + delta.y, fitted.y < TOP_PX ? 0 : TOP_PX, bottom - heightMin)
+    : fitted.y;
+  const width = edge.includes('e')
+    ? clamp(fitted.width + delta.x, widthMin, viewport.width - fitted.x - MARGIN_PX)
+    : right - x;
+  const height = edge.includes('s')
+    ? clamp(fitted.height + delta.y, heightMin, viewport.height - fitted.y - MARGIN_PX)
+    : bottom - y;
+  return fitWindowRectangle({ x, y, width, height }, viewport, minimum);
+}
+
+function clamp(value: number, minimum: number, maximum: number): number {
+  return Math.round(Math.min(Math.max(value, minimum), maximum));
+}
diff --git a/src/ui/windowPreferences.ts b/src/ui/windowPreferences.ts
new file mode 100644
index 00000000..d2cd90f2
--- /dev/null
+++ b/src/ui/windowPreferences.ts
@@ -0,0 +1,79 @@
+import { toRecord } from '../../shared/core/record';
+import {
+  fitWindowRectangle,
+  initialWindowRectangle,
+  type WindowRectangle,
+  type WindowSize,
+} from './windowGeometry';
+
+const STORED_VALUE_CHARS_MAX = 256;
+const COORDINATE_PX_MAX = 100_000;
+
+// Stored geometry is only a preference: corrupt or unavailable storage falls back to the center.
+export function readWindowRectangle(
+  key: string | undefined,
+  viewport: WindowSize,
+  minimum: WindowSize,
+): WindowRectangle {
+  let stored: WindowRectangle | undefined;
+  if (key) {
+    try {
+      stored = parseStoredWindowRectangle(localStorage.getItem(key));
+    } catch {
+      // Privacy modes can deny storage; the tool must remain usable.
+    }
+  }
+  return stored
+    ? fitWindowRectangle(stored, viewport, minimum)
+    : initialWindowRectangle(viewport, minimum);
+}
+
+export function storeWindowRectangle(key: string | undefined, rectangle: WindowRectangle): void {
+  if (!key) {
+    return;
+  }
+  try {
+    localStorage.setItem(key, JSON.stringify(rectangle));
+  } catch {
+    // Losing an optional preference must not interrupt an editor gesture.
+  }
+}
+
+export function parseStoredWindowRectangle(raw: unknown): WindowRectangle | undefined {
+  if (typeof raw !== 'string' || raw.length > STORED_VALUE_CHARS_MAX) {
+    return undefined;
+  }
+  let input: unknown;
+  try {
+    input = JSON.parse(raw);
+  } catch {
+    return undefined;
+  }
+  const value = toRecord(input);
+  const x = value?.['x'];
+  const y = value?.['y'];
+  const width = value?.['width'];
+  const height = value?.['height'];
+  if (!storedCoordinate(x, 0)) {
+    return undefined;
+  }
+  if (!storedCoordinate(y, 0)) {
+    return undefined;
+  }
+  if (!storedCoordinate(width, 1)) {
+    return undefined;
+  }
+  if (!storedCoordinate(height, 1)) {
+    return undefined;
+  }
+  return { x, y, width, height };
+}
+
+function storedCoordinate(value: unknown, minimum: number): value is number {
+  return (
+    typeof value === 'number' &&
+    Number.isSafeInteger(value) &&
+    value >= minimum &&
+    value <= COORDINATE_PX_MAX
+  );
+}
diff --git a/src/ui/windowResizeHandles.css b/src/ui/windowResizeHandles.css
new file mode 100644
index 00000000..f8b3277f
--- /dev/null
+++ b/src/ui/windowResizeHandles.css
@@ -0,0 +1,67 @@
+.window-resize {
+  touch-action: none;
+  position: absolute;
+  z-index: 2;
+}
+.window-resize-n {
+  top: 0;
+  left: 8px;
+  right: 8px;
+  height: 6px;
+  cursor: ns-resize;
+}
+.window-resize-s {
+  bottom: 0;
+  left: 8px;
+  right: 8px;
+  height: 6px;
+  cursor: ns-resize;
+}
+.window-resize-e {
+  right: 0;
+  top: 8px;
+  bottom: 8px;
+  width: 6px;
+  cursor: ew-resize;
+}
+.window-resize-w {
+  left: 0;
+  top: 8px;
+  bottom: 8px;
+  width: 6px;
+  cursor: ew-resize;
+}
+.window-resize-se {
+  right: 0;
+  bottom: 0;
+  width: 16px;
+  height: 16px;
+  cursor: nwse-resize;
+}
+.window-resize-nw {
+  left: 0;
+  top: 0;
+  width: 16px;
+  height: 16px;
+  cursor: nwse-resize;
+}
+.window-resize-sw {
+  left: 0;
+  bottom: 0;
+  width: 16px;
+  height: 16px;
+  cursor: nesw-resize;
+}
+.window-resize-ne {
+  right: 0;
+  top: 0;
+  width: 16px;
+  height: 16px;
+  cursor: nesw-resize;
+}
+
+.window-drag-cover {
+  position: fixed;
+  inset: 0;
+  z-index: 20000;
+}
diff --git a/studio/scripts/shared-source.json b/studio/scripts/shared-source.json
index 6ca216bf..853cfdc4 100644
--- a/studio/scripts/shared-source.json
+++ b/studio/scripts/shared-source.json
@@ -557,6 +557,7 @@
     "src/features/variables/FluidBadge.tsx",
     "src/features/variables/VariableCell.tsx",
     "src/features/variables/VariableTable.tsx",
+    "src/features/variables/VariableSheetScroll.tsx",
     "src/features/variables/VariableTypeIcon.tsx",
     "src/features/variables/VariablesPanel.tsx",
     "src/features/variables/VariablesView.tsx",
@@ -582,9 +583,12 @@
     "src/ui/AssetThumb.tsx",
     "src/ui/AutoTextarea.tsx",
     "src/ui/DateField.tsx",
+    "src/ui/DockableWindow.tsx",
     "src/ui/HtmlField.tsx",
     "src/ui/HtmlToolbar.tsx",
+    "src/ui/WindowResizeHandles.tsx",
     "src/ui/dateFieldModel.ts",
+    "src/ui/dockableWindow.css",
     "src/ui/htmlFieldModel.ts",
     "src/ui/contentInputs.css",
     "src/ui/CodeAccess.tsx",
@@ -622,6 +626,10 @@
     "shared/properties/publishReview.ts",
     "electron/project/publishReviewRequest.ts",
     "src/features/publishing/PublishWorkflow.tsx",
+    "src/ui/useWindowRectangle.ts",
+    "src/ui/windowGeometry.ts",
+    "src/ui/windowPreferences.ts",
+    "src/ui/windowResizeHandles.css",
     "shared/page/htmlTags.ts",
     "src/lib/usePanelData.ts",
     "src/ui/PanelReadStatus.tsx",
diff --git a/studio/src/features/variables/VariablesWorkspace.tsx b/studio/src/features/variables/VariablesWorkspace.tsx
index f4c1899e..49ffbb5d 100644
--- a/studio/src/features/variables/VariablesWorkspace.tsx
+++ b/studio/src/features/variables/VariablesWorkspace.tsx
@@ -24,10 +24,10 @@ export function VariablesWorkspace({
     },
     [document],
   );
-  if (props.view.panel !== 'variables') {
-    return null;
-  }
   if (!props.view.variable) {
+    if (props.view.panel !== 'variables') {
+      return null;
+    }
     return (
       <div className="cms-view studio-variables-empty">
         <p>Select a stylesheet to edit its variables.</p>
@@ -38,10 +38,11 @@ export function VariablesWorkspace({
     <VariablesView
       project={{ path: 'studio' }}
       selected={props.view.variable}
+      hidden={props.view.panel !== 'variables'}
+      onDock={() => props.view.setPanel('variables')}
       onClose={() => {
-        if (window.matchMedia('(max-width: 700px)').matches) {
-          props.view.setVariable(undefined);
-        } else {
+        props.view.setVariable(undefined);
+        if (!window.matchMedia('(max-width: 700px)').matches) {
           props.view.setPanel(undefined);
         }
       }}
diff --git a/test/renderer/ui/dockableWindow.test.js b/test/renderer/ui/dockableWindow.test.js
new file mode 100644
index 00000000..f1e40640
--- /dev/null
+++ b/test/renderer/ui/dockableWindow.test.js
@@ -0,0 +1,167 @@
+// Goal: docking preserves the editor while floating tools coexist with the canvas.
+// Method: mount the actual frame and nested popup in jsdom, then exercise pointer,
+// keyboard, viewport and dismissal events, including iframe crossing and unmount cleanup.
+const assert = require('node:assert/strict');
+const { test } = require('node:test');
+const fs = require('node:fs');
+const path = require('node:path');
+const esbuild = require('esbuild');
+const { JSDOM } = require('jsdom');
+const { repoPath, sourceSpecifier } = require('../../helpers/sources');
+
+test('floating tools preserve content while docking and using the canvas', async () => {
+  const directory = repoPath('node_modules/.stacki-test/dockable-window');
+  fs.mkdirSync(directory, { recursive: true });
+  const outfile = path.join(directory, 'window.cjs');
+  await esbuild.build({
+    stdin: {
+      contents:
+        `export {default as Window} from ${sourceSpecifier('src/ui/DockableWindow.tsx')};` +
+        `export {default as Popup} from ${sourceSpecifier('src/ui/Popup.tsx')};`,
+      resolveDir: repoPath('src'),
+      loader: 'tsx',
+    },
+    outfile,
+    bundle: true,
+    format: 'cjs',
+    platform: 'node',
+    external: ['react', 'react-dom', 'react/jsx-runtime'],
+    logLevel: 'silent',
+  });
+  const dom = new JSDOM('<button id="canvas">Canvas</button><div id="root"></div>', {
+    pretendToBeVisual: true,
+    url: 'https://stacki.test/',
+  });
+  for (const key of ['window', 'document', 'HTMLElement', 'Element', 'Node']) {
+    global[key] = key === 'window' ? dom.window : dom.window[key];
+  }
+  global.requestAnimationFrame = window.requestAnimationFrame.bind(window);
+  global.cancelAnimationFrame = window.cancelAnimationFrame.bind(window);
+  window.matchMedia = () => ({ matches: true });
+  const storageDescriptor = Object.getOwnPropertyDescriptor(global, 'localStorage');
+  Object.defineProperty(global, 'localStorage', {
+    configurable: true,
+    value: window.localStorage,
+  });
+  global.IS_REACT_ACT_ENVIRONMENT = true;
+  const React = require('react');
+  const { act } = React;
+  const { createRoot } = require('react-dom/client');
+  const { Window, Popup } = require(outfile);
+  const root = createRoot(document.getElementById('root'));
+  let changeMode;
+  let openChild;
+  function App({ hidden = false }) {
+    const [mode, setMode] = React.useState('floating');
+    const [child, setChild] = React.useState(false);
+    changeMode = setMode;
+    openChild = () => setChild(true);
+    return React.createElement(
+      Window,
+      {
+        mode,
+        onModeChange: setMode,
+        label: 'Variables',
+        hidden,
+        minimumSize: { width: 340, height: 220 },
+        storageKey: 'test.variables',
+        header: React.createElement('span', undefined, 'Styles'),
+      },
+      React.createElement('input', { defaultValue: 'draft' }),
+      React.createElement('div', { className: 'sheet' }),
+      child &&
+        React.createElement(
+          Popup,
+          { mode: 'popover', role: 'dialog', label: 'Color', onClose: () => setChild(false) },
+          React.createElement('input', { defaultValue: '#abcdef' }),
+        ),
+    );
+  }
+  const render = (hidden = false, generation = 0) =>
+    act(async () => root.render(React.createElement(App, { hidden, key: generation })));
+  const press = (element, type, extra = {}) =>
+    act(async () => {
+      element.dispatchEvent(
+        new window.MouseEvent(type, { bubbles: true, cancelable: true, ...extra }),
+      );
+    });
+  const key = (element, value) =>
+    act(async () => {
+      element.dispatchEvent(new window.KeyboardEvent('keydown', { key: value, bubbles: true }));
+    });
+  try {
+    await render();
+    let frame = document.querySelector('.dockable-window');
+    const input = frame.querySelector('input');
+    const sheet = frame.querySelector('.sheet');
+    input.value = 'unsaved';
+    sheet.scrollTop = 140;
+    const geometry = frame.style.cssText;
+    input.focus();
+    await act(async () => changeMode('docked'));
+    assert.equal(frame.dataset.windowMode, 'docked');
+    assert.equal(document.activeElement, input);
+    assert.equal(frame.querySelector('input'), input);
+    assert.equal(input.value, 'unsaved');
+    assert.equal(sheet.scrollTop, 140);
+    await render(true);
+    assert.equal(frame.hidden, true, 'Docked editor follows the active tab');
+    await press(frame.querySelector('[aria-label="Undock window"]'), 'click');
+    assert.equal(frame.hidden, false, 'Floating editor survives tab changes');
+    assert.equal(frame.style.cssText, geometry, 'The floating rectangle survives docking');
+    await press(document.getElementById('canvas'), 'pointerdown');
+    await act(async () =>
+      window.dispatchEvent(
+        new window.MessageEvent('message', {
+          data: { type: 'avb:click-node' },
+        }),
+      ),
+    );
+    await act(async () => window.dispatchEvent(new window.Event('blur')));
+    assert.equal(frame.isConnected, true);
+    assert.equal(frame.hidden, false);
+
+    let header = frame.querySelector('.dockable-window-header');
+    const originalLeft = Number.parseInt(frame.style.left, 10);
+    await key(header, 'ArrowLeft');
+    assert.equal(Number.parseInt(frame.style.left, 10), originalLeft - 10);
+    await press(header, 'pointerdown', { clientX: 300, clientY: 200 });
+    assert.ok(document.querySelector('.window-drag-cover'), 'Drag crosses iframes safely');
+    await press(window, 'pointerup', { clientX: 270, clientY: 200 });
+    assert.equal(document.querySelector('.window-drag-cover') === null, true);
+    assert.equal(Number.parseInt(frame.style.left, 10), originalLeft - 40);
+    const width = Number.parseInt(frame.style.width, 10);
+    await key(frame.querySelector('.window-resize-e'), 'ArrowRight');
+    assert.equal(Number.parseInt(frame.style.width, 10), width + 10);
+    await act(async () => {
+      Object.defineProperty(window, 'innerWidth', { value: 400, configurable: true });
+      window.dispatchEvent(new window.Event('resize'));
+    });
+    assert.ok(
+      Number.parseInt(frame.style.left, 10) + Number.parseInt(frame.style.width, 10) <= 400,
+    );
+    assert.equal(frame.querySelector('input'), input);
+
+    await act(async () => openChild());
+    await key(header, 'Escape');
+    assert.equal(document.querySelector('[aria-label="Color"]') === null, true);
+    assert.ok(frame.isConnected, 'Escape closes only the nested picker');
+    const savedPlacement = frame.style.cssText;
+    await render(false, 1);
+    frame = document.querySelector('.dockable-window');
+    header = frame.querySelector('.dockable-window-header');
+    assert.equal(frame.style.cssText, savedPlacement, 'Closing and reopening restores geometry');
+    await press(header, 'pointerdown');
+    assert.ok(document.querySelector('.window-drag-cover'));
+  } finally {
+    await act(async () => root.unmount());
+    assert.equal(document.querySelector('.window-drag-cover') === null, true);
+    assert.equal(document.body.style.cursor, '');
+    if (storageDescriptor) {
+      Object.defineProperty(global, 'localStorage', storageDescriptor);
+    } else {
+      delete global.localStorage;
+    }
+    dom.window.close();
+  }
+});
diff --git a/test/renderer/ui/windowGeometry.test.js b/test/renderer/ui/windowGeometry.test.js
new file mode 100644
index 00000000..7f04a38d
--- /dev/null
+++ b/test/renderer/ui/windowGeometry.test.js
@@ -0,0 +1,59 @@
+// Goal: floating tools stay reachable at every edge and after viewport changes.
+// Method: exercise all eight resize handles, opposite-edge anchoring, tiny viewports
+// and invalid geometry inputs against the shared pure geometry functions.
+const assert = require('node:assert/strict');
+const { test } = require('node:test');
+const load = require('../../helpers/rendererModule');
+const { WINDOW_EDGES, initialWindowRectangle, fitWindowRectangle, resizeWindowRectangle } = load(
+  'src/ui/windowGeometry.ts',
+);
+
+const viewport = { width: 1440, height: 900 };
+const minimum = { width: 340, height: 220 };
+const start = { x: 300, y: 180, width: 600, height: 420 };
+function inside(rectangle, size, min = minimum) {
+  assert.ok(rectangle.x >= 0);
+  assert.ok(rectangle.y >= 0);
+  assert.ok(rectangle.x + rectangle.width <= size.width);
+  assert.ok(rectangle.y + rectangle.height <= size.height);
+  assert.ok(rectangle.width >= Math.min(min.width, size.width - 16));
+  assert.ok(rectangle.height > 0);
+}
+
+test('every handle enforces bounds and keeps its opposite edge fixed', () => {
+  for (const edge of WINDOW_EDGES) {
+    for (const delta of [-10000, -100, 0, 100, 10000]) {
+      const result = resizeWindowRectangle(start, edge, { x: delta, y: delta }, viewport, minimum);
+      inside(result, viewport);
+      if (edge.includes('w')) {
+        assert.equal(result.x + result.width, start.x + start.width);
+      } else {
+        assert.equal(result.x, start.x);
+      }
+      if (edge.includes('n')) {
+        assert.equal(result.y + result.height, start.y + start.height);
+      } else {
+        assert.equal(result.y, start.y);
+      }
+    }
+  }
+});
+
+test('initial placement and viewport shrink keep the complete window reachable', () => {
+  const centered = initialWindowRectangle(viewport, minimum);
+  assert.ok(Math.abs(centered.x * 2 + centered.width - viewport.width) <= 1);
+  assert.ok(Math.abs(centered.y * 2 + centered.height - viewport.height) <= 1);
+  for (const size of [viewport, { width: 620, height: 400 }, { width: 220, height: 160 }]) {
+    inside(initialWindowRectangle(size, minimum), size);
+    inside(fitWindowRectangle({ ...start, x: 3000, y: -1000 }, size, minimum), size);
+  }
+  assert.throws(() => fitWindowRectangle(start, { width: 0, height: 900 }, minimum), /positive/);
+  assert.throws(
+    () => fitWindowRectangle(start, { width: Infinity, height: 900 }, minimum),
+    /finite/,
+  );
+  assert.throws(
+    () => resizeWindowRectangle(start, 'se', { x: NaN, y: 0 }, viewport, minimum),
+    /finite/,
+  );
+});
diff --git a/test/renderer/ui/windowPreferences.test.js b/test/renderer/ui/windowPreferences.test.js
new file mode 100644
index 00000000..b452a4f6
--- /dev/null
+++ b/test/renderer/ui/windowPreferences.test.js
@@ -0,0 +1,71 @@
+// Goal: saved window geometry is safe to restore and optional storage cannot block editing.
+// Method: round-trip the real storage helpers, reject malformed and oversized inputs,
+// and restore a saved rectangle against smaller viewport and minimum-size bounds.
+const assert = require('node:assert/strict');
+const { test } = require('node:test');
+const load = require('../../helpers/rendererModule');
+const { parseStoredWindowRectangle, readWindowRectangle, storeWindowRectangle } = load(
+  'src/ui/windowPreferences.ts',
+);
+const viewport = { width: 1440, height: 900 };
+const minimum = { width: 560, height: 280 };
+const rectangle = { x: 80, y: 70, width: 720, height: 500 };
+
+test('stored geometry validates every field and rejects malformed boundaries', () => {
+  assert.deepEqual(parseStoredWindowRectangle(JSON.stringify(rectangle)), rectangle);
+  for (const raw of [undefined, 42, '', '{', 'null', '[]', '{}', 'x'.repeat(257)]) {
+    assert.equal(parseStoredWindowRectangle(raw), undefined);
+  }
+  for (const field of ['x', 'y', 'width', 'height']) {
+    for (const value of ['10', -1, 1.5, 100001, undefined]) {
+      assert.equal(
+        parseStoredWindowRectangle(JSON.stringify({ ...rectangle, [field]: value })),
+        undefined,
+      );
+    }
+  }
+  assert.equal(parseStoredWindowRectangle(JSON.stringify({ ...rectangle, width: 0 })), undefined);
+  assert.equal(parseStoredWindowRectangle(JSON.stringify({ ...rectangle, height: 0 })), undefined);
+});
+
+test('restore keeps saved placement, fits smaller screens, and centers when storage fails', () => {
+  const values = new Map();
+  const previous = Object.getOwnPropertyDescriptor(global, 'localStorage');
+  Object.defineProperty(global, 'localStorage', {
+    configurable: true,
+    writable: true,
+    value: {
+      getItem: (key) => values.get(key),
+      setItem: (key, value) => values.set(key, value),
+    },
+  });
+  try {
+    storeWindowRectangle('variables', rectangle);
+    assert.deepEqual(readWindowRectangle('variables', viewport, minimum), rectangle);
+    const fitted = readWindowRectangle('variables', { width: 400, height: 320 }, minimum);
+    assert.ok(fitted.x + fitted.width <= 400);
+    assert.ok(fitted.y + fitted.height <= 320);
+    assert.ok(fitted.x >= 0);
+    assert.ok(fitted.y >= 42);
+    values.set('variables', '{bad');
+    const centered = readWindowRectangle('variables', viewport, minimum);
+    assert.ok(Math.abs(centered.x * 2 + centered.width - viewport.width) <= 1);
+    assert.ok(Math.abs(centered.y * 2 + centered.height - viewport.height) <= 1);
+    global.localStorage = {
+      getItem: () => {
+        throw new Error('Storage unavailable');
+      },
+      setItem: () => {
+        throw new Error('Storage unavailable');
+      },
+    };
+    assert.deepEqual(readWindowRectangle('variables', viewport, minimum), centered);
+    assert.doesNotThrow(() => storeWindowRectangle('variables', rectangle));
+  } finally {
+    if (previous) {
+      Object.defineProperty(global, 'localStorage', previous);
+    } else {
+      delete global.localStorage;
+    }
+  }
+});
diff --git a/test/renderer/variables/variableCore.test.js b/test/renderer/variables/variableCore.test.js
index 2303a07f..bdea7021 100644
--- a/test/renderer/variables/variableCore.test.js
+++ b/test/renderer/variables/variableCore.test.js
@@ -1,9 +1,9 @@
-// Pure row planning preserves column holes and heading boundaries. A controlled
-// frame queue checks scroll echoes, cleanup, and registration/collection limits.
+// Pure row planning preserves column holes and heading boundaries. A browser-like
+// clamping peer checks scroll echoes, cleanup, and registration/collection limits.
 const assert = require('node:assert/strict');
 const load = require('../../helpers/rendererModule');
 const rows = load('src/features/variables/variableRows.ts');
-const { createScrollSync } = load('src/features/variables/variableScroll.ts');
+const { createScrollSync, SCROLL_PEERS_MAX } = load('src/features/variables/variableScroll.ts');
 const cell = (name) => ({
   name,
   file: 'tokens.css',
@@ -69,52 +69,56 @@ assert.throws(
   () => rows.stemOf({ ...block, rows: [{ name: '--x', label: 'too long' }] }),
   /label exceeds name/,
 );
-const frames = new Map();
-let nextFrame = 0;
-global.requestAnimationFrame = (callback) => {
-  const id = ++nextFrame;
-  frames.set(id, callback);
-  return id;
-};
-global.cancelAnimationFrame = (id) => frames.delete(id);
-const flush = () => {
-  const pending = [...frames.values()];
-  frames.clear();
-  pending.forEach((callback) => callback());
-};
 const sync = createScrollSync();
-const firstPeer = { scrollLeft: 0 },
-  secondPeer = { scrollLeft: 0 },
-  otherWidth = { scrollLeft: 0 };
-const unregister = sync.register(2, secondPeer);
-sync.register(2, firstPeer);
-sync.register(3, otherWidth);
-sync.broadcast(2, firstPeer, 80);
+const firstPeer = { scrollLeft: 0 };
+const secondPeer = { scrollLeft: 0 };
+let clampedPosition = 0;
+const narrowPeer = {
+  get scrollLeft() {
+    return clampedPosition;
+  },
+  set scrollLeft(value) {
+    clampedPosition = Math.min(40, value);
+  },
+};
+const unregister = sync.register(secondPeer);
+sync.register(firstPeer);
+sync.register(narrowPeer);
+firstPeer.scrollLeft = 80;
+sync.broadcast(firstPeer, 80);
 assert.equal(secondPeer.scrollLeft, 80);
-assert.equal(otherWidth.scrollLeft, 0);
-sync.broadcast(2, secondPeer, 30);
-assert.equal(firstPeer.scrollLeft, 0, 'echoes are suppressed');
-assert.equal(frames.size, 1, 'one frame bounds echo suppression');
-flush();
+assert.equal(narrowPeer.scrollLeft, 40, 'narrower tables clamp at their own end');
+sync.broadcast(narrowPeer, 40);
+assert.equal(firstPeer.scrollLeft, 80, 'delayed clamped echoes preserve the common position');
+secondPeer.scrollLeft = 30;
+sync.broadcast(secondPeer, 30);
+assert.equal(firstPeer.scrollLeft, 30, 'a real gesture immediately takes control');
 unregister();
-sync.broadcast(2, firstPeer, 100);
-assert.equal(secondPeer.scrollLeft, 80, 'unregistered peers stay untouched');
+firstPeer.scrollLeft = 100;
+sync.broadcast(firstPeer, 100);
+assert.equal(secondPeer.scrollLeft, 30, 'unregistered peers stay untouched');
+sync.fit(20);
+assert.equal(firstPeer.scrollLeft, 20, 'resizing clamps the common position');
+assert.equal(narrowPeer.scrollLeft, 20);
+sync.fit(0);
+assert.equal(firstPeer.scrollLeft, 0, 'removing overflow resets the position');
 sync.dispose();
-assert.equal(frames.size, 0, 'unmount cancels the pending frame');
-const oldCleanup = sync.register(2, secondPeer);
+const oldCleanup = sync.register(secondPeer);
 sync.dispose();
-const current = { scrollLeft: 0 };
-sync.register(2, current);
+sync.register(secondPeer);
 oldCleanup();
-sync.broadcast(2, firstPeer, 50);
-assert.equal(current.scrollLeft, 50, 'old cleanup cannot remove a new registration');
+sync.broadcast(firstPeer, 50);
+assert.equal(secondPeer.scrollLeft, 50, 'old cleanup cannot remove a new registration');
+const latePeer = { scrollLeft: 0 };
+sync.register(latePeer);
+assert.equal(latePeer.scrollLeft, 50, 'new sections inherit the current position');
 sync.dispose();
-assert.throws(() => sync.register(-1, current), /nonnegative/);
-assert.throws(() => sync.register(1.5, current), /integer/);
-assert.throws(() => sync.broadcast(2, current, NaN), /finite/);
-for (let index = 0; index < 10000; index++) {
-  sync.register(1, { scrollLeft: 0 });
+assert.throws(() => sync.fit(-1), /nonnegative/);
+assert.throws(() => sync.fit(Infinity), /finite/);
+assert.throws(() => sync.broadcast(firstPeer, NaN), /finite/);
+for (let index = 0; index < SCROLL_PEERS_MAX; index++) {
+  sync.register({ scrollLeft: 0 });
 }
-assert.throws(() => sync.register(1, { scrollLeft: 0 }), /peer limit exceeded/);
+assert.throws(() => sync.register({ scrollLeft: 0 }), /peer limit exceeded/);
 sync.dispose();
 console.log('variable-core: moves, rename rules, bounds, scroll echoes and cleanup passed');
diff --git a/test/renderer/variables/varsRowHeight.test.js b/test/renderer/variables/varsRowHeight.test.js
index 9529697a..66c64113 100644
--- a/test/renderer/variables/varsRowHeight.test.js
+++ b/test/renderer/variables/varsRowHeight.test.js
@@ -53,11 +53,19 @@ const STYLESHEET = `:root {
 .theme-light {
   --selection-background: var(--dark-900);
   --selection-text: var(--light-100);
+  --button-background: var(--light-100);
+  --button-text: var(--dark-900);
+  --card-background: var(--light-200);
+  --card-text: var(--dark-900);
 }
 
 .theme-dark {
   --selection-background: var(--light-100);
   --selection-text: var(--dark-900);
+  --button-background: var(--dark-900);
+  --button-text: var(--light-100);
+  --card-background: var(--dark-900);
+  --card-text: var(--light-200);
 }
 `;
 
@@ -303,6 +311,44 @@ const STYLESHEET = `:root {
        }
        out.headingDrag = { grabbed: !!grabHead, asked: await js('window.__heading || null') };
 
+       // The shared bar lives outside the vertical scroller. Test actual layout,
+       // native scroll events, and resizing rather than synthetic DOM widths.
+       await js('window.__show(1)');
+       await new Promise((r) => setTimeout(r, 200));
+       await js("Object.assign(document.querySelector('.vars-view').style, " +
+         "{ width: '560px', height: '280px' })");
+       await new Promise((r) => setTimeout(r, 200));
+       const scrollSnapshot = () => js("(() => { const bar = " +
+         "document.querySelector('.vars-horizontal-scroll'); const body = " +
+         "document.querySelector('.vars-body'); const strips = " +
+         "[...body.querySelectorAll('.vars-scroll-rows, .vars-scroll-head')]; " +
+         "return { count: document.querySelectorAll('.vars-horizontal-scroll').length, " +
+         "visible: !bar.parentElement.hidden, left: bar.scrollLeft, " +
+         "maximum: bar.scrollWidth - bar.clientWidth, " +
+         "bottom: bar.getBoundingClientRect().bottom, " +
+         "bodyBottom: body.getBoundingClientRect().bottom, scrollTop: body.scrollTop, " +
+         "nameLeft: body.querySelector('.vars-name').getBoundingClientRect().left, " +
+         "strips: strips.map(s => ({ left: s.scrollLeft, " +
+         "maximum: s.scrollWidth - s.clientWidth })), " +
+         "hiddenBars: [...body.querySelectorAll('.vars-scroll-rows')].every(s => " +
+         "getComputedStyle(s).scrollbarWidth === 'none') } })()");
+       out.scrollBefore = await scrollSnapshot();
+       await js("document.querySelector('.vars-horizontal-scroll').scrollLeft = 10000");
+       await new Promise((r) => setTimeout(r, 100));
+       out.scrollEnd = await scrollSnapshot();
+       await js("document.querySelector('.vars-body').scrollTop = 10000");
+       await new Promise((r) => setTimeout(r, 100));
+       out.scrollVertical = await scrollSnapshot();
+       await js("document.querySelector('.vars-scroll-rows').scrollLeft = 12");
+       await new Promise((r) => setTimeout(r, 100));
+       out.scrollGesture = await scrollSnapshot();
+       await js("document.querySelector('.vars-view').style.width = '950px'");
+       await new Promise((r) => setTimeout(r, 200));
+       out.scrollWide = await scrollSnapshot();
+       await js("document.querySelector('.vars-view').style.width = '560px'");
+       await new Promise((r) => setTimeout(r, 200));
+       out.scrollNarrow = await scrollSnapshot();
+
        console.log(JSON.stringify(out));
        app.quit();
      });`,
@@ -318,6 +364,48 @@ const STYLESHEET = `:root {
     // The run reports through JSON, which spells a value it never found as null;
     // a key it never wrote reads as undefined. Either is "not there".
     const present = (value) => value !== null && value !== undefined;
+    const start = out.scrollBefore;
+    const end = out.scrollEnd;
+    check(
+      'one common bar replaces the section bars',
+      start?.count === 1 && start.visible && start.hiddenBars,
+      JSON.stringify(start),
+    );
+    check(
+      'the bar covers the full horizontal range',
+      end?.maximum > 0 &&
+        end.left === end.maximum &&
+        end.strips.length >= 4 &&
+        end.strips.every((strip) => Math.abs(strip.left - Math.min(strip.maximum, end.left)) <= 1),
+      JSON.stringify(end),
+    );
+    check(
+      'the name column stays fixed',
+      start?.nameLeft === end?.nameLeft,
+      JSON.stringify([start?.nameLeft, end?.nameLeft]),
+    );
+    check(
+      'the bar stays below the body while it scrolls vertically',
+      out.scrollVertical?.scrollTop > 0 &&
+        out.scrollVertical.bottom === start?.bottom &&
+        out.scrollVertical.bodyBottom <= out.scrollVertical.bottom,
+      JSON.stringify(out.scrollVertical),
+    );
+    check(
+      'native scrolling in a section updates the shared bar',
+      out.scrollGesture?.left === 12,
+      JSON.stringify(out.scrollGesture),
+    );
+    check(
+      'the bar disappears when all columns fit',
+      out.scrollWide?.visible === false && out.scrollWide.left === 0,
+      JSON.stringify(out.scrollWide),
+    );
+    check(
+      'resizing narrow restores the bar',
+      out.scrollNarrow?.visible === true && out.scrollNarrow.maximum > 0,
+      JSON.stringify(out.scrollNarrow),
+    );
     check('the sheet renders its rows', out.before?.heads > 0, JSON.stringify(out.before));
     check(
       'a name opens a field when clicked',
@@ -348,8 +436,8 @@ const STYLESHEET = `:root {
       JSON.stringify(drift),
     );
     // The names stack carries one line the values stack does not — the "New
-    // variable" row, which has nothing to show on the value side (the scrollbar
-    // sits on that line instead). Anything beyond that is a stack out of step.
+    // variable" row, which has nothing to show on the value side.
+    // Anything beyond that is a stack out of step.
     check(
       'and neither stack has a line the other lacks',
       (out.stacks || []).every((stack) => stack.extraIsAddRow),
diff --git a/test/renderer/variables/varsView.test.js b/test/renderer/variables/varsView.test.js
index 37963572..0d373fc7 100644
--- a/test/renderer/variables/varsView.test.js
+++ b/test/renderer/variables/varsView.test.js
@@ -1012,9 +1012,9 @@ const STYLESHEET = `/* =========================================================
     check('every group ends with a way to add one', !!addRow, swatchTable.innerHTML.slice(-200));
     check('and it reads as a row', addRow.classList.contains('vars-row'));
     check(
-      'the value side leaves that line to the scrollbar',
+      'the value side needs no add-variable row',
       !swatchTable.querySelector('.vars-scroll .vars-add'),
-      'a counterpart row there pushes the scrollbar a line below the button',
+      'adding a variable is a label-side action',
     );
     check(
       'it starts where the names do, not in the middle of the column',