Repository navigation
fix(ui): date picker — constant height + year-skip arrows - #310
Conversation
The calendar grid rendered a variable number of weeks (5 or 6) depending on the month, so its height jumped when navigating months. Pin it to a constant 6 weeks (42 cells) regardless of month length. Also add year-skip double-chevron arrows on both sides of the month nav, alongside the existing month arrows. Applied to both web and mobile; adds common.previousYear / common.nextYear (en + pt-BR). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub. 1 Skipped Deployment
|
![claude[bot]](https://avatars.githubusercontent.com/in/1236702?s=60&v=4){kind=small}
There was a problem hiding this comment.
APPROVE — see full review below.
Two UX fixes (constant 42-cell height + year-skip arrows) applied identically to both platforms. All rubric dimensions checked:
- Correctness: algorithm change is correct — 42 cells always covers 6 weeks; endOfWeek import retained (used in keyboard nav handler).
- Dead/stale code: none introduced; endOfMonth/eachDayOfInterval correctly removed.
- Parity: PAIRED — same logic on web and mobile.
- i18n: IN SYNC — previousYear/nextYear in both en.json and pt-BR.json.
- Contract drift: N/A — no shared types or API contract touched.
- Security: N/A — no orbit-api changes.
- Backward compat: N/A — no shared Zod schema or DTO changes.
- DESIGN.md: semantic tokens only (--fg-3, --bg-elev, --primary), no bans triggered.
- Comment policy: no violations.
- Type safety: no any, unknown, or escape hatches.
- Tests: three new behavioral tests prove the regression target.
No Critical, High, or Medium findings. Clean diff. APPROVE.
There was a problem hiding this comment.
PR Review: fix(ui): date picker - constant height + year-skip arrows. Decision: APPROVE - zero Critical, High, or Medium findings. Subagents: parity-checker PAIRED, i18n-syncer IN SYNC, contract-aligner MATCH, security N/A. Findings: None. All rubric dimensions clean: Correctness (Array.from 42-cell grid anchored at startOfWeek/startOfMonth, prevYear/nextYear use subYears/addYears correctly), dead code removed (endOfMonth, eachDayOfInterval, endOfWeek imports gone), no any/escape hatches, no narration comments, semantic design tokens on both platforms, identical parity web+mobile, i18n keys in both locales, no shared types or endpoints changed (no backward-compat risk), no auth or data surface touched. The fixed-42-cell approach eliminates layout shift cleanly. Three purposeful tests cover the behavior contract.
|
Resolves the one conflict (apps/web/components/habits/habit-form-fields.tsx): the nuclear review extracted the frequency carousel into habit-form-fields/frequency-type-cards.tsx, while #309 added the scroll-settle debounce inline on main. Kept the extracted (split) structure and ported #309's debounce + data-testid into frequency-type-cards.tsx, so the carousel fix and the decomposition both hold. #310 (date picker + i18n) merged cleanly.
* fix: bound offline queue retries and derive one recovery notice (#310) * fix: clarify dropped creation recovery and update boundary tests * fix: preserve toast parity and count terminal queue progress * fix: preserve offline delivery and clear recovery actions on reset * fix: preserve offline recovery across hydration and replay (#310) * test: isolate recovery error reporting from native Sentry (#310) * test: exercise real Sentry scrubbing behind the native mock (#310) * fix: preserve queued changes across auth stops and producer retries (#310) * fix: retain offline entity failure state on auth stops (#310) * fix: preserve queued work and recovery actions through reauthentication
Two date-picker UX fixes (Create/Edit-habit start-date calendar)
1. Constant calendar height
The grid rendered a variable number of weeks (5 for months that fit, 6 otherwise), so the popover height jumped when paging between months (e.g. June 2026 = 5 rows, August 2026 = 6 rows). It now always renders 6 weeks (42 cells) regardless of month length — stable height, no layout shift.
2. Year-skip arrows
Added double-chevron year arrows on the outer edges of the month nav (
« ‹ Month › »), so you can jump a full year at a time instead of pressing the month arrow 12×. Newcommon.previousYear/common.nextYeari18n keys (en + pt-BR, in sync).Both changes applied to web and mobile (
apps/{web,mobile}/components/ui/app-date-picker.tsx).Tests / verification
app-date-pickertests pass.🤖 Generated with Claude Code