Calendar sidebar: mini month as its own sub-card (no scroll overlap), title click = today, standard header controls, remove 'Today' item, only area tags

kayg commented

2026-10-01 15:48:28 +00:00

Owner

Owner report + decisions (2026-10-01, Calendar sidebar screenshots)

Bug: scrolling the Calendar sidebar draws the mini month over the following content ("Calendar views", Agenda, Day…). The mini month floats/sticks while the list scrolls under it, and the text overlaps.
The mini month becomes its own sub-card (the shared inner glass card, the same as Settings groups) at the top of the sidebar. It scrolls with the sidebar as one unit (no sticky overlap), or, if it stays pinned, the list scrolls under it with the ProgressiveBlur edge and no overlap. Pick the pinned variant only if it measures well; default to scrolling.
Remove the "Today" sidebar item. Clicking the "October 2026" title navigates to today (the week/day containing today, scroll to now), with the warm tooltip "Go to today" + its shortcut (registry calendar.today).
Standard header controls: the month title and ‹ › are custom today. Use the shared components:
- the title is a UIHeading-styled button (hover/focus state, an Enter/Space activates);
- ‹ › are the shared icon buttons in one PillGroup capsule (the same glass pill and spacing as the top-row history capsule), with tooltips "Previous month" / "Next month" + shortcuts;
- all sized from tokens; the days grid aligns to the card's inner padding.
Tags section: only area tags (#area/...) appear in the Calendar sidebar (they are the calendars, DESIGN §46), shown by leaf name ("croit", "selfcare") with the area colour. Other tags live in search and the Tags view, not here.
Tests: e2e: scroll the sidebar → no element overlaps another (a bounding-box check); clicking the title goes to today; ‹ › change the month; only area tags are listed. Screenshots at 390/1440, both themes.

## Owner report + decisions (2026-10-01, Calendar sidebar screenshots) 1. **Bug:** scrolling the Calendar sidebar draws the mini month **over** the following content ("Calendar views", Agenda, Day…). The mini month floats/sticks while the list scrolls under it, and the text overlaps. 2. **The mini month becomes its own sub-card** (the shared inner glass card, the same as Settings groups) at the top of the sidebar. It scrolls with the sidebar as one unit (no sticky overlap), or, if it stays pinned, the list scrolls **under** it with the ProgressiveBlur edge and no overlap. Pick the pinned variant only if it measures well; default to scrolling. 3. **Remove the "Today" sidebar item.** Clicking the **"October 2026" title** navigates to today (the week/day containing today, scroll to now), with the warm tooltip "Go to today" + its shortcut (registry `calendar.today`). 4. **Standard header controls:** the month title and ‹ › are custom today. Use the shared components: - the title is a `UIHeading`-styled **button** (hover/focus state, an Enter/Space activates); - ‹ › are the shared **icon buttons in one PillGroup capsule** (the same glass pill and spacing as the top-row history capsule), with tooltips "Previous month" / "Next month" + shortcuts; - all sized from tokens; the days grid aligns to the card's inner padding. 5. **Tags section: only area tags** (`#area/...`) appear in the Calendar sidebar (they are the calendars, DESIGN §46), shown by leaf name ("croit", "selfcare") with the area colour. Other tags live in search and the Tags view, not here. **Tests:** e2e: scroll the sidebar → no element overlaps another (a bounding-box check); clicking the title goes to today; ‹ › change the month; only area tags are listed. Screenshots at 390/1440, both themes.

calendar-sidebar-638-390-light.png

90 KiB

calendar-sidebar-638-390-dark.png

99 KiB

calendar-sidebar-638-820-light.png

483 KiB

calendar-sidebar-638-820-dark.png

480 KiB

calendar-sidebar-638-1440-light.png

539 KiB

calendar-sidebar-638-1440-dark.png

426 KiB

calendar-sidebar-638-820-dark-shortcut-mac.png

486 KiB

calendar-sidebar-638-820-light-fresh-mac.png

462 KiB

calendar-sidebar-638-390-light.png

91 KiB

calendar-sidebar-638-390-dark.png

93 KiB

calendar-sidebar-638-820-light.png

460 KiB

calendar-sidebar-638-820-dark.png

480 KiB

calendar-sidebar-638-1440-light.png

527 KiB

calendar-sidebar-638-1440-dark.png

426 KiB

calendar-sidebar-638-820-light-scrolled-mac.png

460 KiB

calendar-sidebar-638-820-light-shortcut-mac.png

464 KiB

calendar-sidebar-638-1440-dark-fresh-mac.png

428 KiB

calendar-sidebar-638-1440-dark-scrolled-mac.png

425 KiB

calendar-sidebar-638-1440-dark-shortcut-mac.png

430 KiB

calendar-sidebar-638-1440-light-fresh-mac.png

528 KiB

calendar-sidebar-638-390-light-fresh-mac.png

109 KiB

calendar-sidebar-638-1440-light-scrolled-mac.png

526 KiB

calendar-sidebar-638-1440-light-shortcut-mac.png

531 KiB

calendar-sidebar-638-390-dark-fresh-mac.png

112 KiB

calendar-sidebar-638-390-dark-scrolled-mac.png

109 KiB

calendar-sidebar-638-390-light-scrolled-mac.png

105 KiB

calendar-sidebar-638-820-dark-fresh-mac.png

483 KiB

calendar-sidebar-638-820-dark-scrolled-mac.png

480 KiB

kayg commented

2026-10-02 02:15:26 +00:00

Author

Owner

Started work on job/calsidebar-638, based on 3f258302a0f2d6418ff60c9ce22cbb33e008ca99. I have read CLAUDE.md, CONTEXT.md, docs/DESIGN.md and issue #638. I am tracing the Calendar sidebar layout and existing shared controls before editing.

Started work on `job/calsidebar-638`, based on `3f258302a0f2d6418ff60c9ce22cbb33e008ca99`. I have read `CLAUDE.md`, `CONTEXT.md`, `docs/DESIGN.md` and issue #638. I am tracing the Calendar sidebar layout and existing shared controls before editing.

kayg commented

2026-10-02 02:18:49 +00:00

Author

Owner

Finding from source trace: app-sidebar.svelte wraps MiniMonth in .sidebar-priority { position: sticky; top: 0; z-index: 1; }, while the wrapper is transparent. That pins the month over the scrolling Calendar rows without a painted surface or blur edge. The same Calendar branch renders TODAY_NAVIGATION and passes every tag to tagTree; MiniMonth.svelte uses a plain title span and ungrouped arrow buttons. I will reproduce the overlap in the production build before changing these paths.

Finding from source trace: `app-sidebar.svelte` wraps MiniMonth in `.sidebar-priority { position: sticky; top: 0; z-index: 1; }`, while the wrapper is transparent. That pins the month over the scrolling Calendar rows without a painted surface or blur edge. The same Calendar branch renders `TODAY_NAVIGATION` and passes every tag to `tagTree`; `MiniMonth.svelte` uses a plain title span and ungrouped arrow buttons. I will reproduce the overlap in the production build before changing these paths.

kayg commented

2026-10-02 02:54:39 +00:00

Author

Owner

Production-build regression reproduced at 390 px in Light mode. After scrolling the sidebar 120 px, the sticky month wrapper measured y=63.2–311.6 while the Calendar views section measured y=191.6–416.5; the bounding boxes overlap. This confirms the reported sticky overlap on the real local server. The test now proceeds to the remaining acceptance checks after the layout fix.

kayg commented

2026-10-02 03:23:14 +00:00

Author

Owner

The 390 px production browser run found a second issue in the shared Today action. The page published and invoked jumpToday with the Week grid mounted. After the horizontal jump, .tg-body.scrollTop stayed at 352 px; the now line was at y=51 px while the grid viewport began at y=128 px. With now=321 minutes and a 51 px hour token, the requested vertical target was about 95 px. The diagonal smooth scroll retained its old vertical offset, so I am separating the date and time scrolls in the shared action.

The 390 px production browser run found a second issue in the shared Today action. The page published and invoked `jumpToday` with the Week grid mounted. After the horizontal jump, `.tg-body.scrollTop` stayed at 352 px; the now line was at y=51 px while the grid viewport began at y=128 px. With `now=321` minutes and a 51 px hour token, the requested vertical target was about 95 px. The diagonal smooth scroll retained its old vertical offset, so I am separating the date and time scrolls in the shared action.

kayg commented

2026-10-02 04:05:25 +00:00

Author

Owner

Completed Forgejo #638 on branch job/calsidebar-638.

Head SHA: f457ece985
Issue commits: 3b38aa90c, 9f39e96cc, f91f31c4b. The final commit merges origin/dev at c4a61e8cf.

Built

The Calendar MiniMonth now sits in an inner glass Card in normal sidebar scroll flow. Removed the Today row.
The month title is a keyboard-operable UIHeading button with the warm Go to today tooltip and shortcut. Day and Week views reuse the page Today action and scroll to now; previous/next month buttons use the shared PillGroup, warm tooltips, and registered shortcuts.
MiniMonth sizing uses Calendar tokens, and its weekday/date columns use the card's inner padding.
Calendar Tags now list only area calendars, show the leaf name and area colour, and retain the full Tag identity.
Added a production E2E regression for scroll overlap, title navigation, month paging, and area-only Tags at 390, 820, and 1440 px in light and dark themes.
Added a local performance profile for the area Tag projection.

Files:

apps/web/e2e/calendar-sidebar-638.mjs
apps/web/src/lib/calendar/sidebarState.svelte.ts
apps/web/src/lib/components/app-sidebar.svelte
apps/web/src/lib/components/tagTree.test.ts
apps/web/src/lib/components/tagTree.ts
apps/web/src/routes/calendar/[view]/[date]/+page.svelte
bench/calendar-sidebar-638.mjs
packages/ui/src/components/calendar/MiniMonth.svelte
packages/ui/src/tokens.css

Decisions

The month Card scrolls with the sidebar, as the default in the issue report says.
A nested area Tag keeps its full Tag as identity and displays only its last path segment.
On Day and Week views, the title uses the page-owned Today action. Other Calendar views use the existing date-pick behavior because they do not have a time grid to scroll.
A production E2E run showed the combined date-and-time smooth scroll could retain the old vertical position (now line y=51 while the viewport began at y=128). The Today action now starts the date scroll, then starts the time scroll on the next animation frame.

Validation

Browser plugin was not available, so I used the repository Playwright E2E harness against a production web build and the rebuilt local calternal-server. Screenshots are attached below for orchestrator visual review. No Rust source was changed for #638, so Rust fmt, clippy, and test gates were not run; the server was rebuilt for local validation.

bun run check — exit 0:

$ node scripts/check-user-storage.mjs && node scripts/check-type-tokens.mjs && node scripts/check-motion-tokens.mjs && svelte-kit sync && svelte-check --tsconfig ./tsconfig.json
User browser caches use userStorage; only documented device/public-link exceptions remain.
Text sizes and UI shape values use shared role tokens.
UI transitions and animation options use shared motion tokens or documented exceptions.
Loading svelte-check in workspace: /home/kayg/Developer/calternal-wt/calsidebar-638/apps/web
Getting Svelte diagnostics...

svelte-check found 0 errors and 0 warnings

bun run test — exit 0, result lines verbatim:

$ vitest run

 RUN  v5.0.1 /home/kayg/Developer/calternal-wt/calsidebar-638/apps/web

 Test Files  153 passed (153)
      Tests  1054 passed (1054)
   Start at  05:44:09
   Duration  94.19s (transform 49%, environment 20%, import 16%, tests 11%, setup 4%)

Environment  |component| jsdom was created 48 times · 98.83s total, 28% of tracked time
             create it once per worker with pool: 'vmThreads' (keeps per-file isolation) or isolate: false (shares it across files)
             learn more: https://vitest.dev/guide/improving-performance#test-environments

The suite also emitted its existing jsdom warnings: “Not implemented: Window's scrollTo() method” and “Could not parse CSS stylesheet”; the command exited 0.

Production E2E output:

SCREENSHOT calendar-sidebar-638-390-light.png
SCREENSHOT calendar-sidebar-638-390-dark.png
SCREENSHOT calendar-sidebar-638-820-light.png
SCREENSHOT calendar-sidebar-638-820-dark.png
SCREENSHOT calendar-sidebar-638-1440-light.png
SCREENSHOT calendar-sidebar-638-1440-dark.png
PASS Calendar sidebar #638: production screenshots at 390, 820, 1440 px, light and dark, in /home/kayg/Developer/calternal-wt/calsidebar-638/artifacts/calendar-sidebar-638

One bounded real-server adversarial round passed:

Journal reconcile burst: n=20 p50=72.1 ms p95=75.3 ms
Calendar probe: Event tag Unicode/bidi and 65536-byte input; #536 drag preferences and timed Task hostile/auth/concurrent writes; Journal burst and 24 parallel tag/range/search reads; Calendar/Notes/Files Server-Timing passed

The local server build completed with exit 0: Finished dev profile, target(s) in 6m 42s.

Performance

Local pure Tag projection profile (not the perf VM):

Typical, 64 total / 8 area Tags, 100,000 calls: p50 0.003821 ms, p95 0.007712 ms; CPU 436.989 ms / 87.8%; RSS growth 15,585,280 bytes.
Large, 2,000 total / 80 area Tags, 10,000 calls: p50 0.098419 ms, p95 0.178504 ms; CPU 884.526 ms / 80.4%; RSS growth 2,228,224 bytes.
Burst, 5,000 total / 256 area Tags, 5,000 calls: p50 0.354573 ms, p95 0.577708 ms; CPU 1,195.158 ms / 64.3%; RSS growth 4,718,592 bytes.

The existing docs/perf/baseline.json calendar.tags API baseline is p50 1.2 ms / p95 2.4 ms. This is an API measurement and is only contextual; it does not measure the local projection helper.

Known gaps

The orchestrator visual review is pending. The six final-build screenshots are attached here. No API endpoint was added by #638.

cargo clean: Removed 7250 files, 5.1GiB total

Production screenshots

390 px, light and dark:

820 px, light and dark:

1440 px, light and dark:

Completed Forgejo #638 on branch job/calsidebar-638. Head SHA: f457ece9857beb99653171aee07b3554a4fc8e2f Issue commits: 3b38aa90c, 9f39e96cc, f91f31c4b. The final commit merges origin/dev at c4a61e8cf. ## Built - The Calendar MiniMonth now sits in an inner glass Card in normal sidebar scroll flow. Removed the Today row. - The month title is a keyboard-operable UIHeading button with the warm Go to today tooltip and shortcut. Day and Week views reuse the page Today action and scroll to now; previous/next month buttons use the shared PillGroup, warm tooltips, and registered shortcuts. - MiniMonth sizing uses Calendar tokens, and its weekday/date columns use the card's inner padding. - Calendar Tags now list only area calendars, show the leaf name and area colour, and retain the full Tag identity. - Added a production E2E regression for scroll overlap, title navigation, month paging, and area-only Tags at 390, 820, and 1440 px in light and dark themes. - Added a local performance profile for the area Tag projection. Files: - apps/web/e2e/calendar-sidebar-638.mjs - apps/web/src/lib/calendar/sidebarState.svelte.ts - apps/web/src/lib/components/app-sidebar.svelte - apps/web/src/lib/components/tagTree.test.ts - apps/web/src/lib/components/tagTree.ts - apps/web/src/routes/calendar/[view]/[date]/+page.svelte - bench/calendar-sidebar-638.mjs - packages/ui/src/components/calendar/MiniMonth.svelte - packages/ui/src/tokens.css ## Decisions - The month Card scrolls with the sidebar, as the default in the issue report says. - A nested area Tag keeps its full Tag as identity and displays only its last path segment. - On Day and Week views, the title uses the page-owned Today action. Other Calendar views use the existing date-pick behavior because they do not have a time grid to scroll. - A production E2E run showed the combined date-and-time smooth scroll could retain the old vertical position (now line y=51 while the viewport began at y=128). The Today action now starts the date scroll, then starts the time scroll on the next animation frame. ## Validation Browser plugin was not available, so I used the repository Playwright E2E harness against a production web build and the rebuilt local calternal-server. Screenshots are attached below for orchestrator visual review. No Rust source was changed for #638, so Rust fmt, clippy, and test gates were not run; the server was rebuilt for local validation. bun run check — exit 0: ~~~text $ node scripts/check-user-storage.mjs && node scripts/check-type-tokens.mjs && node scripts/check-motion-tokens.mjs && svelte-kit sync && svelte-check --tsconfig ./tsconfig.json User browser caches use userStorage; only documented device/public-link exceptions remain. Text sizes and UI shape values use shared role tokens. UI transitions and animation options use shared motion tokens or documented exceptions. Loading svelte-check in workspace: /home/kayg/Developer/calternal-wt/calsidebar-638/apps/web Getting Svelte diagnostics... svelte-check found 0 errors and 0 warnings ~~~ bun run test — exit 0, result lines verbatim: ~~~text $ vitest run RUN v5.0.1 /home/kayg/Developer/calternal-wt/calsidebar-638/apps/web Test Files 153 passed (153) Tests 1054 passed (1054) Start at 05:44:09 Duration 94.19s (transform 49%, environment 20%, import 16%, tests 11%, setup 4%) Environment |component| jsdom was created 48 times · 98.83s total, 28% of tracked time create it once per worker with pool: 'vmThreads' (keeps per-file isolation) or isolate: false (shares it across files) learn more: https://vitest.dev/guide/improving-performance#test-environments ~~~ The suite also emitted its existing jsdom warnings: “Not implemented: Window's scrollTo() method” and “Could not parse CSS stylesheet”; the command exited 0. Production E2E output: ~~~text SCREENSHOT calendar-sidebar-638-390-light.png SCREENSHOT calendar-sidebar-638-390-dark.png SCREENSHOT calendar-sidebar-638-820-light.png SCREENSHOT calendar-sidebar-638-820-dark.png SCREENSHOT calendar-sidebar-638-1440-light.png SCREENSHOT calendar-sidebar-638-1440-dark.png PASS Calendar sidebar #638: production screenshots at 390, 820, 1440 px, light and dark, in /home/kayg/Developer/calternal-wt/calsidebar-638/artifacts/calendar-sidebar-638 ~~~ One bounded real-server adversarial round passed: ~~~text Journal reconcile burst: n=20 p50=72.1 ms p95=75.3 ms Calendar probe: Event tag Unicode/bidi and 65536-byte input; #536 drag preferences and timed Task hostile/auth/concurrent writes; Journal burst and 24 parallel tag/range/search reads; Calendar/Notes/Files Server-Timing passed ~~~ The local server build completed with exit 0: Finished dev profile, target(s) in 6m 42s. ## Performance Local pure Tag projection profile (not the perf VM): - Typical, 64 total / 8 area Tags, 100,000 calls: p50 0.003821 ms, p95 0.007712 ms; CPU 436.989 ms / 87.8%; RSS growth 15,585,280 bytes. - Large, 2,000 total / 80 area Tags, 10,000 calls: p50 0.098419 ms, p95 0.178504 ms; CPU 884.526 ms / 80.4%; RSS growth 2,228,224 bytes. - Burst, 5,000 total / 256 area Tags, 5,000 calls: p50 0.354573 ms, p95 0.577708 ms; CPU 1,195.158 ms / 64.3%; RSS growth 4,718,592 bytes. The existing docs/perf/baseline.json calendar.tags API baseline is p50 1.2 ms / p95 2.4 ms. This is an API measurement and is only contextual; it does not measure the local projection helper. ## Known gaps The orchestrator visual review is pending. The six final-build screenshots are attached here. No API endpoint was added by #638. ~~~text cargo clean: Removed 7250 files, 5.1GiB total ~~~ ## Production screenshots 390 px, light and dark: ![Calendar sidebar 390 light](https://git.kayg.org/attachments/99185c59-6b81-4506-af20-54c697965e55) ![Calendar sidebar 390 dark](https://git.kayg.org/attachments/df5441ab-30b9-4229-bd2b-a2d4512feaca) 820 px, light and dark: ![Calendar sidebar 820 light](https://git.kayg.org/attachments/a61f8e66-79fe-46f8-b210-ddd6f444d8a7) ![Calendar sidebar 820 dark](https://git.kayg.org/attachments/3a1f994f-52f0-49c9-a95a-596871590cb1) 1440 px, light and dark: ![Calendar sidebar 1440 light](https://git.kayg.org/attachments/7f7c0677-b4f8-4585-96ba-d5cc979f9936) ![Calendar sidebar 1440 dark](https://git.kayg.org/attachments/659a105d-3ae8-4763-9ca8-7dc7618ec686)

kayg commented

2026-10-02 12:22:12 +00:00

Author

Owner

Starting round 2 on job/calsidebar-638, based on origin/dev at c4a61e8cf090170f35b1bed3350d9de20c83ecd5. I am reproducing the remaining mini month clipping and week-start mismatch against the production app before changing the sidebar or date helper.

Starting round 2 on `job/calsidebar-638`, based on `origin/dev` at `c4a61e8cf090170f35b1bed3350d9de20c83ecd5`. I am reproducing the remaining mini month clipping and week-start mismatch against the production app before changing the sidebar or date helper.

kayg commented

2026-10-02 12:30:06 +00:00

Author

Owner

Finding: the existing screenshot fixture starts at /calendar/week/<today - 40 days> instead of using the shared week-start helper. In the en-GB Playwright context, 2026-10-02 minus 40 days is Sunday 2026-08-23, while weekStartDay() resolves Monday; the sidebar view links already use viewStart(..., firstDay). I will make the regression enter Week through the helper-backed navigation and preserve the exact date carried by a Week deep link, as required by DESIGN §33.

Finding: the existing screenshot fixture starts at `/calendar/week/<today - 40 days>` instead of using the shared week-start helper. In the en-GB Playwright context, 2026-10-02 minus 40 days is Sunday 2026-08-23, while `weekStartDay()` resolves Monday; the sidebar view links already use `viewStart(..., firstDay)`. I will make the regression enter Week through the helper-backed navigation and preserve the exact date carried by a Week deep link, as required by DESIGN §33.

kayg commented

2026-10-02 12:53:01 +00:00

Author

Owner

Finding: the reviewed calendar-sidebar-638-1440-light.png is captured only after the regression sets .sidebar-scroll.scrollTop to 120. In the image, the sidebar controls end above the scroll viewport; the month title has scrolled out of view and the first visible month row starts at the viewport edge. The previous suite has no fresh-state capture. I will add fresh and scrolled screenshots and assert that the scroll viewport remains below the sidebar controls before and after scrolling and viewport changes.

Finding: the reviewed `calendar-sidebar-638-1440-light.png` is captured only after the regression sets `.sidebar-scroll.scrollTop` to 120. In the image, the sidebar controls end above the scroll viewport; the month title has scrolled out of view and the first visible month row starts at the viewport edge. The previous suite has no fresh-state capture. I will add fresh and scrolled screenshots and assert that the scroll viewport remains below the sidebar controls before and after scrolling and viewport changes.

kayg commented

2026-10-02 14:25:52 +00:00

Author

Owner

Finding (UX completeness, DESIGN §35): MiniMonth.svelte gives the month title compact padding but did not opt into the shared touch hit-area helper; the neighboring month arrows already use buttonSize="touch". I added touch-hit to the title and a 390 px regression assertion. The target grows transparently, without changing the painted row.

Finding (UX completeness, DESIGN §35): `MiniMonth.svelte` gives the month title compact padding but did not opt into the shared touch hit-area helper; the neighboring month arrows already use `buttonSize="touch"`. I added `touch-hit` to the title and a 390 px regression assertion. The target grows transparently, without changing the painted row.

kayg commented

2026-10-02 17:25:20 +00:00

Author

Owner

Round 2 complete

Commit: 798dd9aca2d5f1d9f0c00f517ba71acb5e830573 (fix(calendar): align sidebar month and week navigation). The branch is committed; no push, deploy, or merge was done.

What changed

Added a shared 44 px touch target to the MiniMonth title button, which keeps its existing registered Go to today action.
Expanded the real-production E2E to check the sidebar scrollport below its controls, fresh/scrolled state, Week navigation and locale anchor, standard header pager, title pointer/touch/keyboard actions, and macOS shortcut rendering.
Kept MiniMonth in normal sidebar scroll flow. Its title and month arrows are fully visible at rest; scrolling stays inside the region below the fixed controls.
The E2E uses the existing user week-start helper through the sidebar Week link. It preserves explicit date anchors used by deep links.
Hardened the shared E2E theme helper so a timeout does not print request headers, and allowed a longer timeout for the touch-context Appearance write.

Files: packages/ui/src/components/calendar/MiniMonth.svelte, apps/web/e2e/calendar-sidebar-638.mjs, apps/web/e2e/harness.mjs.

UX gaps closed

Month title and arrows are visible below the search/bell/account controls in fresh state at 390, 820, and 1440 px, in both themes.
The sidebar Week link and MiniMonth start on the same locale week day; the Week grid begins at that same anchor.
The compact phone date pager, Go to today action, keyboard activation, and transparent touch target are covered.
Attached both fresh and scrolled states. Desktop and tablet sets also include the rendered macOS Command tooltip.

UX gaps left

The phone browser reported six 404 (Not Found) resource messages at the final console assertion. The sidebar geometry, week-start, pager, tag, and title-action assertions completed and screenshots were captured, but the failed resource URLs were not recorded. This console finding remains to identify.

Decisions

Keep the MiniMonth in normal scroll flow. At rest, its title and arrows remain fully visible; during scrolling, the card may move within the sidebar scrollport, which starts below the controls.
Preserve explicit deep-link date anchors; the regression enters Week through the sidebar link when checking the user's week-start setting.

Gates

bun run check:

$ node scripts/check-user-storage.mjs && node scripts/check-type-tokens.mjs && node scripts/check-motion-tokens.mjs && svelte-kit sync && svelte-check --tsconfig ./tsconfig.json
User browser caches use userStorage; only documented device/public-link exceptions remain.
Text sizes and UI shape values use shared role tokens.
UI transitions and animation options use shared motion tokens or documented exceptions.
Loading svelte-check in workspace: /home/kayg/Developer/calternal-wt/calsidebar-638/apps/web
Getting Svelte diagnostics...

svelte-check found 0 errors and 0 warnings

bun run test:

Test Files  153 passed (153)
      Tests  1054 passed (1054)
   Start at  19:16:32
   Duration  179.61s (transform 58%, import 16%, environment 16%, tests 5%, setup 5%)

Vitest also emitted Not implemented: Window's scrollTo() method and Could not parse CSS stylesheet environment warnings; all tests passed. The production build completed with ✓ built in 6m 38s.

Screenshots

All screenshots use Playwright macOS platform emulation and are attached here.

390 px: light fresh, light scrolled, dark fresh, dark scrolled
820 px: light fresh, light scrolled, light shortcut, dark fresh, dark scrolled, dark shortcut
1440 px: light fresh, light scrolled, light shortcut, dark fresh, dark scrolled, dark shortcut

Mac checks pending: none requested; the Mac VM remains offline, so screenshots use the required macOS platform emulation.

## Round 2 complete Commit: `798dd9aca2d5f1d9f0c00f517ba71acb5e830573` (`fix(calendar): align sidebar month and week navigation`). The branch is committed; no push, deploy, or merge was done. ### What changed - Added a shared 44 px touch target to the MiniMonth title button, which keeps its existing registered Go to today action. - Expanded the real-production E2E to check the sidebar scrollport below its controls, fresh/scrolled state, Week navigation and locale anchor, standard header pager, title pointer/touch/keyboard actions, and macOS shortcut rendering. - Kept MiniMonth in normal sidebar scroll flow. Its title and month arrows are fully visible at rest; scrolling stays inside the region below the fixed controls. - The E2E uses the existing user week-start helper through the sidebar Week link. It preserves explicit date anchors used by deep links. - Hardened the shared E2E theme helper so a timeout does not print request headers, and allowed a longer timeout for the touch-context Appearance write. Files: `packages/ui/src/components/calendar/MiniMonth.svelte`, `apps/web/e2e/calendar-sidebar-638.mjs`, `apps/web/e2e/harness.mjs`. ### UX gaps closed - Month title and arrows are visible below the search/bell/account controls in fresh state at 390, 820, and 1440 px, in both themes. - The sidebar Week link and MiniMonth start on the same locale week day; the Week grid begins at that same anchor. - The compact phone date pager, Go to today action, keyboard activation, and transparent touch target are covered. - Attached both fresh and scrolled states. Desktop and tablet sets also include the rendered macOS Command tooltip. ### UX gaps left - The phone browser reported six `404 (Not Found)` resource messages at the final console assertion. The sidebar geometry, week-start, pager, tag, and title-action assertions completed and screenshots were captured, but the failed resource URLs were not recorded. This console finding remains to identify. ### Decisions - Keep the MiniMonth in normal scroll flow. At rest, its title and arrows remain fully visible; during scrolling, the card may move within the sidebar scrollport, which starts below the controls. - Preserve explicit deep-link date anchors; the regression enters Week through the sidebar link when checking the user's week-start setting. ### Gates `bun run check`: ```text $ node scripts/check-user-storage.mjs && node scripts/check-type-tokens.mjs && node scripts/check-motion-tokens.mjs && svelte-kit sync && svelte-check --tsconfig ./tsconfig.json User browser caches use userStorage; only documented device/public-link exceptions remain. Text sizes and UI shape values use shared role tokens. UI transitions and animation options use shared motion tokens or documented exceptions. Loading svelte-check in workspace: /home/kayg/Developer/calternal-wt/calsidebar-638/apps/web Getting Svelte diagnostics... svelte-check found 0 errors and 0 warnings ``` `bun run test`: ```text Test Files 153 passed (153) Tests 1054 passed (1054) Start at 19:16:32 Duration 179.61s (transform 58%, import 16%, environment 16%, tests 5%, setup 5%) ``` Vitest also emitted `Not implemented: Window's scrollTo() method` and `Could not parse CSS stylesheet` environment warnings; all tests passed. The production build completed with `✓ built in 6m 38s`. ### Screenshots All screenshots use Playwright macOS platform emulation and are attached here. - **390 px:** [light fresh](https://git.kayg.org/attachments/d122fbe9-8de6-479e-87bf-6958147d600a), [light scrolled](https://git.kayg.org/attachments/5196b332-c545-4bcc-b7a7-5b72747d7e3a), [dark fresh](https://git.kayg.org/attachments/20ca9709-52f9-4308-84c7-5e0765b13fc2), [dark scrolled](https://git.kayg.org/attachments/bd1aee5f-37ea-41c6-9b8f-6ade65316e39) - **820 px:** [light fresh](https://git.kayg.org/attachments/8474ee27-f6c6-4965-be51-378a2429091a), [light scrolled](https://git.kayg.org/attachments/da525dcf-5572-4f06-bc18-9231ea1eb207), [light shortcut](https://git.kayg.org/attachments/0443110e-2953-4c37-990d-5d713ba2fcc9), [dark fresh](https://git.kayg.org/attachments/017f1688-d4cf-47ff-b5fd-047dcc1b4f6a), [dark scrolled](https://git.kayg.org/attachments/edd7ab93-16e8-4a06-8ed7-d4053930960b), [dark shortcut](https://git.kayg.org/attachments/20dc297c-98dd-43e9-9109-ec5d677c1e15) - **1440 px:** [light fresh](https://git.kayg.org/attachments/9319937a-c82e-498d-abac-9c2b18389108), [light scrolled](https://git.kayg.org/attachments/201322a2-809e-472d-89e8-aa5dccbb0b00), [light shortcut](https://git.kayg.org/attachments/d1b822e5-04ef-4272-94b7-2ea6a40e004b), [dark fresh](https://git.kayg.org/attachments/30474c81-dcc8-4875-ac0e-d347ffdb834b), [dark scrolled](https://git.kayg.org/attachments/25887d7b-7b39-453c-a401-6e6853dcd3ef), [dark shortcut](https://git.kayg.org/attachments/44ab4b3b-bb3d-4a80-b250-f0f991da16c1) Mac checks pending: none requested; the Mac VM remains offline, so screenshots use the required macOS platform emulation.

kayg referenced this issue

2026-10-03 12:51:32 +00:00

Issue hygiene sweep 2026-10-03 #1008

Rows
Columns

Calendar sidebar: mini month as its own sub-card (no scroll overlap), title click = today, standard header controls, remove 'Today' item, only area tags #638

Owner report + decisions (2026-10-01, Calendar sidebar screenshots)

Built

Decisions

Validation

Performance

Known gaps

Production screenshots

Round 2 complete

What changed

UX gaps closed

UX gaps left

Decisions

Gates

Screenshots