Calendar Week/Day grid paints empty (DOM correct) with a busy week

kayg commented

2026-10-05 19:55:32 +00:00

Owner

Found while capturing website screenshots (#1143) on 2026-10-06. Build: dev 04afb00, runtime image from deploy/Containerfile.runtime, Playwright Chromium (headless shell and full Chromium), macOS arm64.

Symptom. Calendar Week and Day views paint an empty time grid: the hour labels show, but the day header row, the hour lines, Log entries and events do not paint. Month view and Agenda paint correctly with the same data. The phone Week view is also empty.

The DOM is correct. After load, 46 .block elements are inside the visible .tg-body rectangle with opacity 1, visibility visible, no filter, clip or mask, and elementFromPoint returns the block itself (nothing covers it). A Playwright element screenshot of one block paints it correctly. A viewport screenshot of the same moment shows the blocks missing.

Tried, no change: reduced motion; device scale 1 and 2; forcing .skip-offscreen { content-visibility: visible }; removing the .lane-track transform (translateX(-142875px)); an explicit viewport clip; full Chromium (new headless) instead of the headless shell.

Data at the time: about 150 events from a Radicale CalDAV calendar and 4-8 Log entries per day, so the grid used lod-2 and cram / has-more blocks. The first seed run had fewer items per day, and its Week view painted.

Not checked yet: headed Chrome or Safari with the same data. If it also shows an empty week there, users with busy weeks see a blank Calendar.

Repro: branch site/website, apps/website/shots: bun run image, bun run seed --reset, bun run shots -- calendar-week. The website uses the Month view as the Calendar hero until this is fixed.

Found while capturing website screenshots (#1143) on 2026-10-06. Build: `dev` 04afb00, runtime image from `deploy/Containerfile.runtime`, Playwright Chromium (headless shell and full Chromium), macOS arm64. **Symptom.** Calendar Week and Day views paint an empty time grid: the hour labels show, but the day header row, the hour lines, Log entries and events do not paint. Month view and Agenda paint correctly with the same data. The phone Week view is also empty. **The DOM is correct.** After load, 46 `.block` elements are inside the visible `.tg-body` rectangle with opacity 1, visibility visible, no filter, clip or mask, and `elementFromPoint` returns the block itself (nothing covers it). A Playwright element screenshot of one block paints it correctly. A viewport screenshot of the same moment shows the blocks missing. **Tried, no change:** reduced motion; device scale 1 and 2; forcing `.skip-offscreen { content-visibility: visible }`; removing the `.lane-track` transform (`translateX(-142875px)`); an explicit viewport clip; full Chromium (new headless) instead of the headless shell. **Data at the time:** about 150 events from a Radicale CalDAV calendar and 4-8 Log entries per day, so the grid used `lod-2` and `cram` / `has-more` blocks. The first seed run had fewer items per day, and its Week view painted. **Not checked yet:** headed Chrome or Safari with the same data. If it also shows an empty week there, users with busy weeks see a blank Calendar. Repro: branch `site/website`, `apps/website/shots`: `bun run image`, `bun run seed --reset`, `bun run shots -- calendar-week`. The website uses the Month view as the Calendar hero until this is fixed.

kayg referenced this issue from a commit

2026-10-06 10:13:01 +00:00

website: real screenshots on every page; Month view is the Calendar hero (#1143)

kayg commented

2026-10-06 21:44:59 +00:00

Author

Owner

Confirmed during Calendar bug bash #1214 against a real local production SPA and server, after API-seeding 560 Journal entries for 2026-10-05 through 2026-10-11.

Steps:

Register a local test owner and POST the 560 entries through /api/v1/notes/journal/log/batch.
Open /calendar/week/2026-10-05 with macOS platform and reduced-motion emulation.
Compare 390 px, 820 px and 1440 px screenshots.

Expected: the seeded entries appear in the visible day lanes at all widths.

Actual: at 390 px and 820 px, headers and hour lines paint but no event cards appear. At 1440 px, the event cards appear. The fixture contains 80 timed entries per day, with Unicode and long titles; the sidebar shows 560 entries.

Severity: major. Calendar entries are not visible on phone or tablet widths.

Evidence (1x production screenshots):

/home/kayg/Developer/calternal-wt/bash-calendar/artifacts/bash-calendar/final/week-dense-390-light.png
/home/kayg/Developer/calternal-wt/bash-calendar/artifacts/bash-calendar/final/week-dense-390-dark.png
/home/kayg/Developer/calternal-wt/bash-calendar/artifacts/bash-calendar/final/week-dense-820-light.png
/home/kayg/Developer/calternal-wt/bash-calendar/artifacts/bash-calendar/final/week-dense-820-dark.png
/home/kayg/Developer/calternal-wt/bash-calendar/artifacts/bash-calendar/final/week-dense-1440-light.png
/home/kayg/Developer/calternal-wt/bash-calendar/artifacts/bash-calendar/final/week-dense-1440-dark.png

This reproduces the existing #1162 symptom, so I am adding evidence here rather than opening a duplicate.

Confirmed during Calendar bug bash #1214 against a real local production SPA and server, after API-seeding 560 Journal entries for 2026-10-05 through 2026-10-11. Steps: 1. Register a local test owner and POST the 560 entries through `/api/v1/notes/journal/log/batch`. 2. Open `/calendar/week/2026-10-05` with macOS platform and reduced-motion emulation. 3. Compare 390 px, 820 px and 1440 px screenshots. Expected: the seeded entries appear in the visible day lanes at all widths. Actual: at 390 px and 820 px, headers and hour lines paint but no event cards appear. At 1440 px, the event cards appear. The fixture contains 80 timed entries per day, with Unicode and long titles; the sidebar shows 560 entries. Severity: major. Calendar entries are not visible on phone or tablet widths. Evidence (1x production screenshots): - `/home/kayg/Developer/calternal-wt/bash-calendar/artifacts/bash-calendar/final/week-dense-390-light.png` - `/home/kayg/Developer/calternal-wt/bash-calendar/artifacts/bash-calendar/final/week-dense-390-dark.png` - `/home/kayg/Developer/calternal-wt/bash-calendar/artifacts/bash-calendar/final/week-dense-820-light.png` - `/home/kayg/Developer/calternal-wt/bash-calendar/artifacts/bash-calendar/final/week-dense-820-dark.png` - `/home/kayg/Developer/calternal-wt/bash-calendar/artifacts/bash-calendar/final/week-dense-1440-light.png` - `/home/kayg/Developer/calternal-wt/bash-calendar/artifacts/bash-calendar/final/week-dense-1440-dark.png` This reproduces the existing #1162 symptom, so I am adding evidence here rather than opening a duplicate.

kayg referenced this issue

2026-10-06 21:45:11 +00:00

Bug bash: calendar #1214

kayg referenced this issue

2026-10-06 22:20:33 +00:00

Bug bash: calendar #1214

kayg commented

2026-10-07 07:20:25 +00:00

Author

Owner

Round 2 repro on the production SPA and local server: after seeding 560 Journal rows and 150 Events through the Journal and CalDAV APIs, Week at 390 px has zero .block.plan.event-block nodes in the DOM. The Calendar range API returns all 150 Events. The regression run stops at the missing-card assertion before paint sampling. Evidence: artifacts/bash-calendar/round2-week-matrix/dense-390px-light-missing-event.png and dense-390px-light-missing-event.json. I am tracing whether the missing nodes are caused by app data selection or the shared TimeGrid; the job contract makes shared packages/ui edits out of scope.

Round 2 repro on the production SPA and local server: after seeding 560 Journal rows and 150 Events through the Journal and CalDAV APIs, Week at 390 px has zero `.block.plan.event-block` nodes in the DOM. The Calendar range API returns all 150 Events. The regression run stops at the missing-card assertion before paint sampling. Evidence: `artifacts/bash-calendar/round2-week-matrix/dense-390px-light-missing-event.png` and `dense-390px-light-missing-event.json`. I am tracing whether the missing nodes are caused by app data selection or the shared TimeGrid; the job contract makes shared `packages/ui` edits out of scope.

kayg referenced this issue

2026-10-07 07:20:27 +00:00

Bug bash: calendar #1214

kayg commented

2026-10-07 07:23:53 +00:00

Author

Owner

Correction to my previous Round 2 comment: that assertion ran immediately after the Week grid became ready, before this page's own Calendar range response arrived. Its empty node list is not yet evidence of a rendering defect. I have changed the test to wait for a page-owned range response containing a seeded Event, then inspect the DOM and screenshot. The dense-390px-light-missing-event.* files are a pre-load capture and should not be used as proof of the bug.

Correction to my previous Round 2 comment: that assertion ran immediately after the Week grid became ready, before this page's own Calendar range response arrived. Its empty node list is not yet evidence of a rendering defect. I have changed the test to wait for a page-owned range response containing a seeded Event, then inspect the DOM and screenshot. The `dense-390px-light-missing-event.*` files are a pre-load capture and should not be used as proof of the bug.

kayg referenced this issue

2026-10-07 07:23:54 +00:00

Bug bash: calendar #1214

kayg commented

2026-10-07 07:30:52 +00:00

Author

Owner

Confirmed with the page-owned data loaded: the test waits for a /api/v1/calendar/range response containing a timed Dense Event in 2026-10-05..11, then waits for network idle before reading the Week. At 390 px the date columns report 101–103 items, but .tg .block, .tg .block.plan and .tg .event-block all have count 0. Every rendered .col has skip-offscreen. The shared code sets skipOffscreenContent = !webKit in packages/ui/src/components/calendar/TimeGrid.svelte; packages/ui/src/components/calendar/GridColumn.svelte applies content-visibility: auto to .col.skip-offscreen.

Evidence: artifacts/bash-calendar/round2-week-matrix/dense-390px-light-missing-event.png and dense-390px-light-missing-event.json.

Severity: major. This blocks the Calendar’s timed Week content for a dense week. This job leaves the fix to the shared UI owner because packages/ui is outside the Calendar Tab job's edit scope.

Confirmed with the page-owned data loaded: the test waits for a `/api/v1/calendar/range` response containing a timed Dense Event in 2026-10-05..11, then waits for network idle before reading the Week. At 390 px the date columns report 101–103 items, but `.tg .block`, `.tg .block.plan` and `.tg .event-block` all have count 0. Every rendered `.col` has `skip-offscreen`. The shared code sets `skipOffscreenContent = !webKit` in `packages/ui/src/components/calendar/TimeGrid.svelte`; `packages/ui/src/components/calendar/GridColumn.svelte` applies `content-visibility: auto` to `.col.skip-offscreen`. Evidence: `artifacts/bash-calendar/round2-week-matrix/dense-390px-light-missing-event.png` and `dense-390px-light-missing-event.json`. Severity: major. This blocks the Calendar’s timed Week content for a dense week. This job leaves the fix to the shared UI owner because `packages/ui` is outside the Calendar Tab job's edit scope.

kayg referenced this issue

2026-10-07 07:30:52 +00:00

Bug bash: calendar #1214

kayg referenced this issue

2026-10-07 08:45:54 +00:00

Bug bash: calendar #1214

Rows
Columns

Calendar Week/Day grid paints empty (DOM correct) with a busy week #1162