Calendar Week header: centre day labels over columns; header band uses the app corner radius #508

Closed
opened 2026-09-30 09:53:04 +00:00 by kayg · 9 comments
Owner

Owner report (2026-09-30, two screenshots): Calendar Week header row

"text in the row could also be centered and i don't see a reason why it shouldn't follow our app corner radii?"

  1. Centring: the day labels ("Sun 27", "Mon 28", ... "Wed (30)") sit at the right of each day column. Centre each label (weekday + date, including the today badge) horizontally over its column, and keep the badge vertically centred on the text's cap height (use the shared cap-centred icon/label geometry from #253 if it applies).
  2. Radius: the header row's tinted band has square corners (visible at the right end next to "Sat 3" and where it meets the grid). Use the app's surface radius token for its outer corners (top corners match the grid card; check how the band meets the all-day row and the time grid, so the whole week card reads as one rounded shape). Tokens only; no new literals.
    Check the Day, 3-day and Week views and the all-day row at 390, 820 and 1440 in both themes, with a 3× crop of the header ends. Gates: bun run check, bun run test, and the calendar e2e.
## Owner report (2026-09-30, two screenshots): Calendar Week header row "text in the row could also be centered and i don't see a reason why it shouldn't follow our app corner radii?" 1. **Centring:** the day labels ("Sun 27", "Mon 28", ... "Wed (30)") sit at the right of each day column. Centre each label (weekday + date, including the today badge) horizontally over its column, and keep the badge vertically centred on the text's cap height (use the shared cap-centred icon/label geometry from #253 if it applies). 2. **Radius:** the header row's tinted band has square corners (visible at the right end next to "Sat 3" and where it meets the grid). Use the app's surface radius token for its outer corners (top corners match the grid card; check how the band meets the all-day row and the time grid, so the whole week card reads as one rounded shape). Tokens only; no new literals. Check the Day, 3-day and Week views and the all-day row at 390, 820 and 1440 in both themes, with a 3× crop of the header ends. Gates: `bun run check`, `bun run test`, and the calendar e2e.
Author
Owner

Starting work on job/week-header-508 from dev base 5896bf2bc7. I’m checking the existing calendar header styles, shared optical cap-centering token, and app radius tokens before the fix.

Starting work on job/week-header-508 from dev base 5896bf2bc75b5089ef19df0784103c6d353ac37f. I’m checking the existing calendar header styles, shared optical cap-centering token, and app radius tokens before the fix.
Author
Owner

Finding: packages/ui/src/components/calendar/TimeGrid.svelte currently right-aligns .dayhead and paints .head without a radius; packages/ui/src/tokens.css already defines --radius-surface and .optical-caps. I’ll center the weekday/date group, use the cap helper for the adjacent badge, and round only the outer top edge so the all-day lane and time grid remain flush. The current route model and DESIGN §29 expose Day and Week, not a 3-day view; I’ll verify the supported views across the requested widths and themes without adding a new view.

Finding: packages/ui/src/components/calendar/TimeGrid.svelte currently right-aligns .dayhead and paints .head without a radius; packages/ui/src/tokens.css already defines --radius-surface and .optical-caps. I’ll center the weekday/date group, use the cap helper for the adjacent badge, and round only the outer top edge so the all-day lane and time grid remain flush. The current route model and DESIGN §29 expose Day and Week, not a 3-day view; I’ll verify the supported views across the requested widths and themes without adding a new view.
Author
Owner

The first web check caught a token-rule violation at TimeGrid.svelte:1327: the radius declaration used numeric 0 for its flat lower corners. I replaced those values with the existing --radius-none token.

The first web check caught a token-rule violation at TimeGrid.svelte:1327: the radius declaration used numeric 0 for its flat lower corners. I replaced those values with the existing --radius-none token.
Author
Owner

The type-token check now passes. The next step of bun run check could not find svelte-kit because this worktree has no node_modules; I’m installing the workspace dependencies from the committed bun.lock before continuing.

The type-token check now passes. The next step of bun run check could not find svelte-kit because this worktree has no node_modules; I’m installing the workspace dependencies from the committed bun.lock before continuing.
Author
Owner

Web test finding: bun run test completed with 136 files passed and 1 failed (887 tests passed, 1 failed). The failure is src/lib/calendar/zones.test.ts > createLogEntry sends the instant and the zone of the local day > 00:30 on 2026-09-26 in UTC is 2026-09-26T00:30:00.000Z, which timed out at 5000 ms (line 82). This is outside the Calendar header change; I left the existing expectation unchanged.

Web test finding: bun run test completed with 136 files passed and 1 failed (887 tests passed, 1 failed). The failure is src/lib/calendar/zones.test.ts > createLogEntry sends the instant and the zone of the local day > 00:30 on 2026-09-26 in UTC is 2026-09-26T00:30:00.000Z, which timed out at 5000 ms (line 82). This is outside the Calendar header change; I left the existing expectation unchanged.
Author
Owner

Post-merge bun run test rerun is clean: 137 test files and 888 tests passed. The earlier 5-second timeout in zones.test.ts did not recur. Post-merge bun run check also passed with 0 errors and 0 warnings.

Post-merge bun run test rerun is clean: 137 test files and 888 tests passed. The earlier 5-second timeout in zones.test.ts did not recur. Post-merge bun run check also passed with 0 errors and 0 warnings.
Author
Owner

The full bun run test:e2e:calendar run reached its existing commit-freeze flow and failed at apps/web/e2e/calendar.mjs:514: assert.ok(sentBody, 'the send started'). The request interceptor saw no POST within that flow's wait. This is outside the header change; I left the expectation unchanged. I’m adding a header-only branch to the same production-server e2e so the #508 geometry matrix and screenshots still run independently.

The full bun run test:e2e:calendar run reached its existing commit-freeze flow and failed at apps/web/e2e/calendar.mjs:514: assert.ok(sentBody, 'the send started'). The request interceptor saw no POST within that flow's wait. This is outside the header change; I left the expectation unchanged. I’m adding a header-only branch to the same production-server e2e so the #508 geometry matrix and screenshots still run independently.
Author
Owner

Completed

Centered the Calendar weekday/date group in each day column. The weekday uses the existing optical-caps geometry so the date badge aligns to the weekday cap. Rounded the tinted header at the top with --radius-surface; kept its lower edge flat where it meets the all-day lane and time grid.

Files changed:

  • packages/ui/src/components/calendar/TimeGrid.svelte
  • apps/web/e2e/calendar.mjs

Commits:

  • b0c1a3c2457f5b63ada8fbe65ff651d61b33be87 — center week headers and round band
  • ba91adac281241708cf078bbbf6f0a8a06ce30dc — isolate header geometry evidence

Head: ba91adac281241708cf078bbbf6f0a8a06ce30dc

Gates

bun run check — passed:

$ node scripts/check-type-tokens.mjs && svelte-kit sync && svelte-check --tsconfig ./tsconfig.json
Text and shape values use shared role tokens.
Loading svelte-check in workspace: /home/kayg/Developer/calternal-wt/week-header-508/apps/web
Getting Svelte diagnostics...

svelte-check found 0 errors and 0 warnings

bun run test — passed:

Test Files  137 passed (137)
Tests  888 passed (888)
Start at  13:17:42
Duration  307.09s (transform 60%, environment 15%, import 13%, tests 9%, setup 3%)

Focused production header e2e — passed for Day and Week at 390, 820 and 1440 px, in light and dark themes, with touch emulation at phone and tablet widths:

calendar header e2e: all geometry checks passed

Full bun run test:e2e:calendar — stopped at the existing composer send-flow assertion before reaching the final header matrix:

AssertionError [ERR_ASSERTION]: the send started
    at .../apps/web/e2e/calendar.mjs:514:10
actual: null,
expected: true,
operator: '=='

The existing calendar_grid performance profile was run locally once. It did not reach tracing: after seeding the 200-entry/100-photo workload, the receipt-1.jpg upload returned HTTP 503. No performance result was produced, so there are no comparable measurements to report against docs/perf/baseline.json.

cargo clean completed:

Removed 7067 files, 4.4GiB total

Screenshots

All 24 screenshots are attached. Each view includes full viewport images at 390, 820 and 1440 px in light and dark themes, plus matching 3× header crops.

Day full view

1440-dark · 1440-light · 390-dark · 390-light · 820-dark · 820-light

Week full view

1440-dark · 1440-light · 390-dark · 390-light · 820-dark · 820-light

Day 3× header crops

1440-dark · 1440-light · 390-dark · 390-light · 820-dark · 820-light

Week 3× header crops

1440-dark · 1440-light · 390-dark · 390-light · 820-dark · 820-light

Gaps and decisions

  • docs/DESIGN.md §29 defines Day and Week Calendar views; there is no 3-day view to check.
  • The existing optical-caps token geometry applies to the weekday/date badge pair. The IconLabel component is not used for this text-and-badge header.
  • Only the outer top corners use the surface radius. A flat lower edge keeps the header, all-day lane and time grid visually joined.
  • The existing calendar_grid profile covers this grid hot path, so no second profile was added for this CSS-only adjustment. Its local run failed during fixture ingestion as noted above.
  • The full Calendar e2e remains blocked by the send-flow assertion above; the focused production header matrix passed.
## Completed Centered the Calendar weekday/date group in each day column. The weekday uses the existing `optical-caps` geometry so the date badge aligns to the weekday cap. Rounded the tinted header at the top with `--radius-surface`; kept its lower edge flat where it meets the all-day lane and time grid. Files changed: - `packages/ui/src/components/calendar/TimeGrid.svelte` - `apps/web/e2e/calendar.mjs` Commits: - `b0c1a3c2457f5b63ada8fbe65ff651d61b33be87` — center week headers and round band - `ba91adac281241708cf078bbbf6f0a8a06ce30dc` — isolate header geometry evidence Head: `ba91adac281241708cf078bbbf6f0a8a06ce30dc` ## Gates `bun run check` — passed: ```text $ node scripts/check-type-tokens.mjs && svelte-kit sync && svelte-check --tsconfig ./tsconfig.json Text and shape values use shared role tokens. Loading svelte-check in workspace: /home/kayg/Developer/calternal-wt/week-header-508/apps/web Getting Svelte diagnostics... svelte-check found 0 errors and 0 warnings ``` `bun run test` — passed: ```text Test Files 137 passed (137) Tests 888 passed (888) Start at 13:17:42 Duration 307.09s (transform 60%, environment 15%, import 13%, tests 9%, setup 3%) ``` Focused production header e2e — passed for Day and Week at 390, 820 and 1440 px, in light and dark themes, with touch emulation at phone and tablet widths: ```text calendar header e2e: all geometry checks passed ``` Full `bun run test:e2e:calendar` — stopped at the existing composer send-flow assertion before reaching the final header matrix: ```text AssertionError [ERR_ASSERTION]: the send started at .../apps/web/e2e/calendar.mjs:514:10 actual: null, expected: true, operator: '==' ``` The existing `calendar_grid` performance profile was run locally once. It did not reach tracing: after seeding the 200-entry/100-photo workload, the `receipt-1.jpg` upload returned HTTP 503. No performance result was produced, so there are no comparable measurements to report against `docs/perf/baseline.json`. `cargo clean` completed: ```text Removed 7067 files, 4.4GiB total ``` ## Screenshots All 24 screenshots are attached. Each view includes full viewport images at 390, 820 and 1440 px in light and dark themes, plus matching 3× header crops. ### Day full view [1440-dark](https://git.kayg.org/attachments/93b2898f-17f7-4a83-a9be-ede1169ddbb3) · [1440-light](https://git.kayg.org/attachments/c2b9f0c8-30fd-4da7-8f26-820354dddc3e) · [390-dark](https://git.kayg.org/attachments/1ea4738e-ecca-44bf-86fc-a5cc43c51a2f) · [390-light](https://git.kayg.org/attachments/5a7acc03-8571-4d5f-93b6-46138f9f5038) · [820-dark](https://git.kayg.org/attachments/c2f5524d-9d62-43d4-a04b-2322aa38c674) · [820-light](https://git.kayg.org/attachments/77083c8f-65ae-4542-8668-1f7c380dbd92) ### Week full view [1440-dark](https://git.kayg.org/attachments/6809997d-1757-4a4b-8a03-a7c837732bcc) · [1440-light](https://git.kayg.org/attachments/e289f54f-cf9d-4921-8e43-747762fc7e37) · [390-dark](https://git.kayg.org/attachments/bfe0a630-c1e6-4b84-a930-c74469e05662) · [390-light](https://git.kayg.org/attachments/64bbaa9c-73b9-4d5e-a5f0-8940b1d79785) · [820-dark](https://git.kayg.org/attachments/83afbfa8-c29d-4554-94a5-c0709a85a539) · [820-light](https://git.kayg.org/attachments/3e68abda-dbaf-4295-927c-f3a20890daed) ### Day 3× header crops [1440-dark](https://git.kayg.org/attachments/d4bf406c-eacb-49f8-8b3b-91fbb9aa4551) · [1440-light](https://git.kayg.org/attachments/cca229b9-a164-4445-b650-22c81a56b29b) · [390-dark](https://git.kayg.org/attachments/97e98666-f7d9-442a-9bd2-a721973bd074) · [390-light](https://git.kayg.org/attachments/82dd2e73-4390-454c-a299-4d1ae961bb51) · [820-dark](https://git.kayg.org/attachments/aef814aa-6411-4185-9d7c-ff19aae02ad9) · [820-light](https://git.kayg.org/attachments/1aaaa3b4-c976-4e43-96b1-04093ff96e01) ### Week 3× header crops [1440-dark](https://git.kayg.org/attachments/2f2da760-41f2-47e4-969e-dfb424959b2e) · [1440-light](https://git.kayg.org/attachments/af9d902b-fe1c-4e96-9a01-a9d75258627c) · [390-dark](https://git.kayg.org/attachments/89b3eb05-0c69-4ec2-8a39-169d18189a33) · [390-light](https://git.kayg.org/attachments/bc662c0b-0465-4da3-ba13-60a5ff0b2889) · [820-dark](https://git.kayg.org/attachments/2c39c468-cd92-4fef-a059-17e4af2bf9e6) · [820-light](https://git.kayg.org/attachments/5c01fb01-3f05-4457-9bb1-45eaba0e0d3e) ## Gaps and decisions - `docs/DESIGN.md` §29 defines Day and Week Calendar views; there is no 3-day view to check. - The existing `optical-caps` token geometry applies to the weekday/date badge pair. The `IconLabel` component is not used for this text-and-badge header. - Only the outer top corners use the surface radius. A flat lower edge keeps the header, all-day lane and time grid visually joined. - The existing `calendar_grid` profile covers this grid hot path, so no second profile was added for this CSS-only adjustment. Its local run failed during fixture ingestion as noted above. - The full Calendar e2e remains blocked by the send-flow assertion above; the focused production header matrix passed.
Author
Owner

Merged into dev at 2208fbc4b (merged-tree web gates 0 errors, 892/892).

Merged into dev at 2208fbc4b (merged-tree web gates 0 errors, 892/892).
kayg closed this issue 2026-09-30 12:18:49 +00:00
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#508
No description provided.