mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-12 14:16:12 +00:00
Marc-André Bombeck
f223b4feae
Per Marc's "mobile is co-equal with desktop" directive, every
breakpoint gets a deliberate layout — no afterthought reflow:
• default (<640px): grid-cols-1, full-width cards, gap-4. The
per-card Coach CTA spans full width (justify-center) so the
touch target is generous; the source link sits beneath
right-aligned.
• sm (640-1023px): grid-cols-2, gap-4. Card footer reverts to
horizontal — Coach CTA left, source link right.
• lg (1024px+): grid-cols-3, gap-6. Three cards per row matches
the dashboard / insights rhythm and lets the user see all six
core targets above the fold on a 1440px viewport.
Card internals also reflow:
• Headline row: icon + label stack with status pill below on
mobile (sm:flex-row sm:justify-between), inline on sm+.
• Footer row: flex-col items-stretch on mobile,
sm:flex-row sm:items-center sm:justify-between on sm+.
New `targets-responsive.test.tsx` pins the breakpoint classes so a
future refactor can't quietly collapse the grid back to v1.4.22's
sm:grid-cols-2 only layout.
Verified by inspection (Tailwind class audit). A Playwright sweep
across 375 / 768 / 1280 / 1440 viewports is queued for the W3e
verification phase.