fix(layout): migrate date pickers to useViewportTier mobile-only
All checks were successful
Build & Push Docker Images / lint (push) Successful in 2m33s
Build & Push Docker Images / build-and-push (push) Successful in 6m59s

Final Bucket 1 visual-audit follow-up. Audit of all 4 useIsMobile
callers:
- pipeline-chart.tsx + pipeline-funnel-chart.tsx → keep useIsMobile
  (short x-axis stage labels apply on tablet too — bar charts can't
  fit full "Reservation" / "Deposit Paid" text at narrow widths).
- date-picker.tsx + date-time-picker.tsx → migrate to useViewportTier.
  Tablet (768-1023) has plenty of room for the desktop Popover
  Calendar; only the smallest phone widths now fall back to the
  native datepicker input.

1454/1454 vitest, tsc clean.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-05-22 14:06:50 +02:00
parent c24f9e5508
commit 9ae7940a04
3 changed files with 12 additions and 7 deletions

View File

@@ -25,7 +25,7 @@ _Copy tweaks, alignment, single-prop edits, obvious typos._
>
> - **SHIPPED in 2f1e1b5:** Tablet topbar logo trigger doesn't render visibly — center grid column changed to `minmax(280px, 800px)` at base with `lg:` override back to 420px min; search-container `sm:-translate-x-...` gated to `lg:` so it only kicks in when sidebar is inline. Verified at 768 — hamburger affordance visible top-left.
> - **SHIPPED in 2f1e1b5:** Dashboard title strip crushed at 1024 viewport — PageHeader horizontal-stack breakpoint moved from `lg:` (1024) to `xl:` (1280) so the strip stays stacked through tablet AND narrowest desktop width. Verified at 1024 — title reads cleanly with action row stacked below.
> - **`useIsMobile()` returns `true` on tablet — call-site audit needed** — _src/hooks/use-is-mobile.ts_ + every component currently importing `useIsMobile` — the new `useViewportTier()` is the precise hook; `useIsMobile` was kept as `tier !== 'desktop'` for back-compat, which is what most call sites want ("show short stage labels", "stack vertically"). But a handful intend strict mobile-only behaviour (e.g. drawer-instead-of-popover, bottom-sheet picker) and should migrate to `useViewportTier() === 'mobile'`. Grep `useIsMobile` and triage each per actual intent. ~30 min for the audit + targeted migrations. Captured 2026-05-22.
> - **SHIPPED in 2f1e1b5 + follow-up:** `useIsMobile()` call-site audit — only 4 callers: pipeline-chart + pipeline-funnel-chart correctly want `tier !== desktop` (short-label x-axis applies on tablet too, kept as-is); date-picker + date-time-picker were strict mobile-only and now use `useViewportTier() === 'mobile'` so tablet gets the desktop Popover Calendar instead of the native input.
> **Outstanding quick-fixes (rapid UAT capture — not yet shipped):**
>