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.
This commit is contained in:
Bergasha committed 2026-08-27 13:46:34 +10:00
1 parent 78a4f0e513
commit becc6a71a9
1 file changed
+11 -3
@@ -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