From 06aa5caf0bc3ce3174d24d8f3fd393bf0593363a Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Sun, 9 Aug 2026 15:43:05 +0200
Subject: [PATCH] fix: size dashboard rails to viewport

---
 .../src/app/[locale]/boards/(content)/_client.module.css    | 1 +
 apps/nextjs/src/components/board/layout/README.md           | 6 +++---
 .../src/components/board/sections/grid/section-grid.tsx     | 5 +----
 e2e/board-grid.spec.ts                                      | 5 +++++
 4 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/apps/nextjs/src/app/[locale]/boards/(content)/_client.module.css b/apps/nextjs/src/app/[locale]/boards/(content)/_client.module.css
index d0f0252e6..cafa491f0 100644
--- a/apps/nextjs/src/app/[locale]/boards/(content)/_client.module.css
+++ b/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;
diff --git a/apps/nextjs/src/components/board/layout/README.md b/apps/nextjs/src/components/board/layout/README.md
index 6957e0136..12ac371d0 100644
--- a/apps/nextjs/src/components/board/layout/README.md
+++ b/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:
 
diff --git a/apps/nextjs/src/components/board/sections/grid/section-grid.tsx b/apps/nextjs/src/components/board/sections/grid/section-grid.tsx
index 6b98efc0c..ab1b1fb4b 100644
--- a/apps/nextjs/src/components/board/sections/grid/section-grid.tsx
+++ b/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);
diff --git a/e2e/board-grid.spec.ts b/e2e/board-grid.spec.ts
index 88fb0b2de..0839ac527 100644
--- a/e2e/board-grid.spec.ts
+++ b/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");