Fit to Size
Three ways to make a component adapt to the space it is given — and the
point of this page is which one to reach for. A CSS @container query costs nothing and should be the default. FitContainer / FitSlot fold a 1-D row whose overflow depends on measured content, not a threshold you can name up
front. ContainerBreakpoint maps width to a named mode so
you {#if} on it and Svelte mounts only the branch that
shows — the one thing CSS cannot do, because a hidden branch is still
built. §3 and §4 are deliberately the same card, done both ways.
fit.js and container-breakpoint.js (v2.9.0-rc17). FitSlot makes an element a slot (strategy="hide|steps|sidebar" → data-pc-fit) and priority orders them — lower folds
first. FitContainer sets data-pc-fit-auto, so every direct child folds without tagging each, and its defaultPriority is the fallback rank; a child pins itself out
with data-pc-fit-ignore. Drag the sliders — or
open this page on a narrow phone — to watch each stage fold.1 · Card toolbar — shrink, don't lose
A steps slot degrades full label → icon-only → gone instead of vanishing outright, so an action stays reachable as an icon before
it is dropped. Save is pinned full
(data-pc-fit-ignore); Duplicate and Export shrink to icons (higher priority survives longer); Delete is untagged, so it inherits the container's defaultPriority=20 and drops first.
Drag left: Delete drops → Export shrinks to its icon, then drops → Duplicate shrinks → only Save remains, always full.
2 · Product card — chart ↔ KPI
A different job needs a different tool. Swapping a sparkline for a compact KPI is a 2-D layout change, not a 1-D row fold —
so this one is a plain CSS container query on the card, with no engine at all. The left half stays product identity; the right half
shows the trend while there is room and swaps to a Stat once the
card narrows past 45rem (450px).
Arabica Cold Brew
3 · Rich product card — degrade on multiple levels
The real power shows when one card restyles on several axes at once.
A single container query with three widths: as it narrows, the three data
panels (Orders · Stock · Sales) collapse from a 3-column grid into tabs, then the tab labels
drop to icons only; in step, the header sheds its supplier,
then its packaging line and trend badge. Every visible piece — Badge, Stat, Tabs, DotLeaders — is a real
component; only the layout switches.
Arabica Cold Brew
Orders
Stock
Sales
4 · The same card, on the engine — with a chart it builds on demand
This is §3's card again — the same three-level degrade, the same header
trimming — but driven by ContainerBreakpoint instead of a CSS @container. Why bother, if CSS already did it? Because in §3 every branch is in the DOM at every width. Here the branches
are {#if}-gated, so Svelte constructs only the one on screen:
the grid-only revenue chart is built when the card
reaches grid and destroyed when it leaves. Watch the log.
steps are rem — minimum widths of the card itself (its content-box
inline size), not the viewport and not percentages. pure-admin's root
font-size is 10px, so 34 = 340px and 64 =
640px — the same numbers as §3's @container breakpoints. The engine
picks the largest mode whose width the card has passed
(700px → grid, 500px → tabs). Prefer pixels? Pass unit="px" and write { icons: 0, tabs: 340, grid: 640 } —
identical behaviour. Percent is deliberately not a unit: "does this layout fit"
is an absolute-pixel question (label widths, gaps, padding); for
viewport-relative rules reach for a CSS media query instead.Arabica Cold Brew
- (waiting — the chart is not built until the card reaches grid)
<Breaker {mode} show="comfy wide"> instead of an {#if}. It stays mounted and toggles .d-none, so nothing
is lost when a block leaves and re-enters view. Reach for {#if mode === …} only when you want to avoid building an expensive branch off-screen (§4). Both
read the same reactive mode from ContainerBreakpoint's snippet.