feat: compact month grid on narrow screens #84

Merged
nalum merged 3 commits from feat/compact-month-grid into main 2026-08-16 12:38:13 +00:00
Owner

Makes the pinned month grid (#50) usable on a phone.

The problem

The calendar view toggle lets a member pin the month grid at any width. On a phone that means seven columns in ~360px, so each chip collapsed to an icon and an ellipsis — the grid lost the very thing it is for.

The change

Below 700px (web) / the 900dp wide breakpoint (Android), the pinned grid goes compact: each day's chips become textless colour bars — the owner's mark symbol then the entry's type glyph on the mark-colour edge. Colour is never the only signal (rule 2): the symbol and glyph carry when the name is gone. Cells hold at most three rows — two bars and a +n when a day has more. The calendar also breaks out past the reading-width column and trims its gutters/gaps so the cells stay roomy. Tapping a day still opens the full day sheet, so no detail is lost. Wide screens and the agenda are unchanged.

The look was settled by prototyping variants in docs/frontend-plan.html; the final behaviour is now folded into the Calendar page description.

Surfaces

  • web — narrow-grid CSS + a small Calendar.tsx render change (owner symbol + hideable text); wider Calendar column via a route data attribute.
  • Android — matching compact CalChip/grid in More.kt.
  • docs — settled spec in the frontend plan.

Stacking

Stacked for fast-forward on feat/calendar-view-toggle (#81). Merge after the rest of the chain: #82 → #79 → #80 → #81 → this.

Verified with make check and by hand against the local deploy.

🤖 Generated with Claude Code

Makes the pinned month grid (#50) usable on a phone. ## The problem The calendar view toggle lets a member pin the month grid at any width. On a phone that means seven columns in ~360px, so each chip collapsed to an icon and an ellipsis — the grid lost the very thing it is for. ## The change Below 700px (web) / the 900dp wide breakpoint (Android), the pinned grid goes **compact**: each day's chips become textless colour bars — the owner's **mark symbol** then the entry's **type glyph** on the mark-colour edge. Colour is never the only signal (rule 2): the symbol and glyph carry when the name is gone. Cells hold at most three rows — two bars and a **+n** when a day has more. The calendar also breaks out past the reading-width column and trims its gutters/gaps so the cells stay roomy. Tapping a day still opens the full day sheet, so no detail is lost. Wide screens and the agenda are unchanged. The look was settled by prototyping variants in `docs/frontend-plan.html`; the final behaviour is now folded into the Calendar page description. ## Surfaces - **web** — narrow-grid CSS + a small `Calendar.tsx` render change (owner symbol + hideable text); wider Calendar column via a route data attribute. - **Android** — matching compact `CalChip`/grid in `More.kt`. - **docs** — settled spec in the frontend plan. ## Stacking Stacked for fast-forward on `feat/calendar-view-toggle` (#81). Merge after the rest of the chain: **#82 → #79 → #80 → #81 → this**. Verified with `make check` and by hand against the local deploy. 🤖 Generated with [Claude Code](https://claude.com/claude-code)
The pinned month grid (#50) is unreadable on a phone: seven columns in
~360px collapse each chip to an icon and an ellipsis. Below 700px the
grid now draws density instead of text — each chip becomes a colour bar
carrying the owner's mark symbol and the entry's type glyph on the
mark-colour edge, three rows at most (two bars and a "+n" past that).
The Calendar page also breaks out past the 60rem reading column and trims
its gutters so the cells stay roomy. The day sheet still opens on tap, so
no detail is lost.
Android parity for the compact grid: a phone showing the pinned month
grid (below the 900dp wide breakpoint) renders textless colour bars — the
owner's mark symbol then the type glyph on the mark-colour edge — capped
at three rows with a "+n" overflow, over trimmed gutters and gaps. The
day timeline still opens on tap.
docs(frontend): record the compact phone month grid
Some checks failed
check / commits (pull_request) Successful in 14s
check / web (pull_request) Successful in 2m19s
android / build (pull_request) Successful in 6m59s
android / report (pull_request) Successful in 3s
check / go (pull_request) Successful in 2m27s
check / report (pull_request) Successful in 3s
check / commits (push) Successful in 8s
tag / tag (push) Has been cancelled
android / report (push) Has been cancelled
check / report (push) Has been cancelled
android / build (push) Has been cancelled
check / go (push) Has been cancelled
check / web (push) Has been cancelled
81e1b2adec
Fold the settled compact-grid behaviour into the Calendar page
description and drop the exploration scaffolding.

Test report

Suite Tests Result Skipped
Unit 1330 ✅ pass 1
Integration 83 ✅ pass —

Coverage: 27.6%

Updated by the check workflow · commit 81e1b2adec

<!-- ci-test-report --> ## Test report | Suite | Tests | Result | Skipped | | --- | --: | --- | --: | | Unit | 1330 | ✅ pass | 1 | | Integration | 83 | ✅ pass | — | **Coverage:** 27.6% <sub>Updated by the check workflow · commit 81e1b2adecaf165c4bb0a78e2b8995d02451ad00</sub>

Android test report

Suite Tests Result Skipped
Unit (debug) 31 ✅ pass 0

Updated by the android workflow · commit 81e1b2adec

<!-- android-test-report --> ## Android test report | Suite | Tests | Result | Skipped | | --- | --: | --- | --: | | Unit (debug) | 31 | ✅ pass | 0 | <sub>Updated by the android workflow · commit 81e1b2adecaf165c4bb0a78e2b8995d02451ad00</sub>
nalum changed target branch from feat/calendar-view-toggle to main 2026-08-16 12:38:07 +00:00
nalum merged commit 81e1b2adec into main 2026-08-16 12:38:13 +00:00
nalum deleted branch feat/compact-month-grid 2026-08-16 12:38:14 +00:00
Sign in to join this conversation.
No reviewers
No milestone
No project
No assignees
2 participants
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
eagraiclainne/app!84
No description provided.