feat(workspaces): content-driven canvas while dragging — scrollbar grows/shrinks with the gesture

Revert the fixed append-canvas reservation (9ede1f0): pre-reserving the 3
spaces at drag start made the view jump right and created far too much free
canvas. The grid is back to hugging its content (width: max-content / auto),
so the preview extends the canvas as the tile reaches toward the edge and it
shrinks back when the gesture ends — the scrollbar moves with the drag, as
intended. The drag-target clamp (dragAppendLimit, +3 past the committed
edge) still bounds how far the preview can extend, so the "endless growth"
problem stays solved without reserving anything up front.

Dots restore the one-pitch padding extension for the append slot; the
scroll-measure effect still re-runs on drag start/end (the canvas shrinks
back on cancel). Test reverted to the content-driven assertions.

Verification: svelte-check 0 errors/0 warnings; vitest 1693/1693; biome
clean on touched files; build ok.

2 files changed, 14 insertions, 45 deletions

diff --git a/src/features/workspaces/ui/HomeTileGrid.svelte b/src/features/workspaces/ui/HomeTileGrid.svelte
index ccbf96b..d259aea 100644
--- a/src/features/workspaces/ui/HomeTileGrid.svelte
+++ b/src/features/workspaces/ui/HomeTileGrid.svelte
@@ -318,7 +318,7 @@
 
   $effect(() => {
     // Re-measure when the geometry flips, the content changes, or a drag
-    // starts/ends (the reserved canvas appears then disappears).
+    // starts/ends (the canvas grows with the preview and shrinks back after).
     void geometry.mode;
     void placements.length;
     void dragging;
@@ -344,54 +344,33 @@
   // ── Grid + tile styles (the geometry decides; no breakpoint classes) ──────
   const dragging = $derived(phase.kind === "dragging");
 
-  /**
-   * The canvas tracks reserved while dragging, on the growth axis: the append
-   * limit (committed content edge + 3) PLUS the dragged tile's span room — the
-   * tile may be anchored anywhere in the 3 spaces while its body stays inside
-   * the reserved canvas. Computed from the COMMITTED layout at drag start, so
-   * it is CONSTANT for the whole drag — the scroller never resizes mid-drag.
-   */
-  const reservedExtent = $derived(
-    dragging && draggedPlacement
-      ? dragAppendLimit(placements, geometry) +
-          (geometry.mode === "wide" ? draggedPlacement.colSpan : draggedPlacement.rowSpan) -
-          1
-      : 0,
-  );
-
   const gridStyle = $derived.by(() => {
     const wide = geometry.mode === "wide";
-    // The grid's own size on the growth axis: `max-content` (wide) / auto
-    // (tall) when idle — the canvas hugs the committed content. While DRAGGING
-    // it becomes a FIXED reservation (the 3 append spaces + span room), so the
-    // spaces "show up" at drag start and the scrollbar size never changes
-    // until the drag ends (then the unused reservation disappears).
-    const canvas = dragging
-      ? wide
-        ? `width: ${reservedExtent * pitchX - geometry.unit.gap}px;`
-        : `height: ${reservedExtent * pitchY - geometry.unit.gap}px;`
-      : wide
-        ? "width: max-content;"
-        : "height: auto;";
+    // Content-driven canvas: the grid hugs its content (max-content / auto),
+    // so the scrollbar GROWS as the preview reaches right/down and SHRINKS when
+    // the gesture ends — the drag sees the scrollbar move as it should. The
+    // drop-target clamp (`cellAt` → dragAppendLimit) bounds how far the preview
+    // can extend, so the canvas never grows past the committed edge + 3.
     const base =
       (wide
         ? `grid-template-rows: repeat(${geometry.flowRows}, ${geometry.unit.height}px);` +
-          ` grid-auto-flow: column; grid-auto-columns: ${geometry.unit.width}px;`
+          ` grid-auto-flow: column; grid-auto-columns: ${geometry.unit.width}px;` +
+          ` gap: ${geometry.unit.gap}px; width: max-content;`
         : `grid-template-columns: repeat(${geometry.flowCols}, minmax(0, 1fr));` +
-          ` grid-auto-flow: row; grid-auto-rows: ${geometry.unit.height}px;`) +
-      ` gap: ${geometry.unit.gap}px; ${canvas}`;
+          ` grid-auto-flow: row; grid-auto-rows: ${geometry.unit.height}px;` +
+          ` gap: ${geometry.unit.gap}px;`);
     if (!dragging) return base;
     // The drop-target dots: one faint dot at each unit cell's CENTER, painted
-    // as a background whose tile is the cell pitch. The reserved canvas IS the
-    // append area, so the 3 spaces (and the dragged tile's span room) get dots
-    // with no extra padding.
+    // as a background whose tile is the cell pitch. One extra pitch of padding
+    // past the content end gives the append-slot a dot too.
     const dotSize = wide ? `${pitchX}px` : `calc(100% / ${geometry.flowCols})`;
     const dotX = wide ? geometry.unit.width / 2 : 0;
     const dot =
       ` background-image: radial-gradient(circle 2.5px,` +
       ` color-mix(in oklab, var(--color-base-content) 22%, transparent) 98%, transparent 100%);` +
       ` background-size: ${dotSize} ${pitchY}px;` +
-      ` background-position: ${dotX}px ${geometry.unit.height / 2}px;`;
+      ` background-position: ${dotX}px ${geometry.unit.height / 2}px;` +
+      (wide ? ` padding-right: ${pitchX}px;` : ` padding-bottom: ${pitchY}px;`);
     return base + dot;
   });
 
diff --git a/src/features/workspaces/ui/HomeTileGrid.test.ts b/src/features/workspaces/ui/HomeTileGrid.test.ts
index 9f163fd..d70c673 100644
--- a/src/features/workspaces/ui/HomeTileGrid.test.ts
+++ b/src/features/workspaces/ui/HomeTileGrid.test.ts
@@ -105,18 +105,10 @@ describe("HomeTileGrid", () => {
     });
 
     const wrapper = screen.getByRole("button", { name: "Open workspace Workspace A" });
-    const grid = container.querySelector(".grid");
     // The cell math resolves against the grid element's rect (jsdom: 0s).
     fireEvent.pointerDown(wrapper, { button: 0, clientX: 10, clientY: 10, pointerType: "mouse" });
     fireEvent.pointerMove(wrapper, { clientX: 80, clientY: 40 });
 
-    // While dragging the canvas is a FIXED reservation (content edge + 3, plus
-    // the dragged tile's span room) — never max-content, so the scroller can't
-    // resize mid-drag.
-    const pitchX = WIDE.unit.width + WIDE.unit.gap;
-    expect(grid?.getAttribute("style")).toContain(`width: ${5 * pitchX - WIDE.unit.gap}px`);
-    expect(grid?.getAttribute("style")).not.toContain("width: max-content");
-
     // The dashed landing ghost appears…
     const ghost = container.querySelector("[aria-hidden='true'].border-dashed");
     expect(ghost).not.toBeNull();
@@ -127,8 +119,6 @@ describe("HomeTileGrid", () => {
     fireEvent.pointerUp(wrapper);
     // The ghost + follow disappear on drop…
     expect(container.querySelector("[aria-hidden='true'].border-dashed")).toBeNull();
-    // …and the reservation is gone too (the canvas hugs the committed content).
-    expect(grid?.getAttribute("style")).toContain("width: max-content");
     // …and the drop committed a PLACE at the hovered cell (a lands where it
     // already was — the pointer hovered its own slot; a no-move drop).
     expect(props.onPlace).toHaveBeenCalledWith("a", { col: 1, row: 1 });