kayg/calternal

Watch

Fork 0

Calendar Month (390): overflow label wraps to two lines and is clipped #1009

New issue

Open

opened 2026-10-03 12:24:55 +00:00 by kayg · 8 comments

kayg commented

2026-10-03 12:24:55 +00:00

Owner

Found in review (2026-10-03, hover-725 round 3, hover-725-month-390-light-macos.png)

In Month view at 390 px, a day with more items than fit shows its overflow label as "1" on one line and "more" on the next, and the second line is clipped by the cell bottom (Fri 2 Oct). Item chips truncate to 3 letters ("All-…", "Mar…"), which is expected at this width, but the overflow label must never wrap or clip.

Fix

Check first whether dev's 2439a3a44 ("reserve room for overflow pill") already covers this; if not: the overflow pill is one line ("+1" at compact widths, "+1 more" when it fits), reserved in the cell's height budget so it is never clipped, and it opens the shared all-items popover. Screenshots of Month at 390/820/1440 light/dark with a busy day, 3x crops; e2e assertion that the pill is fully inside its cell.

## Found in review (2026-10-03, hover-725 round 3, hover-725-month-390-light-macos.png) In Month view at 390 px, a day with more items than fit shows its overflow label as "1" on one line and "more" on the next, and the second line is clipped by the cell bottom (Fri 2 Oct). Item chips truncate to 3 letters ("All-…", "Mar…"), which is expected at this width, but the overflow label must never wrap or clip. ## Fix Check first whether dev's 2439a3a44 ("reserve room for overflow pill") already covers this; if not: the overflow pill is one line ("+1" at compact widths, "+1 more" when it fits), reserved in the cell's height budget so it is never clipped, and it opens the shared all-items popover. Screenshots of Month at 390/820/1440 light/dark with a busy day, 3x crops; e2e assertion that the pill is fully inside its cell.

calendar-month-overflow-1440-dark-macos.png

518 KiB

calendar-month-overflow-1440-dark-pill-3x.png

10 KiB

calendar-month-overflow-1440-light-macos.png

644 KiB

calendar-month-overflow-1440-light-pill-3x.png

10 KiB

calendar-month-overflow-390-dark-macos.png

979 KiB

calendar-month-overflow-390-dark-pill-3x.png

3.7 KiB

calendar-month-overflow-390-light-macos.png

1,002 KiB

calendar-month-overflow-390-light-pill-3x.png

3.5 KiB

calendar-month-overflow-820-dark-macos.png

1.8 MiB

calendar-month-overflow-820-dark-pill-3x.png

6.8 KiB

calendar-month-overflow-820-light-macos.png

1.8 MiB

calendar-month-overflow-820-light-pill-3x.png

6.9 KiB

kayg commented

2026-10-03 12:44:46 +00:00

Author

Owner

Checked origin/dev d4e7188810. Commit 2439a3a44 changes TimeGrid and GridColumn only; MonthGrid still renders the overflow count inside a cell with overflow hidden, and its more rule has no no-wrap styling. The cited commit does not cover this Month defect. Keep open for a Month-specific fix and regression.

Checked origin/dev d4e7188810a89fb0e8e6b162279917f7e23989f9. Commit 2439a3a44 changes TimeGrid and GridColumn only; MonthGrid still renders the overflow count inside a cell with overflow hidden, and its more rule has no no-wrap styling. The cited commit does not cover this Month defect. Keep open for a Month-specific fix and regression.

kayg referenced this issue

2026-10-03 13:13:42 +00:00

Issue hygiene sweep 2026-10-03 #1008

kayg commented

2026-10-04 03:16:19 +00:00

Author

Owner

Starting #1009 on job/monthpill-1009, based on f2f8491ff5c76ab28f140c964542c97362e6b119 (origin/dev). I am checking the current Month overflow layout, its all-items popover behavior, and the production e2e harness before editing.

Starting #1009 on `job/monthpill-1009`, based on `f2f8491ff5c76ab28f140c964542c97362e6b119` (`origin/dev`). I am checking the current Month overflow layout, its all-items popover behavior, and the production e2e harness before editing.

kayg commented

2026-10-04 03:20:09 +00:00

Author

Owner

The base check is complete: commit 2439a3a44 changes GridColumn.svelte and TimeGrid.svelte only. In MonthGrid.svelte, the overflow button still renders N more in the same row list as three item rows, has no white-space: nowrap, and calls onopenday; there is no all-items popover there. The phone cell has a 104 px minimum, so the wrapped overflow label exceeds its content budget. I will keep the three visible item rows, give the overflow row explicit space in the Month cell budget, and route its click to the same all-items surface used by Day/Week.

The base check is complete: commit `2439a3a44` changes `GridColumn.svelte` and `TimeGrid.svelte` only. In `MonthGrid.svelte`, the overflow button still renders `N more` in the same row list as three item rows, has no `white-space: nowrap`, and calls `onopenday`; there is no all-items popover there. The phone cell has a 104 px minimum, so the wrapped overflow label exceeds its content budget. I will keep the three visible item rows, give the overflow row explicit space in the Month cell budget, and route its click to the same all-items surface used by Day/Week.

kayg commented

2026-10-04 03:27:29 +00:00

Author

Owner

Verification finding: the first bun run check could not start because the worktree has no node_modules and Node could not resolve typescript. I am installing only the versions already pinned in bun.lock with frozen-lockfile mode, then I will rerun the focused web checks.

Verification finding: the first `bun run check` could not start because the worktree has no `node_modules` and Node could not resolve `typescript`. I am installing only the versions already pinned in `bun.lock` with frozen-lockfile mode, then I will rerun the focused web checks.

kayg commented

2026-10-04 03:36:00 +00:00

Author

Owner

Verification finding: bun run test:e2e:calendar-month-overflow-1009 stopped before launching the browser because this host lacks libstdc++.so.6, required by the installed sharp native module. The crop artifacts do not need a native image library, so I am changing the capture helper to use Chromium's screenshot clip and image scaling instead.

Verification finding: `bun run test:e2e:calendar-month-overflow-1009` stopped before launching the browser because this host lacks `libstdc++.so.6`, required by the installed `sharp` native module. The crop artifacts do not need a native image library, so I am changing the capture helper to use Chromium's screenshot clip and image scaling instead.

kayg commented

2026-10-04 03:38:16 +00:00

Author

Owner

The first real-browser layout pass measured the 820 px Month cell at 69.23 px and its pill at 60.23 px. The initial 71 px compact breakpoint therefore hid +1 more even though the pill had room. I am lowering the compact threshold to 64 px; the 390 px cells remain under that threshold.

The first real-browser layout pass measured the 820 px Month cell at 69.23 px and its pill at 60.23 px. The initial 71 px compact breakpoint therefore hid `+1 more` even though the pill had room. I am lowering the compact threshold to 64 px; the 390 px cells remain under that threshold.

kayg commented

2026-10-04 03:43:47 +00:00

Author

Owner

The second browser pass clarified that CSS container queries use the Month cell's content box. Its 69.23 px border box leaves a 60.23 px query width after padding and borders, so a 63 px cutoff still selected compact text. I am setting the compact cutoff to 58 px, leaving a 5 px buffer before the measured +1 more fit at 820 px.

kayg commented

2026-10-04 03:58:15 +00:00

Author

Owner

Status

READY FOR MERGE: yes

Head SHA: 92a0601d3e60509f62acf7f18d199eedaf301d0d

Commit: 92a0601d3 — fix calendar month overflow pill layout

Built

Month overflow stays on one line. Cells show +N at compact widths and +N more when it fits. The overflow row has reserved cell height.
The Month pill opens the shared Calendar all-items popover. Selecting an item opens its normal preview.
Added a production-browser regression with real Tasks, touch and keyboard activation, 390/820/1440 checks in Light and Dark, macOS platform emulation, inside-cell geometry assertions, full screenshots and 3× pill crops.

Files

packages/ui/src/components/calendar/MonthGrid.svelte
packages/ui/src/components/calendar/MoreItemsPopover.svelte
packages/ui/src/components/calendar/TimeGrid.svelte
apps/web/e2e/calendar-month-overflow-1009.mjs
apps/web/package.json

Gate output

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/monthpill-1009/apps/web
Getting Svelte diagnostics...

svelte-check found 0 errors and 0 warnings

Focused Vitest command bunx vitest run src/lib/calendar/MonthGrid.svelte.test.ts src/lib/calendar/TimeGrid.svelte.test.ts --maxWorkers=2:

 Test Files  2 passed (2)
      Tests  17 passed (17)
   Start at  05:45:33
   Duration  9.79s (transform 71%, environment 10%, tests 9%, import 6%, setup 3%)

Production build and server build:

✓ built in 29.61s
  Wrote site to "build"
  ✔ done
    Finished `dev` profile [unoptimized + debuginfo] target(s) in 39.92s

Regression runs:

PASS #1009 Month overflow: 6 macOS production screenshots and 6 3x crops saved in /home/kayg/Developer/calternal-wt/monthpill-1009/artifacts/monthpill-1009
Calendar all-day overflow: 6 production screenshots saved in /home/kayg/Developer/calternal-wt/monthpill-1009/apps/web/artifacts/dup-task

cargo clean:

     Removed 7238 files, 4.6GiB total

No Rust source changed, so Rust format, clippy and test gates were not run. The full web suite is left for the merge round.

Evidence

390 px:

Light: production screenshot, 3× pill crop
Dark: production screenshot, 3× pill crop

820 px:

Light: production screenshot, 3× pill crop
Dark: production screenshot, 3× pill crop

1440 px:

Light: production screenshot, 3× pill crop
Dark: production screenshot, 3× pill crop

UX gaps closed

The overflow text no longer wraps or clips. Touch, Enter and Escape work; selecting a listed Task opens its normal preview. The pill stays inside its cell. No issue-scope UX gaps remain known.

Decisions

DESIGN §29–30 does not set an overflow width or cell height. The compact breakpoint is 58 px of cell content width; the 820 px browser pass measured 60.23 px and fit +1 more.
Month cells use a 130 px desktop minimum and 122 px phone minimum so the date, three item rows and overflow row fit together.
The shared popover title is All items, and it lists the Calendar rows for that date.

For the merge round

cd apps/web && bun run test — run the full Web Vitest suite on the merged branch.

## Status READY FOR MERGE: yes Head SHA: `92a0601d3e60509f62acf7f18d199eedaf301d0d` Commit: `92a0601d3` — fix calendar month overflow pill layout ## Built - Month overflow stays on one line. Cells show `+N` at compact widths and `+N more` when it fits. The overflow row has reserved cell height. - The Month pill opens the shared Calendar all-items popover. Selecting an item opens its normal preview. - Added a production-browser regression with real Tasks, touch and keyboard activation, 390/820/1440 checks in Light and Dark, macOS platform emulation, inside-cell geometry assertions, full screenshots and 3× pill crops. ## Files - `packages/ui/src/components/calendar/MonthGrid.svelte` - `packages/ui/src/components/calendar/MoreItemsPopover.svelte` - `packages/ui/src/components/calendar/TimeGrid.svelte` - `apps/web/e2e/calendar-month-overflow-1009.mjs` - `apps/web/package.json` ## Gate output `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/monthpill-1009/apps/web Getting Svelte diagnostics... svelte-check found 0 errors and 0 warnings ``` Focused Vitest command `bunx vitest run src/lib/calendar/MonthGrid.svelte.test.ts src/lib/calendar/TimeGrid.svelte.test.ts --maxWorkers=2`: ```text Test Files 2 passed (2) Tests 17 passed (17) Start at 05:45:33 Duration 9.79s (transform 71%, environment 10%, tests 9%, import 6%, setup 3%) ``` Production build and server build: ```text ✓ built in 29.61s Wrote site to "build" ✔ done Finished `dev` profile [unoptimized + debuginfo] target(s) in 39.92s ``` Regression runs: ```text PASS #1009 Month overflow: 6 macOS production screenshots and 6 3x crops saved in /home/kayg/Developer/calternal-wt/monthpill-1009/artifacts/monthpill-1009 Calendar all-day overflow: 6 production screenshots saved in /home/kayg/Developer/calternal-wt/monthpill-1009/apps/web/artifacts/dup-task ``` `cargo clean`: ```text Removed 7238 files, 4.6GiB total ``` No Rust source changed, so Rust format, clippy and test gates were not run. The full web suite is left for the merge round. ## Evidence 390 px: - Light: [production screenshot](https://git.kayg.org/attachments/a80fbac3-982e-4a54-abc0-a0c824166756), [3× pill crop](https://git.kayg.org/attachments/a9b8e1ec-875a-47d8-8a65-7b633a936921) - Dark: [production screenshot](https://git.kayg.org/attachments/040b62c0-929f-4613-b249-b006cafba702), [3× pill crop](https://git.kayg.org/attachments/a20a7918-541d-45b6-b740-2db60873a2e1) 820 px: - Light: [production screenshot](https://git.kayg.org/attachments/e87a966a-f10f-4f98-aca8-f9d8cdc862b0), [3× pill crop](https://git.kayg.org/attachments/a9a418ca-42a2-44ba-ae38-45006219b94f) - Dark: [production screenshot](https://git.kayg.org/attachments/7d3d8754-427b-424c-9aa6-d70bdb8f79d2), [3× pill crop](https://git.kayg.org/attachments/d013157c-34b6-4cb5-a56e-afc355389569) 1440 px: - Light: [production screenshot](https://git.kayg.org/attachments/d14af11f-e305-45bc-9cc1-02c58c85c7c1), [3× pill crop](https://git.kayg.org/attachments/0d2831b3-cda4-4fd3-a7a8-d5b86faa66fa) - Dark: [production screenshot](https://git.kayg.org/attachments/b7457613-b71f-4a69-b5ad-b9a152c90275), [3× pill crop](https://git.kayg.org/attachments/aa637f39-9d0f-49cf-8404-8dd57025c0f3) ## UX gaps closed The overflow text no longer wraps or clips. Touch, Enter and Escape work; selecting a listed Task opens its normal preview. The pill stays inside its cell. No issue-scope UX gaps remain known. ## Decisions - DESIGN §29–30 does not set an overflow width or cell height. The compact breakpoint is 58 px of cell content width; the 820 px browser pass measured 60.23 px and fit `+1 more`. - Month cells use a 130 px desktop minimum and 122 px phone minimum so the date, three item rows and overflow row fit together. - The shared popover title is `All items`, and it lists the Calendar rows for that date. ## For the merge round `cd apps/web && bun run test` — run the full Web Vitest suite on the merged branch.

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#1009

No description provided.

Rows
Columns