kayg/calternal

Watch

Fork 0

REGRESSION: Settings overlay lost its dim/blur scrim and its sidebar got wider #1195

New issue

Open

opened 2026-10-06 08:59:23 +00:00 by kayg · 5 comments

kayg commented

2026-10-06 08:59:23 +00:00

Owner

REGRESSION (owner, 2026-10-06 14:28 IST, production `5301e0208`): Settings overlay

"Suddenly the settings sidebar became wider? And the dimming / blurring of the background is gone?" Screenshot: ~/calternal-private/reference/owner-settings-regression.webp — Settings (Account) opened as the overlay while on Money › My Budget, desktop Chrome on macOS, dark theme. (1) The Settings section sidebar (User / Look & Feel / Tabs / Connections) is noticeably wider than before. (2) The page behind the overlay is no longer dimmed or blurred (the shared overlay scrim is missing) — the Money header and app sidebar are fully crisp.

Last known good: d0061ec3d (batch 25, live 06:53 IST). Bad: f5fbced3c (merge round 28, 12:05 IST) and 5301e0208. Merge 28 brought #1109 tag filter, #1156, #1142 toasts, #1148, #1110, #1129 inspector, #1149, #1152/#1125 block actions, #1103 drawings, #1144, #1151 link cards.

Do, fast:

Reproduce in a real browser (Chromium + WebKit, 1440 and 1920, dark): open Settings from Money, Calendar, Notes on both builds (build both, or run the e2e harness at each SHA). Capture DOM/computed styles of the overlay scrim and the Settings nav column on good vs bad. git bisect the merge range if needed.
Fix the root cause at its source (likely a z-index/stacking context, a transform/filter/contain/isolation on a new ancestor that breaks the scrim's backdrop-filter, a missing overlay class after #1129's Inspector/#1142 notification changes, or a sidebar width token changed by #1109/#1166 work). Add a design-rule e2e: with any overlay open, the page behind has the shared dim+blur scrim (pixel/computed check), and the Settings nav column width equals its token on every Tab.
Report the culprit commit and evidence. Screenshots at ACTUAL size good vs bad vs fixed. bun run check + bun run test pass. Commit. Do not push.

## REGRESSION (owner, 2026-10-06 14:28 IST, production 5301e0208): Settings overlay "Suddenly the settings sidebar became wider? And the dimming / blurring of the background is gone?" Screenshot: ~/calternal-private/reference/owner-settings-regression.webp — Settings (Account) opened as the overlay while on Money › My Budget, desktop Chrome on macOS, dark theme. (1) The Settings section sidebar (User / Look & Feel / Tabs / Connections) is noticeably wider than before. (2) The page behind the overlay is no longer dimmed or blurred (the shared overlay scrim is missing) — the Money header and app sidebar are fully crisp. Last known good: d0061ec3d (batch 25, live 06:53 IST). Bad: f5fbced3c (merge round 28, 12:05 IST) and 5301e0208. Merge 28 brought #1109 tag filter, #1156, #1142 toasts, #1148, #1110, #1129 inspector, #1149, #1152/#1125 block actions, #1103 drawings, #1144, #1151 link cards. Do, fast: 1. Reproduce in a real browser (Chromium + WebKit, 1440 and 1920, dark): open Settings from Money, Calendar, Notes on both builds (build both, or run the e2e harness at each SHA). Capture DOM/computed styles of the overlay scrim and the Settings nav column on good vs bad. `git bisect` the merge range if needed. 2. Fix the root cause at its source (likely a z-index/stacking context, a `transform`/`filter`/`contain`/`isolation` on a new ancestor that breaks the scrim's backdrop-filter, a missing overlay class after #1129's Inspector/#1142 notification changes, or a sidebar width token changed by #1109/#1166 work). Add a design-rule e2e: with any overlay open, the page behind has the shared dim+blur scrim (pixel/computed check), and the Settings nav column width equals its token on every Tab. 3. Report the culprit commit and evidence. Screenshots at ACTUAL size good vs bad vs fixed. `bun run check` + `bun run test` pass. Commit. Do not push.

kayg commented

2026-10-06 09:00:15 +00:00

Author

Owner

Starting #1195 on branch job/settingsreg-1195 at 5301e020859c1d61b4a7f812a5049a64241203e8. I am checking the Settings overlay and shared scrim against the last known good commit d0061ec3d, then I will make the fix, capture browser evidence, and run the requested web gates. No files have been changed yet.

Starting #1195 on branch `job/settingsreg-1195` at `5301e020859c1d61b4a7f812a5049a64241203e8`. I am checking the Settings overlay and shared scrim against the last known good commit `d0061ec3d`, then I will make the fix, capture browser evidence, and run the requested web gates. No files have been changed yet.

kayg commented

2026-10-06 09:27:58 +00:00

Author

Owner

Finding from the bad production build 5301e0208 (real signed-in User, Chromium/macOS emulation, dark theme): at 1440×900 and 1920×1080, opening Settings from Money, Calendar and Notes produces exactly one live shared scrim. Its computed tint is rgba(10, 14, 12, 0.45), but its class is bounded-blur and its computed backdrop-filter is none; the Settings surface is z-index 201 above the scrim at 200. The nav rail is 280 px and matches 17.5rem; no labels truncate. History shows b879474685 changed the default from 248 px to 17.5rem, and b583ddea5 selected surface-bounded blur for Settings. The bad build screenshots are in artifacts/settingsreg-1195/. The WebKit pass is being adjusted after its dark-theme readiness check timed out; the Chromium results are complete.

Finding from the bad production build `5301e0208` (real signed-in User, Chromium/macOS emulation, dark theme): at 1440×900 and 1920×1080, opening Settings from Money, Calendar and Notes produces exactly one live shared scrim. Its computed tint is `rgba(10, 14, 12, 0.45)`, but its class is `bounded-blur` and its computed `backdrop-filter` is `none`; the Settings surface is z-index 201 above the scrim at 200. The nav rail is 280 px and matches `17.5rem`; no labels truncate. History shows `b879474685` changed the default from 248 px to 17.5rem, and `b583ddea5` selected surface-bounded blur for Settings. The bad build screenshots are in `artifacts/settingsreg-1195/`. The WebKit pass is being adjusted after its dark-theme readiness check timed out; the Chromium results are complete.

kayg commented

2026-10-06 09:36:14 +00:00

Author

Owner

The full 12-case Chromium/WebKit × 1440/1920 × Money/Calendar/Notes comparison is complete for both requested builds. d0061ec3d and 5301e0208 produce the same computed styles and geometry in every case: scrimBackdropFilter: none, a live 45% dark tint, and a 280 px rail matching 17.5rem; labels fit. The reported SHA range does not reproduce a code-level difference. The two behavior sources predate that range: b583ddea5 bounds Settings blur to its panel, and b879474685 changes the default rail from 248 px to 17.5rem. I am treating #1195 as the current owner direction to restore full-page shared blur and the prior compact 248 px default while keeping user-resized widths intact.

The full 12-case Chromium/WebKit × 1440/1920 × Money/Calendar/Notes comparison is complete for both requested builds. `d0061ec3d` and `5301e0208` produce the same computed styles and geometry in every case: `scrimBackdropFilter: none`, a live 45% dark tint, and a 280 px rail matching `17.5rem`; labels fit. The reported SHA range does not reproduce a code-level difference. The two behavior sources predate that range: `b583ddea5` bounds Settings blur to its panel, and `b879474685` changes the default rail from 248 px to 17.5rem. I am treating #1195 as the current owner direction to restore full-page shared blur and the prior compact 248 px default while keeping user-resized widths intact.

kayg commented

2026-10-06 10:03:11 +00:00

Author

Owner

The final Chromium and WebKit matrix passes at 1440×900 and 1920×1080 from Money, Calendar, and Notes: 12 combinations. Each reports a live 45% scrim, computed blur(8px), rail width equal to its 16rem token, and no truncated labels. Screenshots and per-case DOM metrics are in artifacts/settingsreg-1195/ in the job worktree.

The regression matrix found a width constraint that the source comparison did not expose: at the historical 248 px default, Chromium 1440×900 truncates the “Connected Accounts” Settings label. At 256 px (`16rem`), the real production build keeps every Settings nav label readable. I set the shared Settings token to 256 px and verified all labels across You, Look & Feel, Tabs, and Connections. The final Chromium and WebKit matrix passes at 1440×900 and 1920×1080 from Money, Calendar, and Notes: 12 combinations. Each reports a live 45% scrim, computed `blur(8px)`, rail width equal to its 16rem token, and no truncated labels. Screenshots and per-case DOM metrics are in `artifacts/settingsreg-1195/` in the job worktree.

kayg commented

2026-10-06 10:37:40 +00:00

Author

Owner

Completed

Fixed the Settings overlay scrim and reduced the default rail from 17.5rem to 16rem. Settings now uses the shared page blur. The 16rem rail fits all four longest section labels; 15.5rem clipped “Connected Accounts”.

Added a real-app regression run for Settings opened from Money, Calendar and Notes. It checks the shared scrim tint and blur, page pixel dimming, rail token, and label fit on every Settings group. It also captures the owner review matrix at 390, 820 and 1440 px in Light and Dark with macOS platform signals. Extended bench/settings-shortcut.mjs to assert and record the shared overlay contract.

Root cause and evidence

The two production builds do not show a new source difference for these symptoms: d0061ec3d and 5301e0208 both used bounded Settings blur and a 17.5rem default rail. Those choices came from earlier commits: b583ddea54490f97ee3042e454d1837a7f8319a7 (#642) bounded the Settings blur, and b8794746858179d3daa7b91fa24346b7a746750b (#1039) set the wider rail. The issue report describes the effect, but the real-browser comparison places both behaviors before the stated last-known-good SHA.

After the fix, all 12 desktop cases passed: Chromium and WebKit, 1440 and 1920 px, and Money, Calendar and Notes. Computed values were rgba(10, 14, 12, 0.45), blur(8px), scrim z-index 200, surface z-index 201, and 256px rail width. No labels were clipped. In the Chromium Money case, the sampled bright underlay pixel fell from luminance 241.86 to 28.72.

The 18 responsive captures cover 3 source Tabs × 3 widths × 2 themes. Screenshot metadata confirmed 390×844, 820×1180 and 1440×900 output sizes. Light keeps its documented 0% white tint; both themes use the page blur.

Screenshots

Archives are in the job worktree under target/tmp/:

settingsreg-1195-good.zip
settingsreg-1195-bad.zip
settingsreg-1195-fixed.zip
settingsreg-1195-responsive.zip

They are not attached to this issue. The installed fj issue commands do not provide asset upload, and the Forgejo asset upload request returned HTTP 401 without authenticated upload access.

Performance

Expected cost per open: one shared 8px blur over the visible viewport; this change adds no API request, data scan or per-item work.

Local Linux Chromium profile (shared host, 15 Settings sections, 19 live Plugin rows): open latency p50/p95 384.31/609.53 ms; browser CPU p50/p95 585/867.5 ms; browser RSS p50/p95 703,618/732,979 KiB; server RSS p50/p95 210,420/273,872 KiB. A 50-key burst took 854.15 ms and 1,340 ms browser CPU. Host metrics are not isolated. docs/perf/baseline.json has no matching shortcut-open profile; its closest 1440 /settings/appearance route-load baseline is 1,584/2,069 ms p50/p95 and is not directly comparable.

UX gaps closed / left

Closed: the app behind Settings blurs again; the rail is compact and all labels fit; the regression check covers the source Tabs, Settings groups, both browser engines, requested desktop widths and the owner responsive/theme review matrix.

Left: screenshot archives still need to be attached to the issue. No API or Rust code changed.

Gates

bun run check:

svelte-check found 0 errors and 2 warnings in 2 files

The two warnings are existing empty CSS rulesets in AttachmentDeck.svelte and AgendaList.svelte.

bun run test:

 Test Files  274 passed (274)
      Tests  1907 passed (1907)
   Start at  12:13:00
   Duration  438.12s (transform 28%, environment 27%, import 23%, tests 16%, setup 5%)

Performance guard:

perf-lint: PASS; 0 violations; 22359 scoped exceptions

Settings browser run:

PASS settings-overlay-1195 responsive review: 18 macOS width/theme/source combinations; evidence /home/kayg/Developer/calternal-wt/settingsreg-1195/artifacts/settingsreg-1195/fixed-responsive-metrics.json
PASS settings-overlay-1195: 12 source/viewport/browser combinations; evidence /home/kayg/Developer/calternal-wt/settingsreg-1195/artifacts/settingsreg-1195/fixed-metrics.json

cargo clean:

Removed 8633 files, 7.3GiB total

Decisions

DESIGN §50 specifies a rem-based Settings rail but not its exact width. I chose 16rem because it fits every label while reducing the default by 24px from 17.5rem. The page blur follows the requested regression behavior and DESIGN §34.

Head: 70702e076bed55da34d05c5f0ced5d397f43bae2
Commits: b9ed2030f, 554579c06, 70702e076.

## Completed Fixed the Settings overlay scrim and reduced the default rail from 17.5rem to 16rem. Settings now uses the shared page blur. The 16rem rail fits all four longest section labels; 15.5rem clipped “Connected Accounts”. Added a real-app regression run for Settings opened from Money, Calendar and Notes. It checks the shared scrim tint and blur, page pixel dimming, rail token, and label fit on every Settings group. It also captures the owner review matrix at 390, 820 and 1440 px in Light and Dark with macOS platform signals. Extended `bench/settings-shortcut.mjs` to assert and record the shared overlay contract. ## Root cause and evidence The two production builds do not show a new source difference for these symptoms: `d0061ec3d` and `5301e0208` both used bounded Settings blur and a 17.5rem default rail. Those choices came from earlier commits: `b583ddea54490f97ee3042e454d1837a7f8319a7` (#642) bounded the Settings blur, and `b8794746858179d3daa7b91fa24346b7a746750b` (#1039) set the wider rail. The issue report describes the effect, but the real-browser comparison places both behaviors before the stated last-known-good SHA. After the fix, all 12 desktop cases passed: Chromium and WebKit, 1440 and 1920 px, and Money, Calendar and Notes. Computed values were `rgba(10, 14, 12, 0.45)`, `blur(8px)`, scrim z-index 200, surface z-index 201, and 256px rail width. No labels were clipped. In the Chromium Money case, the sampled bright underlay pixel fell from luminance 241.86 to 28.72. The 18 responsive captures cover 3 source Tabs × 3 widths × 2 themes. Screenshot metadata confirmed 390×844, 820×1180 and 1440×900 output sizes. Light keeps its documented 0% white tint; both themes use the page blur. ## Screenshots Archives are in the job worktree under `target/tmp/`: - `settingsreg-1195-good.zip` - `settingsreg-1195-bad.zip` - `settingsreg-1195-fixed.zip` - `settingsreg-1195-responsive.zip` They are not attached to this issue. The installed `fj issue` commands do not provide asset upload, and the Forgejo asset upload request returned HTTP 401 without authenticated upload access. ## Performance Expected cost per open: one shared 8px blur over the visible viewport; this change adds no API request, data scan or per-item work. Local Linux Chromium profile (shared host, 15 Settings sections, 19 live Plugin rows): open latency p50/p95 384.31/609.53 ms; browser CPU p50/p95 585/867.5 ms; browser RSS p50/p95 703,618/732,979 KiB; server RSS p50/p95 210,420/273,872 KiB. A 50-key burst took 854.15 ms and 1,340 ms browser CPU. Host metrics are not isolated. `docs/perf/baseline.json` has no matching shortcut-open profile; its closest 1440 `/settings/appearance` route-load baseline is 1,584/2,069 ms p50/p95 and is not directly comparable. ## UX gaps closed / left Closed: the app behind Settings blurs again; the rail is compact and all labels fit; the regression check covers the source Tabs, Settings groups, both browser engines, requested desktop widths and the owner responsive/theme review matrix. Left: screenshot archives still need to be attached to the issue. No API or Rust code changed. ## Gates `bun run check`: ```text svelte-check found 0 errors and 2 warnings in 2 files ``` The two warnings are existing empty CSS rulesets in `AttachmentDeck.svelte` and `AgendaList.svelte`. `bun run test`: ```text Test Files 274 passed (274) Tests 1907 passed (1907) Start at 12:13:00 Duration 438.12s (transform 28%, environment 27%, import 23%, tests 16%, setup 5%) ``` Performance guard: ```text perf-lint: PASS; 0 violations; 22359 scoped exceptions ``` Settings browser run: ```text PASS settings-overlay-1195 responsive review: 18 macOS width/theme/source combinations; evidence /home/kayg/Developer/calternal-wt/settingsreg-1195/artifacts/settingsreg-1195/fixed-responsive-metrics.json PASS settings-overlay-1195: 12 source/viewport/browser combinations; evidence /home/kayg/Developer/calternal-wt/settingsreg-1195/artifacts/settingsreg-1195/fixed-metrics.json ``` `cargo clean`: ```text Removed 8633 files, 7.3GiB total ``` ## Decisions DESIGN §50 specifies a rem-based Settings rail but not its exact width. I chose 16rem because it fits every label while reducing the default by 24px from 17.5rem. The page blur follows the requested regression behavior and DESIGN §34. Head: `70702e076bed55da34d05c5f0ced5d397f43bae2` Commits: `b9ed2030f`, `554579c06`, `70702e076`.

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

No description provided.

Rows
Columns