fix: mobile-friendly cycle tracker summary rows #8

Merged
fiatcode merged 1 commit from fix/cycle-mobile-summary into main 2026-06-19 14:12:47 +07:00
Owner

The Summary tab's timeline rows overflowed on mobile — fixed-width (flex-shrink-0) values plus truncated labels pushed each row past the viewport.

  • Stack label-over-value on mobile, side-by-side on sm:+ (responsive flex-colsm:flex-row)
  • Fix the type hierarchy: the value (the date) is now the prominent element, the label a quiet caption — reads as a clean labeled field instead of a cramped fallback stack
  • Drop the redundant per-row color dots; the indicators live only in the calendar legend where they actually mean something

Verified on-device. Tests 108/108, build clean.

The Summary tab's timeline rows overflowed on mobile — fixed-width (`flex-shrink-0`) values plus truncated labels pushed each row past the viewport. - Stack label-over-value on mobile, side-by-side on `sm:`+ (responsive `flex-col` → `sm:flex-row`) - Fix the type hierarchy: the value (the date) is now the prominent element, the label a quiet caption — reads as a clean labeled field instead of a cramped fallback stack - Drop the redundant per-row color dots; the indicators live only in the calendar legend where they actually mean something Verified on-device. Tests 108/108, build clean.
Summary timeline rows overflowed on narrow screens (fixed-width values +
truncated labels). Stack label-over-value on mobile, side-by-side on sm+;
make the value the prominent element and the label a quiet caption; drop the
redundant per-row color dots (the calendar legend is the only place they
carry meaning).
Sign in to join this conversation.
No reviewers
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
fiatcode/site!8
No description provided.