From 78a4f0e513155f54e4d7c3e6117a3e7dda80781c Mon Sep 17 00:00:00 2001
From: Bergasha <bergasha@gmail.com>
Date: Thu, 27 Aug 2026 13:34:57 +1000
Subject: [PATCH 1/4] Fix container widgets clipping and label overlap

A container's own visible card is inset from its allocated board cell
by the board's standard per-item gap, but items inside it are
positioned in a coordinate space sized to the un-inset column/row
count - so without correcting for that, items (not just the grid's
own box) spilled past the container's right/bottom edge by that
inset amount, worse the busier/more zoomed-out the board is.

Scales the container's inner grid content down to fit the actual card
size, using the same zoom mechanism the board's own top-level canvas
uses for its whole-board zoom, just one level deeper. Corrects
--board-canvas-ui-scale to compensate so icon/text/custom-CSS sizing
inside the container isn't affected - computed as a plain JS number
rather than a CSS calc() referencing the property's own inherited
value, since custom properties don't have a sequential/temporal order
within the same element and doing so is a circular reference that
silently invalidates the whole property for every descendant.

Also fixes the collapsible container's label bar poking above the
card's rounded top border via a negative offset - it now sits flush
inside it.
---
 .../board/sections/container-section.tsx      |  2 +-
 .../board/sections/grid/section-grid.tsx      | 53 +++++++++++++++++--
 2 files changed, 49 insertions(+), 6 deletions(-)

diff --git a/apps/nextjs/src/components/board/sections/container-section.tsx b/apps/nextjs/src/components/board/sections/container-section.tsx
index 7e5284f1f..7e4e180ed 100644
--- a/apps/nextjs/src/components/board/sections/container-section.tsx
+++ b/apps/nextjs/src/components/board/sections/container-section.tsx
@@ -67,7 +67,7 @@ export const BoardContainerSection = ({ section }: Props) => {
           <Button
             className={classes.containerToggle}
             pos="absolute"
-            top={isVisuallyCollapsed ? 0 : "calc(var(--mantine-spacing-xs) * -1)"}
+            top={0}
             left={0}
             w="100%"
             h={isVisuallyCollapsed ? "100%" : 24}
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 fc4642641..d4416aab5 100644
--- a/apps/nextjs/src/components/board/sections/grid/section-grid.tsx
+++ b/apps/nextjs/src/components/board/sections/grid/section-grid.tsx
@@ -18,7 +18,7 @@ import {
   getReadonlyCanvasAttributes,
   normalizeGridPlacement,
 } from "~/components/board/layout";
-import { useBoardCanvasScale } from "~/components/board/layout/scaled-board-canvas";
+import { calculateBoardUiScale, useBoardCanvasScale } from "~/components/board/layout/scaled-board-canvas";
 import { useGridEditorRuntimeStatus } from "./grid-editor-runtime";
 import { createGridEntryElementStore, useGridEditorRegistry } from "./grid-editor-registry";
 import type { SectionGridPlacement } from "./use-grid-layout-actions";
@@ -138,9 +138,44 @@ export const SectionGrid = ({
   // of expanding to fit every widget, so its viewport height is capped independently of rowCount.
   const isScrollableContainer = section.kind === "container" && section.options.scrollable;
   const viewportRowCount = isScrollableContainer ? Math.max(requestedRowCount, 1) : rowCount;
-  const logicalWidth = getLogicalGridSize(columnCount);
-  const logicalHeight = getLogicalGridSize(rowCount);
-  const viewportHeight = getLogicalGridSize(viewportRowCount);
+  // A container's own visible card is inset from its allocated board cell by the board's
+  // standard per-item gap (see the base, non-container `.staticItem[data-type="item"] >
+  // .contentMount` rule in section-grid.module.css - a container is placed as an "item" like
+  // any widget, so it gets that same gap). A widget's content just fills whatever size its
+  // card ends up being, but this SectionGrid instead computes its own fixed pixel size from
+  // the same column/row counts used to allocate the *outer*, uninset cell - so without
+  // subtracting that gap back out here, a container's inner grid renders larger than its own
+  // card and visually spills past its right/bottom edges. 10 must match that CSS rule's inset.
+  const outerCardInset = section.kind === "container" ? (2 * 10) / canvasScale : 0;
+  const logicalWidth = getLogicalGridSize(columnCount) - outerCardInset;
+  const logicalHeight = getLogicalGridSize(rowCount) - outerCardInset;
+  const viewportHeight = getLogicalGridSize(viewportRowCount) - outerCardInset;
+  // Items are positioned in a coordinate space sized to the *un-inset* column/row count
+  // (fullGridWidth/Height below - see getLogicalItemStyle), but logicalWidth/Height above are
+  // deliberately smaller by outerCardInset to match the container's actual visible card size.
+  // Left alone, that mismatch means the items - not just the grid's own box - spill past the
+  // card's right/bottom edge by exactly that inset. Scale the grid's content down by the same
+  // ratio the board's own canvas uses for its whole-board zoom (see ScaledBoardCanvas), just one
+  // level deeper, so it fits the actual card instead of clipping. --board-canvas-ui-scale is
+  // corrected to compensate so icon/text sizing inside the container isn't affected.
+  const fullGridWidth = getLogicalGridSize(columnCount);
+  const fullGridHeight = getLogicalGridSize(rowCount);
+  // A uniform zoom is required (not a non-uniform transform scale(x, y)) - --board-canvas-ui-scale
+  // is a single scalar that every icon/text/custom-CSS size compensation in the app multiplies
+  // by, so a non-uniform stretch can never be captured by it correctly. That means one axis can
+  // be left with a small amount of unfilled slack when width/height need different ratios to
+  // exactly fit - centered below so it's even on both sides rather than left-aligned.
+  const containerContentScale =
+    section.kind === "container" && fullGridWidth > 0 && fullGridHeight > 0
+      ? Math.min(logicalWidth / fullGridWidth, logicalHeight / fullGridHeight, 1)
+      : 1;
+  // Compute the combined value in JS rather than a CSS calc() referencing the existing
+  // --board-canvas-ui-scale: custom properties declared on the *same* element don't have a
+  // sequential/temporal order the way normal variables do, so any calc() on this element that
+  // both reads and writes --board-canvas-ui-scale (even indirectly, through another property)
+  // is a circular reference - CSS invalidates the whole group rather than using "the old value",
+  // silently breaking every icon/text/custom-CSS size that compensates off it for descendants.
+  const combinedUiScale = calculateBoardUiScale(canvasScale) / containerContentScale;
   // A collapsed container's compact coordinates are display-only. Its own
   // nested grid stays inactive until an explicit edit interaction expands it.
   const isInteractionDisabled = section.kind === "container" && collapsedSectionIds.has(section.id);
@@ -249,7 +284,15 @@ export const SectionGrid = ({
       >
         <Box
           className={classes.staticGrid}
-          style={{ width: logicalWidth, height: logicalHeight }}
+          style={
+            {
+              width: fullGridWidth,
+              height: fullGridHeight,
+              zoom: containerContentScale,
+              margin: containerContentScale < 1 ? "0 auto" : undefined,
+              ...(containerContentScale < 1 ? { "--board-canvas-ui-scale": combinedUiScale } : {}),
+            } as CSSProperties
+          }
           data-grid-section-id={section.id}
           data-kind={section.kind}
           data-grid-editor-error={isEditMode && editorRuntimeStatus === "error" ? "true" : undefined}

From becc6a71a99a1a0d37a3400dac26dc0e9420ae56 Mon Sep 17 00:00:00 2001
From: Bergasha <bergasha@gmail.com>
Date: Thu, 27 Aug 2026 13:46:21 +1000
Subject: [PATCH 2/4] Address CodeRabbit review on container scale fix PR

- Guard canvasScale before dividing by it in outerCardInset, matching
  calculateBoardUiScale's own fallback.
- Fix containerContentScale's vertical fit ratio for scrollable
  containers: it was derived from the full (all-rows) content height,
  which drifts toward 1 as more rows are added regardless of the fixed
  inset, under-scaling relative to what the visible viewport actually
  needs and clipping the bottom of the visible rows. Use
  viewportHeight/viewportRowCount instead, which describe the real
  visible card size in both the scrollable and non-scrollable case.
---
 .../board/sections/grid/section-grid.tsx           | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

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 d4416aab5..f311ab23f 100644
--- a/apps/nextjs/src/components/board/sections/grid/section-grid.tsx
+++ b/apps/nextjs/src/components/board/sections/grid/section-grid.tsx
@@ -146,7 +146,8 @@ export const SectionGrid = ({
   // the same column/row counts used to allocate the *outer*, uninset cell - so without
   // subtracting that gap back out here, a container's inner grid renders larger than its own
   // card and visually spills past its right/bottom edges. 10 must match that CSS rule's inset.
-  const outerCardInset = section.kind === "container" ? (2 * 10) / canvasScale : 0;
+  const effectiveCanvasScale = Number.isFinite(canvasScale) && canvasScale > 0 ? canvasScale : 1;
+  const outerCardInset = section.kind === "container" ? (2 * 10) / effectiveCanvasScale : 0;
   const logicalWidth = getLogicalGridSize(columnCount) - outerCardInset;
   const logicalHeight = getLogicalGridSize(rowCount) - outerCardInset;
   const viewportHeight = getLogicalGridSize(viewportRowCount) - outerCardInset;
@@ -160,14 +161,21 @@ export const SectionGrid = ({
   // corrected to compensate so icon/text sizing inside the container isn't affected.
   const fullGridWidth = getLogicalGridSize(columnCount);
   const fullGridHeight = getLogicalGridSize(rowCount);
+  // For a scrollable container, rowCount covers *all* content rows, not just the visible card -
+  // fullGridHeight/logicalHeight grow together with it, so their ratio drifts toward 1 as content
+  // grows regardless of the (fixed) inset, under-scaling relative to what the actually-visible
+  // viewport needs and clipping the bottom of the visible rows. viewportHeight/viewportRowCount
+  // describe the real visible card size in both cases (they equal logicalHeight/rowCount when not
+  // scrollable), so use those instead.
+  const fullViewportHeight = getLogicalGridSize(viewportRowCount);
   // A uniform zoom is required (not a non-uniform transform scale(x, y)) - --board-canvas-ui-scale
   // is a single scalar that every icon/text/custom-CSS size compensation in the app multiplies
   // by, so a non-uniform stretch can never be captured by it correctly. That means one axis can
   // be left with a small amount of unfilled slack when width/height need different ratios to
   // exactly fit - centered below so it's even on both sides rather than left-aligned.
   const containerContentScale =
-    section.kind === "container" && fullGridWidth > 0 && fullGridHeight > 0
-      ? Math.min(logicalWidth / fullGridWidth, logicalHeight / fullGridHeight, 1)
+    section.kind === "container" && fullGridWidth > 0 && fullViewportHeight > 0
+      ? Math.min(logicalWidth / fullGridWidth, viewportHeight / fullViewportHeight, 1)
       : 1;
   // Compute the combined value in JS rather than a CSS calc() referencing the existing
   // --board-canvas-ui-scale: custom properties declared on the *same* element don't have a

From 8abc9cae6c426106c50a737cbed7995dc0702e93 Mon Sep 17 00:00:00 2001
From: Bergasha <bergasha@gmail.com>
Date: Thu, 27 Aug 2026 13:56:32 +1000
Subject: [PATCH 3/4] Fix unused logicalHeight variable left over from
 CodeRabbit fix

Removing it in favor of viewportHeight for the vertical fit ratio left
the declaration itself dead code, which the CI lint step flags as an
error rather than a warning.
---
 .../src/components/board/sections/grid/section-grid.tsx    | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

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 f311ab23f..d08c260d0 100644
--- a/apps/nextjs/src/components/board/sections/grid/section-grid.tsx
+++ b/apps/nextjs/src/components/board/sections/grid/section-grid.tsx
@@ -149,7 +149,6 @@ export const SectionGrid = ({
   const effectiveCanvasScale = Number.isFinite(canvasScale) && canvasScale > 0 ? canvasScale : 1;
   const outerCardInset = section.kind === "container" ? (2 * 10) / effectiveCanvasScale : 0;
   const logicalWidth = getLogicalGridSize(columnCount) - outerCardInset;
-  const logicalHeight = getLogicalGridSize(rowCount) - outerCardInset;
   const viewportHeight = getLogicalGridSize(viewportRowCount) - outerCardInset;
   // Items are positioned in a coordinate space sized to the *un-inset* column/row count
   // (fullGridWidth/Height below - see getLogicalItemStyle), but logicalWidth/Height above are
@@ -162,11 +161,11 @@ export const SectionGrid = ({
   const fullGridWidth = getLogicalGridSize(columnCount);
   const fullGridHeight = getLogicalGridSize(rowCount);
   // For a scrollable container, rowCount covers *all* content rows, not just the visible card -
-  // fullGridHeight/logicalHeight grow together with it, so their ratio drifts toward 1 as content
+  // fullGridHeight grows right along with it, so a ratio built from it drifts toward 1 as content
   // grows regardless of the (fixed) inset, under-scaling relative to what the actually-visible
   // viewport needs and clipping the bottom of the visible rows. viewportHeight/viewportRowCount
-  // describe the real visible card size in both cases (they equal logicalHeight/rowCount when not
-  // scrollable), so use those instead.
+  // describe the real visible card size in both cases (they equal the non-scrollable values when
+  // rowCount and viewportRowCount are the same), so use those instead.
   const fullViewportHeight = getLogicalGridSize(viewportRowCount);
   // A uniform zoom is required (not a non-uniform transform scale(x, y)) - --board-canvas-ui-scale
   // is a single scalar that every icon/text/custom-CSS size compensation in the app multiplies

From c82965067c5ce868926ac75650a51d5950dd7cce Mon Sep 17 00:00:00 2001
From: Bergasha <bergasha@gmail.com>
Date: Thu, 27 Aug 2026 14:17:05 +1000
Subject: [PATCH 4/4] Floor containerContentScale above zero

logicalWidth/viewportHeight can go non-positive for a narrow container
on a heavily zoomed-out board, where outerCardInset (which grows as
canvasScale shrinks) can exceed the container's own un-inset size.
That non-positive scale then feeds into a division (Infinity/NaN into
--board-canvas-ui-scale) and is used as zoom directly (invalid or
collapsed content) - flooring it well above zero avoids both.
---
 .../src/components/board/sections/grid/section-grid.tsx    | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

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 d08c260d0..a7401f0e9 100644
--- a/apps/nextjs/src/components/board/sections/grid/section-grid.tsx
+++ b/apps/nextjs/src/components/board/sections/grid/section-grid.tsx
@@ -172,9 +172,14 @@ export const SectionGrid = ({
   // by, so a non-uniform stretch can never be captured by it correctly. That means one axis can
   // be left with a small amount of unfilled slack when width/height need different ratios to
   // exactly fit - centered below so it's even on both sides rather than left-aligned.
+  // logicalWidth/viewportHeight can go non-positive for a narrow (e.g. single-column) container
+  // on a heavily zoomed-out board, where outerCardInset (which grows as canvasScale shrinks) can
+  // exceed the container's own un-inset size. Floor the scale well above 0 so it can never reach
+  // zero or negative - combinedUiScale divides by this value, and this value is also used as
+  // zoom directly, both of which break (Infinity/NaN, or invalid/collapsed content) otherwise.
   const containerContentScale =
     section.kind === "container" && fullGridWidth > 0 && fullViewportHeight > 0
-      ? Math.min(logicalWidth / fullGridWidth, viewportHeight / fullViewportHeight, 1)
+      ? Math.max(0.01, Math.min(logicalWidth / fullGridWidth, viewportHeight / fullViewportHeight, 1))
       : 1;
   // Compute the combined value in JS rather than a CSS calc() referencing the existing
   // --board-canvas-ui-scale: custom properties declared on the *same* element don't have a