fix(calendar): cap the all-day band so the timed grid stays visible - #347
Conversation
On the week/interval time grid, a day with many untimed habits let the
all-day ("DIA INTEIRO") band grow without bound, pushing the timed hours
almost entirely off-screen — the user could barely see or scroll the timed
habits.
Cap the band at 5 chips per column on both platforms; any overflow collapses
into a single tappable "+N" chip that opens the day detail (where the full
list lives). The band height is now bounded, so the timed grid always keeps
usable, scrollable space.
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.
Code Review PR #347 - fix(calendar): cap the all-day band so the timed grid stays visible - APPROVE
Summary: PR #347 fixes a real UX regression where an unbounded all-day band ate the viewport with many untimed habits. The fix is surgically correct: splitAllDay() is implemented identically on both platforms, the +N overflow chip fires onSelectDay correctly, the band-height computation on mobile is capped to match, and symmetric tests cover the 8-entry to 4+4 split case. No shared types, DTOs, or API contracts are touched — zero risk to existing mobile clients.
Findings: Critical: None. High: None. Medium: None. Low/Info: None.
Subagents: parity-checker PAIRED (identical splitAllDay, AllDayMoreChip, band-height cap, and tests across both platforms). i18n-syncer IN SYNC (+N is language-neutral, no new keys needed). contract-aligner N/A (apps/ only, no packages/shared or orbit-api changes). security-reviewer N/A (frontend-only).
Validation: Lint/typecheck/tests all N/A — npm commands blocked by CI permission gate. PR body reports lint clean on both platforms, type-check clean on both, Web 6/6 and mobile 5/5 green.
Deferred: Contract drift (#11) N/A — no shared type or DTO changes. Security API side (#12) N/A — orbit-api not touched, frontend surfaces clean (no dangerouslySetInnerHTML, no auth-state reads). Backend hard rules (#13) N/A.
What is good: Root cause fix not a workaround. splitAllDay math is exactly right (visible = slice(0, MAX-1), overflow = total - (MAX-1)). Mobile allDayBandHeight uses Math.min(maxChips, ALL_DAY_MAX_VISIBLE) at line 410 so height budget matches what renders. Both chips carry correct accessibility labels. Semantic tokens throughout — no raw rgba or hardcoded colours. Tests assert behaviour not implementation. No premature abstraction — helpers stay local per CLAUDE.md rule 10.
Recommendation: Approve and merge. All dimensions clean, both platforms paired, no client-contract risk.
Reviewed by Claude Code
|
1 participant
Problem
On the week/interval time grid, a day with many untimed (all-day) habits made the "DIA INTEIRO" band grow without bound — with ~18 chips it ate almost the entire viewport, shoving the timed hours (3:00, 4:00…) off the bottom. The user could barely see or scroll the timed habits.
Fix
Cap the all-day band at 5 chips per column on both platforms. Any overflow collapses into a single tappable "+N" chip that opens the day detail (where the full habit list already lives). The band height is now bounded, so the timed grid always keeps usable, scrollable space.
calendar-time-grid.tsx): the flex band naturally bounds to the clamped chips;+Nis a button →onSelectDay.calendar-time-grid.tsx):allDayBandHeightis capped atmin(maxChips, 5)rows;+Nis aPressable→onSelectDay.splitAllDay) on both, mirroring the existing duplicated helpers (layoutTimed,parseMinutes).No new i18n (the chip is a language-neutral
+Ncount).Tests
New test on each platform: render 8 all-day entries → exactly 4 chips render + a
+4chip that callsonSelectDay. Web 6/6, mobile 5/5 green; type-check + lint clean both.🤖 Generated with Claude Code