fix: size dashboard rails to viewport

apps/nextjs/src/app/[locale]/boards/(content)/_client.module.css

@@ -21,6 +21,7 @@
   height: var(--board-gutter-viewport-height);
   padding-top: 24px;
   margin-top: -24px;
+  overflow-x: hidden;
   overflow-y: auto;
   overscroll-behavior: contain;
   scrollbar-gutter: stable;

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

@@ -10,9 +10,9 @@ The board uses fixed logical units:
 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
 widget's `clientWidth`, `clientHeight`, and `ResizeObserver` measurements stay
-stable. The visual canvas always fits the available width, the main root keeps
-at least one viewport of height, and edit-mode previews extend it downward as
-needed.
+stable. The visual canvas always fits the available width, every root lane
+keeps at least one viewport of height, and edit-mode previews extend it downward
+as needed.
 
 The read-only renderer should:
 

apps/nextjs/src/components/board/sections/grid/section-grid.tsx

@@ -147,10 +147,7 @@ export const SectionGrid = ({
   );
   const displayedItems = items.map((item) => withPlacement(item, placementById.get(item.id)));
   const displayedInnerSections = innerSections.map((item) => withPlacement(item, placementById.get(item.id)));
-  const minimumViewportRowCount = useMinimumViewportRowCount(
-    section.kind === "empty" && railPlacement === "main",
-    canvasScale,
-  );
+  const minimumViewportRowCount = useMinimumViewportRowCount(section.kind === "empty", canvasScale);
   const contentRowCount = Math.max(1, getLayoutRowCount(displayPlacements));
   const rowCount = Math.max(contentRowCount, requestedRowCount, minimumViewportRowCount);
   const logicalWidth = getLogicalTrackSize(columnCount);

e2e/board-grid.spec.ts

@@ -95,6 +95,11 @@ describe("Board grid", () => {
       await expect(rail).toBeVisible();
       await expect(rail).toHaveAttribute("data-board-gutter", "left");
       await expect(railRootSection).toHaveAttribute("data-rail-placement", "left");
+      await expect(rail).toHaveCSS("overflow-x", "hidden");
+      const initialRailBox = await expectBoundingBoxAsync(rail);
+      const initialRailRootBox = await expectBoundingBoxAsync(railRootSection);
+      expect(initialRailRootBox.width).toBeCloseTo(initialRailBox.width, 1);
+      expect(initialRailRootBox.height).toBeGreaterThanOrEqual(initialRailBox.height - 1);
       await expect(railItem).toHaveAttribute("data-grid-x", "0");
       await expect(containerSection).toHaveAttribute("data-grid-w", "2");
       await expect(containerSection).toHaveAttribute("data-grid-h", "2");