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.

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}

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}