BDTK

Cross-device patterns

Every responsive-sensitive component, rendered together. Minimum target is 48px. Nav collapses at 720px. Console width is 1080px.

Local navigation

Forms

We never share it.
Reference must be 8 characters.

Overlays

Confirm this change

A dialog is capped at the viewport width and uses 100svh, so mobile browser chrome cannot push its bottom edge off-screen.

Filters

The drawer is width-capped with min(), so it can never be wider than the viewport.

Tabs

Space

Container queries. How much room does the component have?

Input

Capability detection. Pointer, hover, keyboard.

Environment

Reduced motion, contrast, safe areas.

Wide table

AxisQuestionMechanismWrong toolOwner
SpaceHow much room?Container queriesViewport queriesComponent
InputPointer or touch?Capability detectionUser-agent sniffingComponent
EnvironmentWhat does the device need?env() and prefers-*AssumptionTokens

Icons

Rendered through <Icon name="..." />. No page imports an icon library: only packages/ui/src/icons/providers/ does, which is why the provider can be swapped without editing a page. pnpm lint:iconsenforces that mechanically.

Inline with text, sized in em so it tracks the type: external link.

Cards

Container density

Padding drops when the slot narrows.

Long string

https://example.com/a/very/long/path/that/would/otherwise/overflow/at/320px