TOAST: more room between the message and its action; slightly larger message text

kayg commented

2026-09-28 08:13:57 +00:00

Owner

Owner (2026-09-28, screenshot of 'Log entry now ends at 2:00 PM · Undo'): 'the toast needs to look prettier, in the sense that there should be more space between the text and the action button. maybe the text needs to be a tiny bit bigger?'

One owner: the shared toast (apps/web/src/lib/components/ToastBody.svelte / AppToaster.svelte); every toast gets the fix.

The message→action gap grows to a clear separation: a token such as --toast-action-gap, roughly 1.5–2× the current gap. Tune it from screenshots. The action button also keeps equal inner padding from the capsule's right edge (optically balanced with the left text padding; the capsule is a pill, so its padding follows the radius).
The message text moves up one step on the rem type scale (e.g. from small/label to body). Use the role tokens from #287 (weights) and #299, never literals. The action label stays one step bolder than the message.
Vertical rhythm: the capsule height grows with the text, and the message and the button label share one cap-centre line (#253).
Check the longest real messages (undo toasts with a title, upload progress, error toasts with Retry) at phone width: wrap to two lines before shrinking the text; the action never wraps.
Reduced motion and the stacking rules (DESIGN: 12 px above the active capsule, peeking older toasts) are unchanged.
Evidence: 2× crops before and after, light and dark, desktop and phone, including a two-line message.
Depends on #287 merging first (the same type-scale tokens).

Owner (2026-09-28, screenshot of 'Log entry now ends at 2:00 PM · Undo'): 'the toast needs to look prettier, in the sense that there should be more space between the text and the action button. maybe the text needs to be a tiny bit bigger?' One owner: the shared toast (`apps/web/src/lib/components/ToastBody.svelte` / `AppToaster.svelte`); every toast gets the fix. - The message→action gap grows to a clear separation: a token such as `--toast-action-gap`, roughly 1.5–2× the current gap. Tune it from screenshots. The action button also keeps equal inner padding from the capsule's right edge (optically balanced with the left text padding; the capsule is a pill, so its padding follows the radius). - The message text moves up one step on the rem type scale (e.g. from small/label to body). Use the role tokens from #287 (weights) and #299, never literals. The action label stays one step bolder than the message. - Vertical rhythm: the capsule height grows with the text, and the message and the button label share one cap-centre line (#253). - Check the longest real messages (undo toasts with a title, upload progress, error toasts with Retry) at phone width: wrap to two lines before shrinking the text; the action never wraps. - Reduced motion and the stacking rules (DESIGN: 12 px above the active capsule, peeking older toasts) are unchanged. Evidence: 2× crops before and after, light and dark, desktop and phone, including a two-line message. Depends on #287 merging first (the same type-scale tokens).

kayg commented

2026-09-28 18:46:16 +00:00

Author

Owner

Starting toast polish on job/toast-polish, based on dev at fba83527f2cccf2334934bb1fd0932be7c0e209b. I am tracing the shared toast component and current role tokens before editing.

Starting toast polish on `job/toast-polish`, based on `dev` at `fba83527f2cccf2334934bb1fd0932be7c0e209b`. I am tracing the shared toast component and current role tokens before editing.

kayg commented

2026-09-28 18:52:54 +00:00

Author

Owner

Finding: the shared .cal-toast flex gap is 4px. Its message font resolves through --type-body-size to --text-dense (13px for a fine pointer and 15px for a coarse pointer), while --text-body is the next existing role (14px and 17px). I am using the existing body role and a 0.5rem toast gap; the action's right inset remains the existing 4px.

Finding: the shared `.cal-toast` flex gap is 4px. Its message font resolves through `--type-body-size` to `--text-dense` (13px for a fine pointer and 15px for a coarse pointer), while `--text-body` is the next existing role (14px and 17px). I am using the existing body role and a 0.5rem toast gap; the action's right inset remains the existing 4px.

kayg commented

2026-09-28 21:43:40 +00:00

Author

Owner

Finding from the production E2E run: bun e2e/popovers.mjs --toast-screenshots ... passed the Calendar and Files Inspector checks, then stopped at the existing Search assertion Search uses the shared clear glass paint (line 144). The runner did not reach the toast checks. I have not changed that expectation; I am isolating the optional toast screenshot path so this job can collect its required evidence.

Finding from the production E2E run: `bun e2e/popovers.mjs --toast-screenshots ...` passed the Calendar and Files Inspector checks, then stopped at the existing Search assertion `Search uses the shared clear glass paint` (line 144). The runner did not reach the toast checks. I have not changed that expectation; I am isolating the optional toast screenshot path so this job can collect its required evidence.

kayg commented

2026-09-28 21:49:55 +00:00

Author

Owner

The second production run captured all 18 requested 2× toast crops, and the plain, long and action toast assertions passed. The runner then failed in its existing stack check: each toast uses the shared glass material (popovers.mjs:376). The screenshot mode will stop after its own toast checks; I am keeping the stack assertion unchanged.

The second production run captured all 18 requested 2× toast crops, and the plain, long and action toast assertions passed. The runner then failed in its existing stack check: `each toast uses the shared glass material` (`popovers.mjs:376`). The screenshot mode will stop after its own toast checks; I am keeping the stack assertion unchanged.

kayg commented

2026-09-28 22:47:29 +00:00

Author

Owner

Completed on job/toast-polish.

Head: c5f15e4e0f9be1a9451e0a92ac5c371d79743338 (also confirmed on origin/job/toast-polish). Merged dev once before final gates; no merge into dev.
Built: AppToaster.svelte now uses a 0.5rem message/action gap, --text-body for message size, and the existing --type-body-weight role token. No type literals were added. The E2E check verifies gap and typography. Added a screenshot mode to the existing popover runner.
Screenshots: production build produced 18 2x crops for plain/action/long toasts at 390/820/1440 in paper and tokyo-night themes. Runner output: PASS toast production screenshots: 18 2x crops saved to /home/kayg/Developer/calternal-wt/toast-polish/artifacts/toast-polish and CSP REPORTS popovers: 0 across 2 pages. Files are in the ignored artifacts/toast-polish/ directory. The installed fj issue comment command has no attachment upload option, so the screenshots could not be attached through the available CLI.

Gates after the dev merge:

cargo fmt --check: no output; exit 0.
cargo clippy --all-targets -- -D warnings: stopped at the four-hour job limit, exit 130. Final output before stop:
```
    Checking itertools v0.10.5
    Checking event-listener-strategy v0.5.4
```
cargo test: not run before the four-hour limit.

bun run check:

$ svelte-kit sync && svelte-check --tsconfig ./tsconfig.json
Loading svelte-check in workspace: /home/kayg/Developer/calternal-wt/toast-polish/apps/web
Getting Svelte diagnostics...

svelte-check found 0 errors and 0 warnings

bun run test: stopped at the four-hour limit, exit 130. Before stop it reported failures in StatRow summary cards (toggles all four cards together and remembers the mode), RangeBar pills and picker (turning pages constructs no new Intl.DateTimeFormat), Settings → Mail account form (keeps provider connection details behind Advanced), and theme menu (reveals the trigger in the sheet scrollport before opening). It also emitted jsdom Window.scrollTo() and CSS parse messages. No test expectations were changed.
cargo clean: Removed 13362 files, 5.2GiB total. Removed apps/web/build and apps/web/.svelte-kit.

Decisions where the design doc was silent: use 0.5rem for the message/action gap and the existing body role token for message size. The toast screenshot files remain local in the ignored artifact directory because the available issue CLI cannot upload attachments.

Known gaps: clippy and the web test suite were interrupted at the job time limit; the workspace Rust test gate was not run. Screenshots were generated but are not attached to this issue.

Completed on `job/toast-polish`. - Head: `c5f15e4e0f9be1a9451e0a92ac5c371d79743338` (also confirmed on `origin/job/toast-polish`). Merged `dev` once before final gates; no merge into `dev`. - Built: `AppToaster.svelte` now uses a `0.5rem` message/action gap, `--text-body` for message size, and the existing `--type-body-weight` role token. No type literals were added. The E2E check verifies gap and typography. Added a screenshot mode to the existing popover runner. - Screenshots: production build produced 18 2x crops for plain/action/long toasts at 390/820/1440 in paper and tokyo-night themes. Runner output: `PASS toast production screenshots: 18 2x crops saved to /home/kayg/Developer/calternal-wt/toast-polish/artifacts/toast-polish` and `CSP REPORTS popovers: 0 across 2 pages`. Files are in the ignored `artifacts/toast-polish/` directory. The installed `fj issue comment` command has no attachment upload option, so the screenshots could not be attached through the available CLI. Gates after the `dev` merge: - `cargo fmt --check`: no output; exit 0. - `cargo clippy --all-targets -- -D warnings`: stopped at the four-hour job limit, exit 130. Final output before stop: ``` Checking itertools v0.10.5 Checking event-listener-strategy v0.5.4 ``` - `cargo test`: not run before the four-hour limit. - `bun run check`: ``` $ svelte-kit sync && svelte-check --tsconfig ./tsconfig.json Loading svelte-check in workspace: /home/kayg/Developer/calternal-wt/toast-polish/apps/web Getting Svelte diagnostics... svelte-check found 0 errors and 0 warnings ``` - `bun run test`: stopped at the four-hour limit, exit 130. Before stop it reported failures in `StatRow summary cards` (`toggles all four cards together and remembers the mode`), `RangeBar pills and picker` (`turning pages constructs no new Intl.DateTimeFormat`), `Settings → Mail account form` (`keeps provider connection details behind Advanced`), and `theme menu` (`reveals the trigger in the sheet scrollport before opening`). It also emitted jsdom `Window.scrollTo()` and CSS parse messages. No test expectations were changed. - `cargo clean`: `Removed 13362 files, 5.2GiB total`. Removed `apps/web/build` and `apps/web/.svelte-kit`. Decisions where the design doc was silent: use `0.5rem` for the message/action gap and the existing body role token for message size. The toast screenshot files remain local in the ignored artifact directory because the available issue CLI cannot upload attachments. Known gaps: clippy and the web test suite were interrupted at the job time limit; the workspace Rust test gate was not run. Screenshots were generated but are not attached to this issue.

kayg referenced this issue

2026-09-29 01:20:36 +00:00

E2E: one shared theme/capture helper — dark screenshots render light across suites #380

kayg referenced this issue from a commit

2026-09-29 01:28:13 +00:00

Merge job/toast-polish (#317: more room between toast message and action; message on the body text role)

kayg referenced this issue

2026-09-29 05:30:41 +00:00

TOAST: accent hairline around the capsule that drains with the dismiss timer (pauses on hover) #405

kayg commented

2026-10-03 11:55:30 +00:00

Author