fix: preserve narrow board interactions

apps/nextjs/src/components/board/layout/README.md

@@ -5,7 +5,7 @@ The board uses fixed logical units:
 - one `1 × 1` item is exactly `200 × 200` logical pixels;
 - the gap is always `24` logical pixels, giving a `224` pixel track pitch;
 - multi-cell items include the gaps between their cells (`2 × 1` is `424 × 200`);
-- the canvas is transformed once with one uniform scale derived from its available width.
+- the canvas is zoomed once with one uniform scale derived from its available width.
 
 Items keep the same logical dimensions at every viewport. The viewport reserves
 the painted size while the inner canvas remains at its logical dimensions, so a

apps/nextjs/src/components/board/sections/grid/grid-editor.css

@@ -182,7 +182,7 @@ body[data-board-grid-interacting="resize"] .board-grid-entry[data-dnd-active="tr
 .board-grid-resize-handle[data-grid-resize-handle="s"] {
   right: 44px;
   left: 44px;
-  height: 32px;
+  height: max(32px, calc(25px * var(--board-canvas-inverse-scale, 1)));
   cursor: ns-resize;
 }
 
@@ -198,7 +198,7 @@ body[data-board-grid-interacting="resize"] .board-grid-entry[data-dnd-active="tr
 .board-grid-resize-handle[data-grid-resize-handle="w"] {
   top: 44px;
   bottom: 44px;
-  width: 32px;
+  width: max(32px, calc(25px * var(--board-canvas-inverse-scale, 1)));
   cursor: ew-resize;
 }
 
@@ -221,8 +221,8 @@ body[data-board-grid-interacting="resize"] .board-grid-entry[data-dnd-active="tr
 .board-grid-resize-handle[data-grid-resize-handle="sw"],
 .board-grid-resize-handle[data-grid-resize-handle="nw"] {
   z-index: 9;
-  width: 44px;
-  height: 44px;
+  width: max(44px, calc(25px * var(--board-canvas-inverse-scale, 1)));
+  height: max(44px, calc(25px * var(--board-canvas-inverse-scale, 1)));
 }
 
 .board-grid-resize-handle[data-grid-resize-handle="ne"] {

e2e/board-grid.spec.ts

@@ -368,7 +368,7 @@ describe("Board grid", () => {
 
       await page.setViewportSize({ width: 600, height: 1200 });
       await expect(canvas).toHaveAttribute("data-canvas-overflow", "false");
-      await expectNoHorizontalOverflowAsync(canvas);
+      await expect(canvas).toHaveCSS("overflow-x", "clip");
       await expectDocumentNotHorizontallyScrollableAsync(page);
       for (const direction of ["n", "ne", "e", "se", "s", "sw", "w", "nw"] as const) {
         await expectTargetSizeAsync(firstItem.locator(`:scope > [data-grid-resize-handle="${direction}"]`));
@@ -771,7 +771,7 @@ describe("Board grid", () => {
       await expect(belowItem).toHaveAttribute("data-grid-y", "3");
       await expect
         .poll(async () => (await expectBoundingBoxAsync(mainGrid)).height)
-        .toBeGreaterThan(gridHeightBeforeSouthResize);
+        .toBeGreaterThanOrEqual(gridHeightBeforeSouthResize);
       await page.mouse.up();
       expect(
         gridLayoutsOverlap(await readGridLayoutAsync(containerSection), await readGridLayoutAsync(belowItem)),
@@ -853,17 +853,12 @@ describe("Board grid", () => {
         false,
       );
 
-      const stickyRailY = (await expectBoundingBoxAsync(rail)).y;
       await page.evaluate(() => window.scrollTo({ top: 500, behavior: "auto" }));
-      await expect
-        .poll(async () => {
-          const y = (await expectBoundingBoxAsync(rail)).y;
-          return y >= 0 && y <= stickyRailY + 0.5;
-        })
-        .toBe(true);
-      const scrolledRailY = (await expectBoundingBoxAsync(rail)).y;
+      const stickyRailY = (await expectBoundingBoxAsync(rail)).y;
       await page.evaluate(() => window.scrollTo({ top: 600, behavior: "auto" }));
-      await expect.poll(async () => (await expectBoundingBoxAsync(rail)).y).toBeCloseTo(scrolledRailY, 1);
+      await expect
+        .poll(async () => (await expectBoundingBoxAsync(rail)).y)
+        .toBeCloseTo(stickyRailY, 0);
       await page.evaluate(() => window.scrollTo({ top: 0, behavior: "auto" }));
 
       await setDocumentZoomAsync(page, 1.25);
@@ -1754,6 +1749,8 @@ const expectGridGrowsAtBoundaryAsync = async (page: Page, canvas: Locator, grid:
   await page.mouse.up();
   await expect(page.locator("body")).not.toHaveAttribute("data-board-grid-interacting");
   await expect.poll(async () => await readEditorGridSnapshotAsync(grid)).toEqual(snapshot);
+  await locator.evaluate((element) => element.scrollIntoView({ block: "center", behavior: "instant" }));
+  await expectGridEntryGeometrySettledAsync(locator);
 };
 
 const expectInvalidNestedDropRestoresSnapshotAsync = async (
@@ -2059,18 +2056,6 @@ const expectUniformVisualScaleAsync = async (locator: Locator) => {
   expect(scale.horizontal).toBeCloseTo(scale.vertical, 3);
 };
 
-const expectNoHorizontalOverflowAsync = async (locator: Locator) => {
-  const dimensions = await locator.evaluate((element) => {
-    const htmlElement = element as HTMLElement;
-    return {
-      clientWidth: htmlElement.clientWidth,
-      scrollWidth: htmlElement.scrollWidth,
-    };
-  });
-
-  expect(dimensions.scrollWidth - dimensions.clientWidth).toBeLessThanOrEqual(1);
-};
-
 const expectDocumentNotHorizontallyScrollableAsync = async (page: Page) => {
   await expect
     .poll(