From 1d98cbf78137a5a8c7e83706a559d680a67d91d2 Mon Sep 17 00:00:00 2001
From: MelmacAlpha <trakte_cassis_23@icloud.com>
Date: Mon, 26 Oct 2026 03:15:25 +0100
Subject: [PATCH 1/3] feat: edit variables in a dockable floating window

Keep the preview visible while changing variables, with a header toggle back to
the canvas-filling editor. Preserve the editor and floating rectangle across dock
changes and sidebar navigation so drafts, focus and scroll position survive.

Share bounded geometry, pointer handling, iframe drag shielding and keyboard
resize controls with the code editor. The reusable frame leaves the dock location
to its caller so future floating sidebars can use it without coupling to variables.

Include the shared UI sources in Studio and cover docking, nested popup dismissal,
viewport bounds and pointer cleanup with regression tests.
---
 src/app/shell/AppPanes.tsx                    |   4 +-
 src/app/styles.css                            |  77 ++-------
 src/features/code/CodeWindow.tsx              | 102 ++----------
 src/features/variables/VariablesView.tsx      | 127 ++++++++-------
 src/ui/DockableWindow.tsx                     |  74 +++++++++
 src/ui/WindowResizeHandles.tsx                |  47 ++++++
 src/ui/dockableWindow.css                     |  47 ++++++
 src/ui/useWindowRectangle.ts                  |  95 +++++++++++
 src/ui/windowGeometry.ts                      |  88 ++++++++++
 src/ui/windowResizeHandles.css                |  67 ++++++++
 studio/scripts/shared-source.json             |   8 +-
 .../features/variables/VariablesWorkspace.tsx |  13 +-
 test/renderer/ui/dockableWindow.test.js       | 150 ++++++++++++++++++
 test/renderer/ui/windowGeometry.test.js       |  56 +++++++
 14 files changed, 735 insertions(+), 220 deletions(-)
 create mode 100644 src/ui/DockableWindow.tsx
 create mode 100644 src/ui/WindowResizeHandles.tsx
 create mode 100644 src/ui/dockableWindow.css
 create mode 100644 src/ui/useWindowRectangle.ts
 create mode 100644 src/ui/windowGeometry.ts
 create mode 100644 src/ui/windowResizeHandles.css
 create mode 100644 test/renderer/ui/dockableWindow.test.js
 create mode 100644 test/renderer/ui/windowGeometry.test.js

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 7e5b4872..716a2ade 100644
--- a/src/app/styles.css
+++ b/src/app/styles.css
@@ -1964,6 +1964,7 @@ html[data-platform='win32'] .titlebar {
   overflow: hidden;
 }
 .code-window-header {
+  touch-action: none;
   display: flex;
   align-items: center;
   gap: 8px;
@@ -1995,67 +1996,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;
@@ -6597,9 +6537,6 @@ 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-body {
@@ -6687,7 +6624,19 @@ body > .embed-editor_provenance {
 .vars-body > .props-empty {
   padding-left: var(--vars-inset);
 }
+.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-search {
+  min-width: 80px;
+  flex-shrink: 1;
   height: 24px;
   width: 180px;
   margin-left: auto;
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/VariablesView.tsx b/src/features/variables/VariablesView.tsx
index f83684e8..248ab8f5 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,79 @@ 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>
-
-        <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>
+    <DockableWindow
+      mode={mode}
+      onModeChange={onModeChange}
+      label="Variables"
+      className="vars-view"
+      hidden={hidden ?? false}
+      minimumSize={{ width: 560, height: 280 }}
+      header={<VariablesWindowHeader state={state} />}
+    >
+      <div className="cms-detail-body vars-body">
+        <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}
+        />
       </div>
-    </div>
+    </DockableWindow>
+  );
+}
+
+function VariablesWindowHeader({ state }: { readonly state: ReturnType<typeof useVariablesView> }) {
+  return (
+    <>
+      <button className="ghost cms-back" title="Close" onClick={state.onClose}>
+        <CloseIcon size={13} />
+      </button>
+      <span className="cms-detail-title">{state.group?.label}</span>
+      <span className={`cms-saved ${state.saved ? 'on' : ''}`}>
+        <CheckIcon size={11} /> Saved
+      </span>
+      <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">{state.file?.rel}</span>
+    </>
   );
 }
 
diff --git a/src/ui/DockableWindow.tsx b/src/ui/DockableWindow.tsx
new file mode 100644
index 00000000..2c90ce87
--- /dev/null
+++ b/src/ui/DockableWindow.tsx
@@ -0,0 +1,74 @@
+import { useRef } from 'react';
+import type { ReactNode } from 'react';
+import { ExternalIcon, MaximizeIcon } 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 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);
+  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} /> : <ExternalIcon size={14} />}
+          </button>
+        </div>
+        <div className="dockable-window-body">{props.children}</div>
+        {floating && <WindowResizeHandles windowState={windowState} />}
+      </PopupScopeContext.Provider>
+    </div>
+  );
+}
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..06ac8759
--- /dev/null
+++ b/src/ui/useWindowRectangle.ts
@@ -0,0 +1,95 @@
+import { useEffect, useState } from 'react';
+import type { KeyboardEvent, PointerEvent } from 'react';
+import { usePointerDrag } from './usePointerDrag';
+import {
+  fitWindowRectangle,
+  initialWindowRectangle,
+  resizeWindowRectangle,
+  type WindowEdge,
+  type WindowSize,
+} from './windowGeometry';
+
+// Tool windows and the code editor share geometry, without knowing their dock location.
+export function useWindowRectangle(minimum: WindowSize) {
+  const [rectangle, setRectangle] = useState(() => initialWindowRectangle(viewportSize(), minimum));
+  const [dragging, setDragging] = useState(false);
+  const startPointer = usePointerDrag();
+  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]);
+  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 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..ebe520b3
--- /dev/null
+++ b/src/ui/windowGeometry.ts
@@ -0,0 +1,88 @@
+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)));
+  return fitWindowRectangle(
+    {
+      x: viewport.width - width - 80,
+      y: 96,
+      width,
+      height: Math.max(minimum.height, Math.round(viewport.height * 0.78)),
+    },
+    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/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 c0684730..7ecb7eff 100644
--- a/studio/scripts/shared-source.json
+++ b/studio/scripts/shared-source.json
@@ -582,9 +582,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",
@@ -621,7 +624,10 @@
     "src/ui/usePointerDrag.ts",
     "shared/properties/publishReview.ts",
     "electron/project/publishReviewRequest.ts",
-    "src/features/publishing/PublishWorkflow.tsx"
+    "src/features/publishing/PublishWorkflow.tsx",
+    "src/ui/useWindowRectangle.ts",
+    "src/ui/windowGeometry.ts",
+    "src/ui/windowResizeHandles.css"
   ],
   "adapters": [
     "electron/content/contentConfig.ts",
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..15b179f4
--- /dev/null
+++ b/test/renderer/ui/dockableWindow.test.js
@@ -0,0 +1,150 @@
+// 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,
+  });
+  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 });
+  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 },
+        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) =>
+    act(async () => root.render(React.createElement(App, { hidden })));
+  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();
+    const 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);
+
+    const 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');
+    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, '');
+    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..3c3e8ebf
--- /dev/null
+++ b/test/renderer/ui/windowGeometry.test.js
@@ -0,0 +1,56 @@
+// 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', () => {
+  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/,
+  );
+});

From 857814fc67393b1a444bcc1ccfb3a589260ea877 Mon Sep 17 00:00:00 2001
From: MelmacAlpha <trakte_cassis_23@icloud.com>
Date: Mon, 26 Oct 2026 14:19:00 +0100
Subject: [PATCH 2/3] fix: align variable window controls and restore its
 geometry

Center the search independently of the title and path, place the path beside matching expand and restore icons, and center new floating windows. Save validated variable-window geometry between openings so editing resumes at the chosen position and size, while fitting changed viewports and tolerating unavailable storage.
---
 src/app/styles.css                         | 21 +++++-
 src/features/variables/VariablesView.tsx   | 23 ++++---
 src/ui/DockableWindow.tsx                  |  7 +-
 src/ui/Icons.tsx                           |  6 ++
 src/ui/useWindowRectangle.ts               | 43 +++++++++---
 src/ui/windowGeometry.ts                   |  7 +-
 src/ui/windowPreferences.ts                | 79 ++++++++++++++++++++++
 studio/scripts/shared-source.json          |  1 +
 test/renderer/ui/dockableWindow.test.js    | 25 +++++--
 test/renderer/ui/windowGeometry.test.js    |  3 +
 test/renderer/ui/windowPreferences.test.js | 71 +++++++++++++++++++
 11 files changed, 255 insertions(+), 31 deletions(-)
 create mode 100644 src/ui/windowPreferences.ts
 create mode 100644 test/renderer/ui/windowPreferences.test.js

diff --git a/src/app/styles.css b/src/app/styles.css
index 716a2ade..66a509a7 100644
--- a/src/app/styles.css
+++ b/src/app/styles.css
@@ -6624,6 +6624,16 @@ 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;
@@ -6634,12 +6644,19 @@ body > .embed-editor_provenance {
 .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;
-  flex-shrink: 1;
   height: 24px;
   width: 180px;
-  margin-left: auto;
   padding: 0 8px;
   font-size: 11px;
 }
diff --git a/src/features/variables/VariablesView.tsx b/src/features/variables/VariablesView.tsx
index 248ab8f5..cf6d2d13 100644
--- a/src/features/variables/VariablesView.tsx
+++ b/src/features/variables/VariablesView.tsx
@@ -87,6 +87,7 @@ function VariablesViewBody({
       className="vars-view"
       hidden={hidden ?? false}
       minimumSize={{ width: 560, height: 280 }}
+      storageKey="stacki.window.variables"
       header={<VariablesWindowHeader state={state} />}
     >
       <div className="cms-detail-body vars-body">
@@ -111,13 +112,17 @@ function VariablesViewBody({
 function VariablesWindowHeader({ state }: { readonly state: ReturnType<typeof useVariablesView> }) {
   return (
     <>
-      <button className="ghost cms-back" title="Close" onClick={state.onClose}>
-        <CloseIcon size={13} />
-      </button>
-      <span className="cms-detail-title">{state.group?.label}</span>
-      <span className={`cms-saved ${state.saved ? 'on' : ''}`}>
-        <CheckIcon size={11} /> Saved
-      </span>
+      <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>
       <input
         maxLength={LIMITS.attrCharsMax}
         className="vars-search"
@@ -126,7 +131,9 @@ function VariablesWindowHeader({ state }: { readonly state: ReturnType<typeof us
         spellCheck={false}
         onChange={(event) => state.setQuery(event.target.value)}
       />
-      <span className="cms-detail-path">{state.file?.rel}</span>
+      <span className="cms-detail-path" title={state.file?.rel}>
+        {state.file?.rel}
+      </span>
     </>
   );
 }
diff --git a/src/ui/DockableWindow.tsx b/src/ui/DockableWindow.tsx
index 2c90ce87..688dfc34 100644
--- a/src/ui/DockableWindow.tsx
+++ b/src/ui/DockableWindow.tsx
@@ -1,6 +1,6 @@
 import { useRef } from 'react';
 import type { ReactNode } from 'react';
-import { ExternalIcon, MaximizeIcon } from './Icons';
+import { MaximizeIcon, MinimizeIcon } from './Icons';
 import { PopupScopeContext, usePopupScope } from './popupScope';
 import { useWindowRectangle } from './useWindowRectangle';
 import { WindowResizeHandles } from './WindowResizeHandles';
@@ -16,6 +16,7 @@ interface DockableWindowProps {
   readonly header: ReactNode;
   readonly children: ReactNode;
   readonly minimumSize: WindowSize;
+  readonly storageKey?: string;
   readonly hidden?: boolean;
   readonly className?: string;
 }
@@ -23,7 +24,7 @@ interface DockableWindowProps {
 // 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);
+  const windowState = useWindowRectangle(props.minimumSize, props.storageKey);
   const { rectangle } = windowState;
   const floating = props.mode === 'floating';
   const surface = useRef<HTMLDivElement>(null);
@@ -63,7 +64,7 @@ export default function DockableWindow(props: DockableWindowProps) {
             aria-label={action}
             onClick={() => props.onModeChange(floating ? 'docked' : 'floating')}
           >
-            {floating ? <MaximizeIcon size={14} /> : <ExternalIcon size={14} />}
+            {floating ? <MaximizeIcon size={14} /> : <MinimizeIcon size={14} />}
           </button>
         </div>
         <div className="dockable-window-body">{props.children}</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/useWindowRectangle.ts b/src/ui/useWindowRectangle.ts
index 06ac8759..46178db6 100644
--- a/src/ui/useWindowRectangle.ts
+++ b/src/ui/useWindowRectangle.ts
@@ -3,25 +3,17 @@ import type { KeyboardEvent, PointerEvent } from 'react';
 import { usePointerDrag } from './usePointerDrag';
 import {
   fitWindowRectangle,
-  initialWindowRectangle,
   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) {
-  const [rectangle, setRectangle] = useState(() => initialWindowRectangle(viewportSize(), minimum));
+export function useWindowRectangle(minimum: WindowSize, storageKey?: string) {
   const [dragging, setDragging] = useState(false);
+  const [rectangle, setRectangle] = useWindowPlacement(minimum, { storageKey, dragging });
   const startPointer = usePointerDrag();
-  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]);
   const start = (event: PointerEvent<HTMLDivElement>, edge?: WindowEdge): void => {
     if (event.button !== 0 || event.isPrimary === false) {
       return;
@@ -74,6 +66,35 @@ export function useWindowRectangle(minimum: WindowSize) {
   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 };
 }
diff --git a/src/ui/windowGeometry.ts b/src/ui/windowGeometry.ts
index ebe520b3..76307a96 100644
--- a/src/ui/windowGeometry.ts
+++ b/src/ui/windowGeometry.ts
@@ -15,12 +15,13 @@ 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: viewport.width - width - 80,
-      y: 96,
+      x: Math.round((viewport.width - width) / 2),
+      y: Math.round((viewport.height - height) / 2),
       width,
-      height: Math.max(minimum.height, Math.round(viewport.height * 0.78)),
+      height,
     },
     viewport,
     minimum,
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/studio/scripts/shared-source.json b/studio/scripts/shared-source.json
index 7ecb7eff..04527bab 100644
--- a/studio/scripts/shared-source.json
+++ b/studio/scripts/shared-source.json
@@ -627,6 +627,7 @@
     "src/features/publishing/PublishWorkflow.tsx",
     "src/ui/useWindowRectangle.ts",
     "src/ui/windowGeometry.ts",
+    "src/ui/windowPreferences.ts",
     "src/ui/windowResizeHandles.css"
   ],
   "adapters": [
diff --git a/test/renderer/ui/dockableWindow.test.js b/test/renderer/ui/dockableWindow.test.js
index 15b179f4..f1e40640 100644
--- a/test/renderer/ui/dockableWindow.test.js
+++ b/test/renderer/ui/dockableWindow.test.js
@@ -30,6 +30,7 @@ test('floating tools preserve content while docking and using the canvas', async
   });
   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];
@@ -37,6 +38,11 @@ test('floating tools preserve content while docking and using the canvas', async
   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;
@@ -58,6 +64,7 @@ test('floating tools preserve content while docking and using the canvas', async
         label: 'Variables',
         hidden,
         minimumSize: { width: 340, height: 220 },
+        storageKey: 'test.variables',
         header: React.createElement('span', undefined, 'Styles'),
       },
       React.createElement('input', { defaultValue: 'draft' }),
@@ -70,8 +77,8 @@ test('floating tools preserve content while docking and using the canvas', async
         ),
     );
   }
-  const render = (hidden = false) =>
-    act(async () => root.render(React.createElement(App, { hidden })));
+  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(
@@ -84,7 +91,7 @@ test('floating tools preserve content while docking and using the canvas', async
     });
   try {
     await render();
-    const frame = document.querySelector('.dockable-window');
+    let frame = document.querySelector('.dockable-window');
     const input = frame.querySelector('input');
     const sheet = frame.querySelector('.sheet');
     input.value = 'unsaved';
@@ -114,7 +121,7 @@ test('floating tools preserve content while docking and using the canvas', async
     assert.equal(frame.isConnected, true);
     assert.equal(frame.hidden, false);
 
-    const header = frame.querySelector('.dockable-window-header');
+    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);
@@ -139,12 +146,22 @@ test('floating tools preserve content while docking and using the canvas', async
     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
index 3c3e8ebf..7f04a38d 100644
--- a/test/renderer/ui/windowGeometry.test.js
+++ b/test/renderer/ui/windowGeometry.test.js
@@ -40,6 +40,9 @@ test('every handle enforces bounds and keeps its opposite edge fixed', () => {
 });
 
 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);
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;
+    }
+  }
+});

From b5deab42139fa8af55e752356a31ebd7cd6418d5 Mon Sep 17 00:00:00 2001
From: MelmacAlpha <trakte_cassis_23@icloud.com>
Date: Mon, 26 Oct 2026 15:46:40 +0100
Subject: [PATCH 3/3] fix: share one bottom scrollbar across variable tables

Keep horizontal navigation reachable while vertically scrolling the sheet. Synchronize value strips and headings, preserve native trackpad scrolling, and ignore clamped scroll echoes from narrower tables. Verify footer placement and resize behavior in Electron.
---
 src/app/styles.css                            |  47 ++++--
 .../variables/VariableSheetScroll.tsx         |  93 ++++++++++++
 src/features/variables/VariableTable.tsx      | 139 +++++++++---------
 src/features/variables/VariablesView.tsx      |  28 ++--
 src/features/variables/variableScroll.ts      |  91 ++++++------
 studio/scripts/shared-source.json             |   1 +
 test/renderer/variables/variableCore.test.js  |  88 +++++------
 test/renderer/variables/varsRowHeight.test.js |  92 +++++++++++-
 test/renderer/variables/varsView.test.js      |   4 +-
 9 files changed, 389 insertions(+), 194 deletions(-)
 create mode 100644 src/features/variables/VariableSheetScroll.tsx

diff --git a/src/app/styles.css b/src/app/styles.css
index 66a509a7..bc37264d 100644
--- a/src/app/styles.css
+++ b/src/app/styles.css
@@ -6539,6 +6539,17 @@ body > .embed-editor_provenance {
    family of names describes (h1…h6) — see electron/project/cssVars.ts. */
 /* 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
@@ -6547,15 +6558,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. */
@@ -6565,16 +6586,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;
 }
@@ -6582,7 +6599,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;
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 cf6d2d13..f30d842a 100644
--- a/src/features/variables/VariablesView.tsx
+++ b/src/features/variables/VariablesView.tsx
@@ -90,21 +90,19 @@ function VariablesViewBody({
       storageKey="stacki.window.variables"
       header={<VariablesWindowHeader state={state} />}
     >
-      <div className="cms-detail-body vars-body">
-        <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}
-        />
-      </div>
+      <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>
   );
 }
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/studio/scripts/shared-source.json b/studio/scripts/shared-source.json
index 04527bab..ba56f39f 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",
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',