Skip to content

Component audit checklist

Actionable checklist applied during component review. Top-level (not module-scoped) because it applies to every shared component in src/components/{ui,common,display,forms,layout}/ and to feature-module components that overlap with shared patterns.

The checklist is currently scoped to responsive correctness — the deliverable of the M8 Responsive Foundation Pass. Other audit dimensions (accessibility, performance, i18n completeness) can grow into their own sections later; this doc is the home for that growth.

When to use this checklist

  • PR review for a new or significantly changed shared component (src/components/*).
  • PR review for a feature-module page that re-implements a shared pattern (e.g. a bespoke dialog instead of <Dialog>).
  • Pre-release sweep of an existing component when a contract changes (new breakpoint behaviour, new touch surface, new variant).
  • Cold audit of an older component to confirm it still meets the contracts in architecture.md § Responsive contracts.

Responsive checklist

Each item is a yes/no check. Cite the line of evidence in the PR description (file:line, screenshot, or test name) when ticking.

  • [ ] Renders correctly at 375 / 768 / 1024 / 1280 / 1536 px widths. No clipped text, no horizontal scroll, no overlapping controls. 375 covers small phones, 768 is the feature-parity threshold (md), 1024–1536 cover desktop.
  • [ ] Touch targets ≥ 44 × 44 px on touch devices. Visual size can be smaller as long as padding or ::before pseudo-elements meet the hit-area bar. The <IconButton> primitive bakes this in; bespoke clickable cells must add min-h-[44px] min-w-[44px] (or equivalent). See design-system.md § Touch targets.
  • [ ] Tooltips on touch — tap-to-show or accept loss. Non-decorative tooltips (e.g. why a button is disabled) use the <TouchTooltip> variant — opens on tap, dismisses on outside-tap. Decorative tooltips can stay hover-only. See design-system.md § Tooltip on touch.
  • [ ] Popovers / menus don't overflow narrow viewports. Anchored content (Popover, DropdownMenu, Combobox) must respect viewport bounds at <sm. Today this relies on Radix's default collision detection — when introducing a wider menu, verify on a 375 px viewport that it doesn't clip off-screen, and if it does, set collisionPadding / sticky / avoidCollisions explicitly.
  • [ ] Tabular content has a paired card layout for <md. Information-dense list pages pick at runtime via useIsBelow('md'): <DataTable> at ≥md, <DataCardList> at <md. Same accessors, same row actions, same state machine. See design-system.md § Table ↔ Cards pairing.
  • [ ] Dialogs go fullscreen at <sm. The transformation is internal to <Dialog> — consumers never branch on breakpoint. Sticky action footer at the bottom, primary action on top of the vertical button stack. See design-system.md § Dialog responsive behavior.
  • [ ] Sticky footers respect iOS safe-area-inset. Any sticky footer (<FormActions sticky>, dialog action bar, kiosk bottom bar) must apply padding-bottom: max(<base>, env(safe-area-inset-bottom)) so the footer doesn't hide under the iOS home indicator. Known gap: <FormActions> does not yet do this — see architecture.md § Responsive contracts. Adding a sticky footer in new code must include the safe-area handling.
  • [ ] Focus states visible at all breakpoints. Keyboard focus rings must be visible on every interactive surface — not hidden by overflow, not clipped by sticky chrome, not invisible against the surface colour. Use focus-visible: (not focus:) so the ring shows for keyboard users but not on mouse clicks.

Mapping to shipped contracts

Where to look when applying each item. References are to the design-system + architecture docs — not to individual Linear RF tickets, since those are point-in-time delivery records, while these docs are kept current.

Checklist item Canonical contract
375 / 768 / 1024 / 1280 / 1536 rendering architecture.md § Responsive contracts (per-primitive table)
Touch targets ≥ 44 × 44 px design-system.md § Touch targets
Tap-to-show tooltips on touch design-system.md § Tooltip on touch
Popover / menu overflow on narrow viewports Radix defaults today; bespoke collisionPadding per-component if needed (gap noted in architecture.md § Responsive contracts)
Table ↔ Cards pairing at <md design-system.md § Table ↔ Cards pairing
Dialog fullscreen at <sm design-system.md § Dialog responsive behavior
Safe-area-inset sticky footers Gap on <FormActions> today — noted in architecture.md § Responsive contracts
Focus visible at all breakpoints Cross-cutting; ring tokens in src/styles/tokens.css, Tailwind utility focus-visible:

See also

  • responsive-strategy.md — policy: which surfaces matter, which screens are Excellent / Workable / Soft-gated on phone.
  • architecture.md § Responsive contracts — per-primitive implementation contract table.
  • design-system.md § Responsive Design — breakpoint tokens, the table↔cards pattern, dialog responsive, touch targets, tooltip-on-touch.