Give Month Task titles a full touch target on phones #1052

Open
opened 2026-10-04 10:02:20 +00:00 by kayg · 1 comment
Owner

Real-build macOS close-ups from reconciliation #867 show a Month Task target problem at 390 px. Native 3× close-ups at all widths and themes.

packages/ui/src/components/calendar/MonthGrid.svelte positions the completion control at the start of the row with --month-task-hit: var(--hit) (44 px), above the title button. The title uses the same value as its start padding. At 390 px, seven day columns leave about 50 px for a row. The checkbox covers almost all of that width. The title has only a narrow exposed pointer area and its text is clipped to a stroke. This is also visible in the complete phone Month screenshot attached to #867.

Desktop cap-height alignment appears centered in the technical close-up; Claude still owns visual review. The problem here is the effective phone title target, not a request for visual approval. Completion and title opening must each have a 44 px effective touch target. Keep completion separate from opening, and preserve the fixed six-week layout and More action. Do not use runtime layout measurement to solve it. This needs a responsive Month layout change; it was not introduced by the conflict resolution and is left outside reconciliation.

Related: #655, #657, #1015, #867. No existing test expectation was changed for this finding.

Real-build macOS close-ups from reconciliation #867 show a Month Task target problem at 390 px. [Native 3× close-ups at all widths and themes](https://git.kayg.org/attachments/8a743406-7a1c-45a3-9168-640d103f8ceb). `packages/ui/src/components/calendar/MonthGrid.svelte` positions the completion control at the start of the row with `--month-task-hit: var(--hit)` (44 px), above the title button. The title uses the same value as its start padding. At 390 px, seven day columns leave about 50 px for a row. The checkbox covers almost all of that width. The title has only a narrow exposed pointer area and its text is clipped to a stroke. This is also visible in the complete phone Month screenshot attached to #867. Desktop cap-height alignment appears centered in the technical close-up; Claude still owns visual review. The problem here is the effective phone title target, not a request for visual approval. Completion and title opening must each have a 44 px effective touch target. Keep completion separate from opening, and preserve the fixed six-week layout and More action. Do not use runtime layout measurement to solve it. This needs a responsive Month layout change; it was not introduced by the conflict resolution and is left outside reconciliation. Related: #655, #657, #1015, #867. No existing test expectation was changed for this finding.
Author
Owner

The 820 px close-ups also show the Task title hidden while its clock remains visible. The row uses 44 px start padding for completion, plus the clock and gaps. At tablet width this consumes the available title width. The attached 3× screenshot set covers this in light and dark. Address the phone effective-title target and tablet title visibility in the same responsive Month change. No runtime layout measurements are needed.

The 820 px close-ups also show the Task title hidden while its clock remains visible. The row uses 44 px start padding for completion, plus the clock and gaps. At tablet width this consumes the available title width. The attached 3× screenshot set covers this in light and dark. Address the phone effective-title target and tablet title visibility in the same responsive Month change. No runtime layout measurements are needed.
Sign in to join this conversation.
No labels
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference
kayg/calternal#1052
No description provided.