Setting card grid

For a settings surface listing records that each carry controls — a select, a toggle, a menu — rather than values you only read. Compose ProductCardGrid (the canonical auto-fill + max-track grid) around one PortalCard variant="compact" fluid className="halwel-setting-card" per record. No new primitives — the grid and the card already exist; the composition is the pattern.

The container is the point, and the obvious choice is wrong. DataTable sets [data-layout="fixed"] td { white-space: nowrap; overflow: hidden } and td > * { overflow: hidden } — deliberately, because a dashboard table row is exactly one truncating line. Anything that has to overflow its own box is therefore clipped to the cell, so a Dropdown in a table cell renders a menu nobody can see. That shipped on HQ → Settings → Category links (2026-08-15); the second tile below reproduces it. A table is right for rows you read; this pattern is for rows you operate.

Two rules carry the fix. The card keeps overflow: visible, so an open menu can extend past its bottom edge. And :focus-within lifts the card with a z-index, so the menu paints over the cards beside and below it — grid siblings are static, so a positioned ancestor wins. Using :focus-within rather than open/closed state means no plumbing between the card and the control, and no cost when the card is idle.