BUG: Files list breaks in select mode; toasts overlap the phone tab bar

kayg commented

2026-09-27 13:29:03 +00:00

Owner

Found by the orchestrator in the #207 glass-audit captures (production build of dev ~6f31788b). Both pre-date #207.

Files list breaks in select mode (desktop 1440, list view). With select mode on, each row collapses: the name column is followed by a second line with "Folder"/"Plain text", the Modified/Size/Kind columns are empty, and a truncated "To…" appears under each checkbox (the Modified value squeezed into the check column). The header row keeps the old columns, so header and cells no longer align. Expected: the check column is added in front and every other column keeps its place and width; nothing wraps.
Toasts overlap the phone tab bar (390). The toast stack is placed over the bottom tab bar/mode tray (covers the "Calendar" pill) instead of above it; the stacked toasts behind the front one render as blank white pills. Expected: toasts sit above the bottom capsule with the safe-area and capsule height respected, on every screen that has a bottom bar (and move with it when the selection toolbar replaces the tab bar, see #236); stacked toasts show their peeking edge in the shared glass, not blank pills.

Regression coverage: extend apps/web/e2e/layout-sweep.mjs (select mode list alignment: header and cell x-positions match; toast rect does not intersect the bottom bar rect) at 1440 and 390, light and dark. Screenshots before/after.

Found by the orchestrator in the #207 glass-audit captures (production build of dev ~6f31788b). Both pre-date #207. 1. **Files list breaks in select mode (desktop 1440, list view).** With select mode on, each row collapses: the name column is followed by a second line with "Folder"/"Plain text", the Modified/Size/Kind columns are empty, and a truncated "To…" appears under each checkbox (the Modified value squeezed into the check column). The header row keeps the old columns, so header and cells no longer align. Expected: the check column is added in front and every other column keeps its place and width; nothing wraps. 2. **Toasts overlap the phone tab bar (390).** The toast stack is placed over the bottom tab bar/mode tray (covers the "Calendar" pill) instead of above it; the stacked toasts behind the front one render as blank white pills. Expected: toasts sit above the bottom capsule with the safe-area and capsule height respected, on every screen that has a bottom bar (and move with it when the selection toolbar replaces the tab bar, see #236); stacked toasts show their peeking edge in the shared glass, not blank pills. Regression coverage: extend `apps/web/e2e/layout-sweep.mjs` (select mode list alignment: header and cell x-positions match; toast rect does not intersect the bottom bar rect) at 1440 and 390, light and dark. Screenshots before/after.

kayg commented

2026-09-27 13:30:13 +00:00

Author

Owner

Starting #239 on branch job/select-toast, based on 6495aaf7a022f7aa2b0a47625746f5190bc2b55e (current dev). I am tracing the Files select-mode grid and toast docking against DESIGN §§28, 34–35, then I will add the requested layout-sweep checks and capture the 1440/390 light/dark before and after screenshots.

Starting #239 on branch `job/select-toast`, based on `6495aaf7a022f7aa2b0a47625746f5190bc2b55e` (current `dev`). I am tracing the Files select-mode grid and toast docking against DESIGN §§28, 34–35, then I will add the requested layout-sweep checks and capture the 1440/390 light/dark before and after screenshots.

kayg commented

2026-09-27 13:55:44 +00:00

Author

Owner

Baseline finding from the production SPA on the real local server: in select mode at 1440, the measured desktop header-to-cell column offsets are 56, -598, -750 and -806 px. The front toast overlaps the active bottom capsule by 130 px at 1440, and by 122 px (paper) / 78 px (Tokyo Night) at 390. Older toasts use the 85% light / 68% dark scrim paint while the front toast uses the 42% / 44% overlay glass, which makes their exposed edges look opaque. Baseline captures are saved in artifacts/select-toast/before/.

Baseline finding from the production SPA on the real local server: in select mode at 1440, the measured desktop header-to-cell column offsets are 56, -598, -750 and -806 px. The front toast overlaps the active bottom capsule by 130 px at 1440, and by 122 px (paper) / 78 px (Tokyo Night) at 390. Older toasts use the 85% light / 68% dark scrim paint while the front toast uses the 42% / 44% overlay glass, which makes their exposed edges look opaque. Baseline captures are saved in `artifacts/select-toast/before/`.

kayg commented

2026-09-27 14:08:07 +00:00

Author

Owner

Files list root cause is fixed in commit 1bb227830e902c72b468e2a8a2cfcae05b0e54da. Select mode now adds the checkbox track before the icon and moves the desktop header by the same track plus gap. The focused real-server layout sweep passed in light and dark:

SELECT-LIST select-list 1440 paper: [0,-0.0003749999999627107,-0.00037500000007639755,-0.00037500000007639755]
SELECT-LIST select-list 1440 tokyo-night: [0,-0.0003749999999627107,-0.00037500000007639755,-0.00037500000007639755]
checked 0 screens
LAYOUT SWEEP PASSED

The web gates also passed: bun run check reported 0 errors and 0 warnings; bun run test reported 80 files and 585 tests passed.

Files list root cause is fixed in commit `1bb227830e902c72b468e2a8a2cfcae05b0e54da`. Select mode now adds the checkbox track before the icon and moves the desktop header by the same track plus gap. The focused real-server layout sweep passed in light and dark: ``` SELECT-LIST select-list 1440 paper: [0,-0.0003749999999627107,-0.00037500000007639755,-0.00037500000007639755] SELECT-LIST select-list 1440 tokyo-night: [0,-0.0003749999999627107,-0.00037500000007639755,-0.00037500000007639755] checked 0 screens LAYOUT SWEEP PASSED ``` The web gates also passed: `bun run check` reported 0 errors and 0 warnings; `bun run test` reported 80 files and 585 tests passed.

kayg commented

2026-09-27 14:34:31 +00:00

Author

Owner

Toast placement and glass stack are fixed and pushed in a51bc71e (fix(ui): dock toasts above active bottom capsule). The active selection toolbar is measured and wins over the mode tray; Sonner docks 12 px above it and follows its center. When no bottom capsule is visible, the safe-area tray position remains the fallback. Older stack entries now use the same overlay tint as the front toast and keep the one-filter blur budget.

The production layout sweep passed at desktop 1440 and phone 390 in Paper and Tokyo Night. The four measured gaps were 11.9977, 12, 12 and 11.9977 px; center deltas were 0 px. The selected Files list columns remained aligned within 0.001 px. Older toast paint matched the front toast paint in each theme, with no blur.

Web gates:

svelte-check found 0 errors and 0 warnings

Test Files  80 passed (80)
Tests  585 passed (585)

Before and after production screenshots are committed under artifacts/select-toast/{before,after}/ for both widths and themes. The layout sweep waits for the front toast to settle before checking dock geometry; this avoids sampling Sonner's entering transform.

Toast placement and glass stack are fixed and pushed in `a51bc71e` (`fix(ui): dock toasts above active bottom capsule`). The active selection toolbar is measured and wins over the mode tray; Sonner docks 12 px above it and follows its center. When no bottom capsule is visible, the safe-area tray position remains the fallback. Older stack entries now use the same overlay tint as the front toast and keep the one-filter blur budget. The production layout sweep passed at desktop 1440 and phone 390 in Paper and Tokyo Night. The four measured gaps were 11.9977, 12, 12 and 11.9977 px; center deltas were 0 px. The selected Files list columns remained aligned within 0.001 px. Older toast paint matched the front toast paint in each theme, with no blur. Web gates: ``` svelte-check found 0 errors and 0 warnings Test Files 80 passed (80) Tests 585 passed (585) ``` Before and after production screenshots are committed under `artifacts/select-toast/{before,after}/` for both widths and themes. The layout sweep waits for the front toast to settle before checking dock geometry; this avoids sampling Sonner's entering transform.

kayg commented

2026-09-27 15:04:01 +00:00

Author

Owner

Completed on job/select-toast. Final head: bf128d52 (merged current dev into the job branch). The job commits are 1bb22783 (fix(files): align select-mode list columns) and a51bc71e (fix(ui): dock toasts above active bottom capsule). The branch is pushed; no merge into dev or deploy was made.

Built:

Fixed the missing select-mode checkbox/icon grid tracks and aligned the Files header with its cells.
Docked the toast stack 12 px above the visible selection toolbar or mode tray and centered it on that capsule. Kept the safe-area tray position as the fallback when bottom chrome is absent.
Changed older toast peeking edges to use the front toast's shared overlay tint without a second blur.
Updated the production layout/header sweeps and DESIGN §34. The selected-list sweep reports column deltas within 0.001 px. The select-toast sweep passed at 1440 and 390 in Paper and Tokyo Night; measured gaps were 11.9977, 12, 12 and 11.9977 px and center deltas were 0 px.

Before/after production screenshots are committed in artifacts/select-toast/{before,after}/ (four combinations per directory).

Final gates on the merged head:

cargo fmt --check: exit 0, no output.

cargo clippy --all-targets -- -D warnings:

Finished `dev` profile [unoptimized + debuginfo] target(s) in 4m 02s

cargo test: exit 0; all 72 suite summaries were test result: ok; aggregate: 1,252 passed, 0 failed, 12 ignored. The ignored tests are existing model, benchmark or live-app cases. Final doc-test output:

test result: ok. 0 passed; 0 failed; 0 ignored; 0 measured; 0 filtered out; finished in 0.00s

bun run check:

svelte-check found 0 errors and 0 warnings

bun run test:

 Test Files  80 passed (80)
      Tests  585 passed (585)

Vitest also printed its existing jsdom CSS parse and Window.scrollTo() notices; the suite passed.

Decisions made where the design was silent: use a 12 px toast-to-capsule gap; prefer a visible .select-bar, then the mode tray, then the bottom-chrome bounds; use the shared overlay tint for older toast edges. These choices are now recorded in DESIGN §34. No known code gaps remain. Screenshot review remains with the orchestrator per the UI review rule.

Completed on `job/select-toast`. Final head: `bf128d52` (merged current `dev` into the job branch). The job commits are `1bb22783` (`fix(files): align select-mode list columns`) and `a51bc71e` (`fix(ui): dock toasts above active bottom capsule`). The branch is pushed; no merge into `dev` or deploy was made. Built: - Fixed the missing select-mode checkbox/icon grid tracks and aligned the Files header with its cells. - Docked the toast stack 12 px above the visible selection toolbar or mode tray and centered it on that capsule. Kept the safe-area tray position as the fallback when bottom chrome is absent. - Changed older toast peeking edges to use the front toast's shared overlay tint without a second blur. - Updated the production layout/header sweeps and DESIGN §34. The selected-list sweep reports column deltas within 0.001 px. The select-toast sweep passed at 1440 and 390 in Paper and Tokyo Night; measured gaps were 11.9977, 12, 12 and 11.9977 px and center deltas were 0 px. Before/after production screenshots are committed in `artifacts/select-toast/{before,after}/` (four combinations per directory). Final gates on the merged head: `cargo fmt --check`: exit 0, no output. `cargo clippy --all-targets -- -D warnings`: ``` Finished `dev` profile [unoptimized + debuginfo] target(s) in 4m 02s ``` `cargo test`: exit 0; all 72 suite summaries were `test result: ok`; aggregate: 1,252 passed, 0 failed, 12 ignored. The ignored tests are existing model, benchmark or live-app cases. Final doc-test output: ``` test result: ok. 0 passed; 0 failed; 0 ignored; 0 measured; 0 filtered out; finished in 0.00s ``` `bun run check`: ``` svelte-check found 0 errors and 0 warnings ``` `bun run test`: ``` Test Files 80 passed (80) Tests 585 passed (585) ``` Vitest also printed its existing jsdom CSS parse and `Window.scrollTo()` notices; the suite passed. Decisions made where the design was silent: use a 12 px toast-to-capsule gap; prefer a visible `.select-bar`, then the mode tray, then the bottom-chrome bounds; use the shared overlay tint for older toast edges. These choices are now recorded in DESIGN §34. No known code gaps remain. Screenshot review remains with the orchestrator per the UI review rule.

kayg referenced this issue from a commit

2026-09-27 15:07:30 +00:00

Merge job/select-toast (#239, columns + toast docking)

kayg commented

2026-09-27 15:07:30 +00:00

Author

Owner

Merged in 421714eb: select-mode columns fixed; toasts docked above the active capsule. Still open: toast legibility and stack look (see relaunch).

Merged in 421714eb: select-mode columns fixed; toasts docked above the active capsule. Still open: toast legibility and stack look (see relaunch).

kayg commented

2026-09-27 15:08:35 +00:00

Author

Owner

Started #239 work on job/select-toast after merging dev; base SHA 895d34792d. I am retaking the existing real-app toast review captures and adding the requested contrast and stack checks.

Started #239 work on job/select-toast after merging dev; base SHA 895d34792de9cb56e2b31f5272bc50925fdc05b7. I am retaking the existing real-app toast review captures and adding the requested contrast and stack checks.

kayg commented

2026-09-27 15:13:57 +00:00

Author

Owner

Finding: the current stack styles in apps/web/src/lib/components/AppToaster.svelte use the general overlay tint for both front and rear toasts; packages/ui/src/tokens.css sets that role to 42% light / 44% dark. The focused layout sweep checks rear-toast color and height, but not rear width or background-text pixels. This matches the reported unreadable toast text and lets a blank, too-wide rear pill pass.

kayg commented

2026-09-27 15:28:01 +00:00

Author

Owner

Baseline evidence from the real-app sweep: at 390px / Tokyo Night with three toasts, the front toast measured 143px wide and an older toast measured 269.1px (1.88× the front). Its two older-toast tops were 10.9px and 21.8px above the front. I am adding a front-width cap plus 0.94/0.88 scales and assertions for both ratios and peeks.

kayg commented

2026-09-27 15:49:12 +00:00

Author

Owner

Implementation evidence: the production build now uses the shared glass-text-float role (92% surface tint, 24px blur). In the real-app pixel check, all eight 1/3-toast, 1440/390, paper/Tokyo Night cases reduced background text edge contrast to 0.18%–2.85% of uncovered. Three-toast rear widths measured 0.94× and 0.88× the front; their peeks measured 3.7px and 7.4px. I chose a 5px lift per older toast and a 92% tint because they satisfy the requested pixel and contrast checks across the current theme surfaces.

kayg commented

2026-09-27 15:49:23 +00:00

Author

Owner

Correction to my previous measurement range: the eight pixel ratios are 0.334%–2.844% of uncovered. All eight remain below the 30% limit.

kayg commented

2026-09-27 16:29:59 +00:00

Author

Owner

Finding from the required web gate: bun run test reported FAIL ... keeps text inside every glass surface at 4.5:1 ... with AssertionError: latte text-bearing float over #000000 at 0.92: expected false to be true. The 92% shared tint did not keep the toast action accent at 4.5:1 over the darkest backing. I raised the shared glass-text-float alpha to 97% and updated the design and token comments; I am rerunning the web gates now.

Finding from the required web gate: `bun run test` reported `FAIL ... keeps text inside every glass surface at 4.5:1 ...` with `AssertionError: latte text-bearing float over #000000 at 0.92: expected false to be true`. The 92% shared tint did not keep the toast action accent at 4.5:1 over the darkest backing. I raised the shared `glass-text-float` alpha to 97% and updated the design and token comments; I am rerunning the web gates now.

kayg commented

2026-09-27 16:33:03 +00:00

Author

Owner

Follow-up measurement: at 97%, Frappe's saturated backing #4e3853 filtered to #56355d and mixed to #424559, giving its accent text 4.4994:1. This misses 4.5:1 by rounding. The shared role is now 98%; that sample resolves to the theme surface and clears the threshold. I am rerunning the web checks and tests.

Follow-up measurement: at 97%, Frappe's saturated backing `#4e3853` filtered to `#56355d` and mixed to `#424559`, giving its accent text 4.4994:1. This misses 4.5:1 by rounding. The shared role is now 98%; that sample resolves to the theme surface and clears the threshold. I am rerunning the web checks and tests.

kayg commented

2026-09-27 16:39:43 +00:00

Author

Owner

I traced the two contrast failures to the toast action label, not the message copy: the action used accent-coloured text over its own translucent accent wash. I changed that Pill to the existing primary tone, which uses the theme's solid --accent fill with --on-accent text; the shared theme tests already verify that pair at 4.5:1. The glass-text-float role is back at 92%: its ink and muted message text are tested against every mesh point plus black and white backdrops, and the 24px blur removes the underlying glyph detail. I documented the action choice and am rerunning the web gates.

I traced the two contrast failures to the toast action label, not the message copy: the action used accent-coloured text over its own translucent accent wash. I changed that Pill to the existing primary tone, which uses the theme's solid `--accent` fill with `--on-accent` text; the shared theme tests already verify that pair at 4.5:1. The glass-text-float role is back at 92%: its ink and muted message text are tested against every mesh point plus black and white backdrops, and the 24px blur removes the underlying glyph detail. I documented the action choice and am rerunning the web gates.

kayg commented

2026-09-27 16:44:52 +00:00

Author

Owner

The all-theme color sweep found the text-float tint itself also needed to be stronger for secondary copy: at 92%, Frappe muted text measured 4.111:1 over a white backdrop (Solarized muted text was 4.330:1 over black). At 96%, the worst checked ink/muted/control-boundary contrast is 4.632:1. I set the shared token to 96%. The action now uses the primary Pill pair, so its on-accent label does not depend on the glass tint.

kayg commented

2026-09-27 16:57:07 +00:00

Author

Owner

#239 final report

Branch: job/select-toast
Base: dev merged at 5af2ff7830ebf36e13e768adeddea015f3c8b23b
Head: 7c22d401eaebae66aeadd7c2d41c4bb95c702aa3

Built:

Added the shared glass-text-float token: 96% surface tint and 24px blur. Reduced-transparency and no-backdrop-filter modes use an opaque surface. The theme test checks ink and muted text at 4.5:1, plus boundaries at 3:1, across every theme mesh and black/white backing pixels.
Toast actions now use the shared Pill primary tone, so --on-accent text sits on the theme's solid accent fill.
Capped collapsed toast width to the front toast width, reversed Sonner's growth to 0.94/0.88, and lifted older cards 5px per layer. Rear cards keep the same tint without an extra blur.
Added an API-seeded production-build sweep and pixel edge-contrast check. Captures are in artifacts/select-toast/{before,after}/ (one/three toasts, 1440/390, paper/Tokyo Night).

Files: packages/ui/src/tokens.css, apps/web/src/lib/components/AppToaster.svelte, apps/web/src/lib/components/ToastBody.svelte, apps/web/src/lib/themes.test.ts, apps/web/e2e/layout-sweep.mjs, docs/DESIGN.md, and artifacts/select-toast/.

Final gates:

cargo fmt --check: exit 0; no output.
cargo clippy --all-targets -- -D warnings:
Finished dev profile [unoptimized + debuginfo] target(s) in 11m 41s
cargo test: exit 0; 72 test-result summaries, 1,275 passed, 0 failed, 12 ignored. Final output excerpt:
test result: ok. 0 passed; 0 failed; 0 ignored; 0 measured; 0 filtered out; finished in 0.00s
bun run check:
svelte-check found 0 errors and 0 warnings
bun run test:
Test Files 80 passed (80)
Tests 585 passed (585)
bun run build: ✓ built in 1m 23s; adapter wrote the production site to build.
bun e2e/layout-sweep.mjs --only select-toast --screenshots ../../artifacts/select-toast/after: LAYOUT SWEEP PASSED. All eight combinations passed. Highest after pixel-edge ratio was 0.013385190905302156 (1.34% of uncovered; limit 30%). At 3 toasts, widths were 0.94/0.88 of the front toast with 3.68px/7.36px peeks.

Decisions where DESIGN was silent: use 96% tint to keep muted text above 4.5:1 across all tested theme/backdrop colors; use the existing primary Pill role for toast actions. This changes action buttons from a translucent accent wash to the established accent/on-accent pair.

Known review note: the required visual review is pending; the before/after production captures are committed for review. Build output includes existing vendor use client directive warnings; Vitest logs jsdom scrollTo and CSS parser notices, while all tests pass. No Rust failures were reported.

#239 final report Branch: `job/select-toast` Base: dev merged at `5af2ff7830ebf36e13e768adeddea015f3c8b23b` Head: `7c22d401eaebae66aeadd7c2d41c4bb95c702aa3` Built: - Added the shared `glass-text-float` token: 96% surface tint and 24px blur. Reduced-transparency and no-backdrop-filter modes use an opaque surface. The theme test checks ink and muted text at 4.5:1, plus boundaries at 3:1, across every theme mesh and black/white backing pixels. - Toast actions now use the shared Pill primary tone, so `--on-accent` text sits on the theme's solid accent fill. - Capped collapsed toast width to the front toast width, reversed Sonner's growth to 0.94/0.88, and lifted older cards 5px per layer. Rear cards keep the same tint without an extra blur. - Added an API-seeded production-build sweep and pixel edge-contrast check. Captures are in `artifacts/select-toast/{before,after}/` (one/three toasts, 1440/390, paper/Tokyo Night). Files: `packages/ui/src/tokens.css`, `apps/web/src/lib/components/AppToaster.svelte`, `apps/web/src/lib/components/ToastBody.svelte`, `apps/web/src/lib/themes.test.ts`, `apps/web/e2e/layout-sweep.mjs`, `docs/DESIGN.md`, and `artifacts/select-toast/`. Final gates: - `cargo fmt --check`: exit 0; no output. - `cargo clippy --all-targets -- -D warnings`: `Finished `dev` profile [unoptimized + debuginfo] target(s) in 11m 41s` - `cargo test`: exit 0; 72 test-result summaries, 1,275 passed, 0 failed, 12 ignored. Final output excerpt: `test result: ok. 0 passed; 0 failed; 0 ignored; 0 measured; 0 filtered out; finished in 0.00s` - `bun run check`: `svelte-check found 0 errors and 0 warnings` - `bun run test`: `Test Files 80 passed (80)` `Tests 585 passed (585)` - `bun run build`: `✓ built in 1m 23s`; adapter wrote the production site to `build`. - `bun e2e/layout-sweep.mjs --only select-toast --screenshots ../../artifacts/select-toast/after`: `LAYOUT SWEEP PASSED`. All eight combinations passed. Highest after pixel-edge ratio was `0.013385190905302156` (1.34% of uncovered; limit 30%). At 3 toasts, widths were 0.94/0.88 of the front toast with 3.68px/7.36px peeks. Decisions where DESIGN was silent: use 96% tint to keep muted text above 4.5:1 across all tested theme/backdrop colors; use the existing primary Pill role for toast actions. This changes action buttons from a translucent accent wash to the established accent/on-accent pair. Known review note: the required visual review is pending; the before/after production captures are committed for review. Build output includes existing vendor `use client` directive warnings; Vitest logs jsdom `scrollTo` and CSS parser notices, while all tests pass. No Rust failures were reported.

kayg referenced this issue

2026-09-27 16:57:33 +00:00

BUG: menus inside Settings/overlays have no blur (nested backdrop root); two rows highlighted #246

kayg referenced this issue

2026-09-27 16:57:34 +00:00

Phone chrome: sticky sheet handle + progressive-blur section header; contextual bars replace the tab bar #219

kayg commented

2026-09-27 16:57:35 +00:00

Author

Owner

Owner (2026-09-27): 'focus on code reuse please'. The nested-backdrop-root blur bug is ONE root cause across #219 (sheet header), #239 (toasts) and #246 (menus). #246 owns the single shared fix: move apps/web/src/lib/actions/portal.ts into packages/ui, build it into the shared surfaces (OverlaySurface, PopoverSurface, FloatingSurface, menu/, toaster) so every floating surface renders in one top-level layer outside any backdrop-filter ancestor, and move each sheet/overlay's own glass onto a background layer that is not an ancestor of its content (so ProgressiveBlur and nested menus inside a sheet sample the real content). Remove ad-hoc per-component portal uses. #219 and #239 must NOT build their own workaround; they reuse #246. Merge order: #246 first.

kayg commented

2026-09-27 16:59:45 +00:00

Author

Owner

Resuming #239 on job/select-toast after the scope update in #9346. The existing branch was based on dev at 5af2ff7830ebf36e13e768adeddea015f3c8b23b. #246 owns the shared nested-backdrop-root fix; I will remove toast-specific blur/legibility work and keep only the stacked-toast shape fix, using the shared glass role, with the production layout sweep and screenshots.

Resuming #239 on `job/select-toast` after the scope update in #9346. The existing branch was based on dev at `5af2ff7830ebf36e13e768adeddea015f3c8b23b`. #246 owns the shared nested-backdrop-root fix; I will remove toast-specific blur/legibility work and keep only the stacked-toast shape fix, using the shared glass role, with the production layout sweep and screenshots.

kayg referenced this issue

2026-09-27 17:08:52 +00:00

Owner test tracker: every request and when it is testable on o2 #203

kayg commented

2026-09-27 17:14:02 +00:00

Author

Owner

Scope finding from e5a278bb: that commit added glass-text-float to the toaster, a 24 px toast blur role, toast action contrast styling, and pixel contrast checks. I removed those toast-specific blur/legibility changes and restored the existing glass-overlay role. The retained stack behavior caps older toast widths at the measured front width, narrows each rear card, and lifts it to expose a peeking edge. The regression sweep now checks only that stack shape and shared-glass paint.

Scope finding from `e5a278bb`: that commit added `glass-text-float` to the toaster, a 24 px toast blur role, toast action contrast styling, and pixel contrast checks. I removed those toast-specific blur/legibility changes and restored the existing `glass-overlay` role. The retained stack behavior caps older toast widths at the measured front width, narrows each rear card, and lifts it to expose a peeking edge. The regression sweep now checks only that stack shape and shared-glass paint.

kayg commented

2026-09-27 17:52:15 +00:00

Author

Owner

Production captures for the retained stacked-toast shape fix. The sweep covers 1440px and 390px viewports in Paper and Tokyo Night. The rear toasts use the shared glass paint, taper behind the front toast, and remain visibly peeking.

select-toast-3-1440-paper.png

605 KiB

select-toast-3-1440-tokyo-night.png

486 KiB

select-toast-3-390-paper.png

1.1 MiB

select-toast-3-390-tokyo-night.png

1 MiB

kayg commented

2026-09-27 18:09:40 +00:00

Author

Owner

Completed and pushed job/select-toast for #239.

Head SHA: 6d92af87e6f31d3194e9e71ba845a5eac6f6e97b.

Built: kept the stacked-toast shape fix. Rear toasts use the shared glass-overlay role, stay narrower than the front toast, and peek above it. Removed the local toast blur and contrast workaround because #246 owns the shared backdrop fix. Removed the previously tracked review artifacts from the branch tip. Production screenshots are attached to issue comment #9443 (1440px and 390px, Paper and Tokyo Night).

Files changed: apps/web/src/lib/components/AppToaster.svelte, apps/web/src/lib/components/ToastBody.svelte, apps/web/e2e/layout-sweep.mjs, apps/web/src/lib/themes.test.ts, packages/ui/src/tokens.css, docs/DESIGN.md, plus removal of the old tracked files under artifacts/select-toast/.

Gates and verification:

cargo fmt --check: exit 0; no output.

cargo clippy --all-targets -- -D warnings:

Finished `dev` profile [unoptimized + debuginfo] target(s) in 8m 42s

cargo test: exit 0. The 72 test result: summaries aggregate to 1,278 passed, 12 ignored, and 0 failed. The final summary line was:
```
test result: ok. 0 passed; 0 failed; 0 ignored; 0 measured; 0 filtered out; finished in 0.07s
```

bun run check:

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

svelte-check found 0 errors and 0 warnings

bun run test:

 Test Files  81 passed (81)
      Tests  589 passed (589)
   Start at  20:04:36
   Duration  144.23s (transform 68%, import 12%, environment 12%, tests 6%, setup 2%)

Production build: ✓ built in 1m 26s.
Focused production layout sweep: passed for three stacked toasts at 1440px and 390px in Paper and Tokyo Night. Each rear toast used the front toast's shared paint, measured about 0.94/0.88 of its width, and peeked 3.68px/7.36px above it.

Adversarial round after the dev merge:

calendar Event tag probe: Unicode/bidi, 65536-byte category, 7 malformed inputs, and 24 parallel reads passed

Known notes: Vitest logged repeated Not implemented: Window's scrollTo() method notices, but exited 0. The production build logged existing vendor use client directive warnings. The visual reviewer should inspect the attached production captures.

Decisions the design doc leaves open: retained the existing 0.94 then 0.88 rear-width ratios and 5px per-layer vertical lift as the compact stack shape. The doc specifies narrower, peeking rear toasts but does not set numeric values.

Completed and pushed `job/select-toast` for #239. Head SHA: `6d92af87e6f31d3194e9e71ba845a5eac6f6e97b`. Built: kept the stacked-toast shape fix. Rear toasts use the shared `glass-overlay` role, stay narrower than the front toast, and peek above it. Removed the local toast blur and contrast workaround because #246 owns the shared backdrop fix. Removed the previously tracked review artifacts from the branch tip. Production screenshots are attached to issue comment #9443 (1440px and 390px, Paper and Tokyo Night). Files changed: `apps/web/src/lib/components/AppToaster.svelte`, `apps/web/src/lib/components/ToastBody.svelte`, `apps/web/e2e/layout-sweep.mjs`, `apps/web/src/lib/themes.test.ts`, `packages/ui/src/tokens.css`, `docs/DESIGN.md`, plus removal of the old tracked files under `artifacts/select-toast/`. Gates and verification: - `cargo fmt --check`: exit 0; no output. - `cargo clippy --all-targets -- -D warnings`: ``` Finished `dev` profile [unoptimized + debuginfo] target(s) in 8m 42s ``` - `cargo test`: exit 0. The 72 `test result:` summaries aggregate to 1,278 passed, 12 ignored, and 0 failed. The final summary line was: ``` test result: ok. 0 passed; 0 failed; 0 ignored; 0 measured; 0 filtered out; finished in 0.07s ``` - `bun run check`: ``` $ svelte-kit sync && svelte-check --tsconfig ./tsconfig.json Loading svelte-check in workspace: /home/kayg/Developer/calternal-wt/select-toast/apps/web Getting Svelte diagnostics... svelte-check found 0 errors and 0 warnings ``` - `bun run test`: ``` Test Files 81 passed (81) Tests 589 passed (589) Start at 20:04:36 Duration 144.23s (transform 68%, import 12%, environment 12%, tests 6%, setup 2%) ``` - Production build: `✓ built in 1m 26s`. - Focused production layout sweep: passed for three stacked toasts at 1440px and 390px in Paper and Tokyo Night. Each rear toast used the front toast's shared paint, measured about 0.94/0.88 of its width, and peeked 3.68px/7.36px above it. - Adversarial round after the `dev` merge: ``` calendar Event tag probe: Unicode/bidi, 65536-byte category, 7 malformed inputs, and 24 parallel reads passed ``` Known notes: Vitest logged repeated `Not implemented: Window's scrollTo() method` notices, but exited 0. The production build logged existing vendor `use client` directive warnings. The visual reviewer should inspect the attached production captures. Decisions the design doc leaves open: retained the existing 0.94 then 0.88 rear-width ratios and 5px per-layer vertical lift as the compact stack shape. The doc specifies narrower, peeking rear toasts but does not set numeric values.

kayg referenced this issue from a commit

2026-09-27 18:11:55 +00:00

Merge job/select-toast (#239, stacked toast shape)

kayg commented

2026-09-27 18:11:56 +00:00

Author

Owner

Merged in ac048aa4: stacked toasts narrower and peeking on the shared glass-overlay role. Toast blur/legibility comes from #246.

Merged in ac048aa4: stacked toasts narrower and peeking on the shared glass-overlay role. Toast blur/legibility comes from #246.

kayg closed this issue

2026-09-27 18:11:57 +00:00

kayg referenced this issue