kayg commented

Owner

Owner report (2026-09-30, screenshot at phone width): "overflow?"

In the phone Settings list (the grouped list of sections), the Admin card's glass background ends after "Apps", while "Plugins" and "System" render BELOW the card on the page background. The list rows overflow their card. The card height is fixed or capped (for example a height:100% or max-height from the FloatingSidebar layout reused at phone width) while the rows keep flowing.
Fix at the root: the card grows with its rows (or scrolls INSIDE its rounded glass, with the background covering the whole scroll area). No row may ever render outside its card. Check every grouped list that reuses this layout (the Settings list at 390 and 820; the sidebars in phone sheets).
Test: an e2e assertion that each row's rect is inside its card's rect, and that the card's scrollHeight is not larger than its clientHeight unless it is a scroll container with its background covering it. Run it at 390 and 820 in both themes, with admin and non-admin Users. Screenshots with a 3× crop of the card bottom. Gates: bun run check, bun run test.

## Owner report (2026-09-30, screenshot at phone width): "overflow?" In the phone Settings list (the grouped list of sections), the Admin card's glass background ends after "Apps", while "Plugins" and "System" render BELOW the card on the page background. The list rows overflow their card. The card height is fixed or capped (for example a height:100% or max-height from the FloatingSidebar layout reused at phone width) while the rows keep flowing. **Fix at the root:** the card grows with its rows (or scrolls INSIDE its rounded glass, with the background covering the whole scroll area). No row may ever render outside its card. Check every grouped list that reuses this layout (the Settings list at 390 and 820; the sidebars in phone sheets). **Test:** an e2e assertion that each row's rect is inside its card's rect, and that the card's scrollHeight is not larger than its clientHeight unless it is a scroll container with its background covering it. Run it at 390 and 820 in both themes, with admin and non-admin Users. Screenshots with a 3× crop of the card bottom. Gates: `bun run check`, `bun run test`.

issue-511-settings-evidence.tgz

8.7 MiB

phone-sidebar-390-dark.png

115 KiB

phone-sidebar-390-light.png

110 KiB

settings-admin-1440-dark-card-bottom-3x.png

72 KiB

settings-admin-1440-dark.png

219 KiB

settings-admin-1440-light-card-bottom-3x.png

48 KiB

settings-admin-1440-light.png

213 KiB

settings-admin-390-light-card-bottom-3x.png

113 KiB

settings-admin-390-light.png

39 KiB

settings-admin-820-dark-card-bottom-3x.png

186 KiB

settings-admin-820-light.png

94 KiB

settings-member-1440-dark-card-bottom-3x.png

53 KiB

settings-member-1440-dark.png

204 KiB

settings-member-1440-light-card-bottom-3x.png

48 KiB

settings-member-1440-light.png

200 KiB

settings-member-390-dark-card-bottom-3x.png

130 KiB

settings-member-390-dark.png

50 KiB

settings-member-390-light-card-bottom-3x.png

112 KiB

settings-member-390-light.png

38 KiB

settings-member-820-dark-card-bottom-3x.png

185 KiB

settings-admin-390-dark-card-bottom-3x.png

131 KiB

settings-admin-390-dark.png

51 KiB

settings-admin-820-dark.png

108 KiB

settings-admin-820-light-card-bottom-3x.png

180 KiB

settings-member-820-dark.png

106 KiB

settings-member-820-light-card-bottom-3x.png

178 KiB

settings-member-820-light.png

95 KiB

kayg commented

2026-09-30 10:20:57 +00:00

Author

Owner

Starting #511 on branch job/overflow-511, based at 558457cf32. I am tracing the phone Settings list and shared sidebar card before making the fix.

Starting #511 on branch job/overflow-511, based at 558457cf32e1d429da3834a05ff2720d11284302. I am tracing the phone Settings list and shared sidebar card before making the fix.

kayg commented

2026-09-30 10:54:18 +00:00

Author

Owner

Finding for #511: the narrow Settings branch rendered a separate .master list of .row links, while the desktop branch used FloatingSidebar with its own percentage height and list scroll. That split let phone section rows escape the glass-card sizing path. The phone branch now reuses FloatingSidebar; the rounded glass nav owns vertical scrolling when its parent has a height limit, and the list keeps its natural height on the Settings sheet.

Finding for #511: the narrow Settings branch rendered a separate `.master` list of `.row` links, while the desktop branch used `FloatingSidebar` with its own percentage height and list scroll. That split let phone section rows escape the glass-card sizing path. The phone branch now reuses `FloatingSidebar`; the rounded glass nav owns vertical scrolling when its parent has a height limit, and the list keeps its natural height on the Settings sheet.

kayg referenced this issue from a commit

2026-09-30 11:26:11 +00:00

fix(settings): contain phone section rows in glass card (#511)

kayg referenced this issue from a commit

2026-09-30 11:56:46 +00:00

test(settings): scope overflow checks to admin group (#511)

kayg commented

2026-09-30 12:15:44 +00:00

Author

Owner

Completed Forgejo #511.

Built

The narrow Settings master list now uses the shared FloatingSidebar. Its rounded glass nav grows with its rows when its parent has no height limit. A bounded rail scrolls inside that painted card.
Added a real-server E2E check for every Settings row’s rectangle and the card’s scroll metrics. The test uses invited Admin and member Users and covers 390, 820, and 1440 px in light and dark. It also checks the app sidebar phone sheet at 390 px.

Files

packages/ui/src/components/FloatingSidebar.svelte
apps/web/src/routes/settings/[...path]/+page.svelte
apps/web/src/lib/styles/sidebar-weight.test.ts
apps/web/e2e/settings-list-overflow-511.mjs
apps/web/package.json

Verification

bun run check output:

$ node scripts/check-type-tokens.mjs && svelte-kit sync && svelte-check --tsconfig ./tsconfig.json
Text sizes and UI shape values use shared role tokens.
Loading svelte-check in workspace: /home/kayg/Developer/calternal-wt/overflow-511/apps/web
Getting Svelte diagnostics...

svelte-check found 0 errors and 0 warnings

bun run test output:

 Test Files  137 passed (137)
      Tests  888 passed (888)
   Start at  14:00:36
   Duration  244.00s (transform 62%, import 15%, environment 12%, tests 7%, setup 3%)

Production E2E output:

PASS Settings glass containment role=admin width=390 theme=light scroll=1094/1094
PASS Settings glass containment role=admin width=390 theme=dark scroll=1094/1094
PASS Settings glass containment role=admin width=820 theme=light scroll=1094/1094
PASS Settings glass containment role=admin width=820 theme=dark scroll=1094/1094
PASS Settings glass containment role=admin width=1440 theme=light scroll=877/818
PASS Settings glass containment role=admin width=1440 theme=dark scroll=877/818
PASS Settings glass containment role=member width=390 theme=light scroll=544/544
PASS Settings glass containment role=member width=390 theme=dark scroll=544/544
PASS Settings glass containment role=member width=820 theme=light scroll=544/544
PASS Settings glass containment role=member width=820 theme=dark scroll=544/544
PASS Settings glass containment role=member width=1440 theme=light scroll=439/439
PASS Settings glass containment role=member width=1440 theme=dark scroll=439/439
PASS #511 Settings overflow matrix and card-bottom crops in /home/kayg/Developer/calternal-wt/overflow-511/artifacts/overflow-511

cargo build -p calternal-server (used to run the production E2E) completed with:

Finished `dev` profile [unoptimized + debuginfo] target(s) in 18m 36s

No Rust source changed, so no Rust crate gates were required. Cleanup completed: Removed 7067 files, 4.4GiB total; apps/web/build and apps/web/.svelte-kit were deleted.

Screenshot evidence

All full Settings screenshots and 3× card-bottom crops are attached. Each pair is full screen / bottom crop.

App sidebar sheet, 390 px: light, dark
Admin, 390 px: light / 3× crop; dark / 3× crop
Admin, 820 px: light / 3× crop; dark / 3× crop
Admin, 1440 px: light / 3× crop; dark / 3× crop
Member, 390 px: light / 3× crop; dark / 3× crop
Member, 820 px: light / 3× crop; dark / 3× crop
Member, 1440 px: light / 3× crop; dark / 3× crop

Decisions

Reuse FloatingSidebar on the narrow Settings list with an empty active item. This keeps the base list unselected and preserves the existing route callback.
Let an unbounded card grow with its rows, and let a height-bounded rail own scrolling inside the glass. DESIGN does not specify this overflow behavior.
At 820 px, the app sidebar is inline, so the phone-sheet assertion runs at 390 px where that sheet exists.

Known gaps

No code gaps found. origin/dev advanced after the required one-time merge. Current status is ahead 2, behind 34; I did not merge a second time under the one-merge rule. Please integrate against current dev during promotion.

Head SHA: 37555c50f06db1fbc159b3c1fc737f099725151f (job/overflow-511).

Completed Forgejo #511. **Built** - The narrow Settings master list now uses the shared `FloatingSidebar`. Its rounded glass nav grows with its rows when its parent has no height limit. A bounded rail scrolls inside that painted card. - Added a real-server E2E check for every Settings row’s rectangle and the card’s scroll metrics. The test uses invited Admin and member Users and covers 390, 820, and 1440 px in light and dark. It also checks the app sidebar phone sheet at 390 px. **Files** - `packages/ui/src/components/FloatingSidebar.svelte` - `apps/web/src/routes/settings/[...path]/+page.svelte` - `apps/web/src/lib/styles/sidebar-weight.test.ts` - `apps/web/e2e/settings-list-overflow-511.mjs` - `apps/web/package.json` **Verification** `bun run check` output: ```text $ node scripts/check-type-tokens.mjs && svelte-kit sync && svelte-check --tsconfig ./tsconfig.json Text sizes and UI shape values use shared role tokens. Loading svelte-check in workspace: /home/kayg/Developer/calternal-wt/overflow-511/apps/web Getting Svelte diagnostics... svelte-check found 0 errors and 0 warnings ``` `bun run test` output: ```text Test Files 137 passed (137) Tests 888 passed (888) Start at 14:00:36 Duration 244.00s (transform 62%, import 15%, environment 12%, tests 7%, setup 3%) ``` Production E2E output: ```text PASS Settings glass containment role=admin width=390 theme=light scroll=1094/1094 PASS Settings glass containment role=admin width=390 theme=dark scroll=1094/1094 PASS Settings glass containment role=admin width=820 theme=light scroll=1094/1094 PASS Settings glass containment role=admin width=820 theme=dark scroll=1094/1094 PASS Settings glass containment role=admin width=1440 theme=light scroll=877/818 PASS Settings glass containment role=admin width=1440 theme=dark scroll=877/818 PASS Settings glass containment role=member width=390 theme=light scroll=544/544 PASS Settings glass containment role=member width=390 theme=dark scroll=544/544 PASS Settings glass containment role=member width=820 theme=light scroll=544/544 PASS Settings glass containment role=member width=820 theme=dark scroll=544/544 PASS Settings glass containment role=member width=1440 theme=light scroll=439/439 PASS Settings glass containment role=member width=1440 theme=dark scroll=439/439 PASS #511 Settings overflow matrix and card-bottom crops in /home/kayg/Developer/calternal-wt/overflow-511/artifacts/overflow-511 ``` `cargo build -p calternal-server` (used to run the production E2E) completed with: ```text Finished `dev` profile [unoptimized + debuginfo] target(s) in 18m 36s ``` No Rust source changed, so no Rust crate gates were required. Cleanup completed: `Removed 7067 files, 4.4GiB total`; `apps/web/build` and `apps/web/.svelte-kit` were deleted. **Screenshot evidence** All full Settings screenshots and 3× card-bottom crops are attached. Each pair is full screen / bottom crop. - App sidebar sheet, 390 px: [light](https://git.kayg.org/attachments/e087ec65-0d4f-41db-975e-d3ff80d36827), [dark](https://git.kayg.org/attachments/16aebee5-0bbf-4f7e-9c6d-95fb217ea8eb) - Admin, 390 px: [light](https://git.kayg.org/attachments/6c2ca290-296a-47d0-8694-23094a5469f7) / [3× crop](https://git.kayg.org/attachments/81f858c8-af0c-423b-b820-cdea6b672fc6); [dark](https://git.kayg.org/attachments/40abf36f-e0eb-4496-952c-2dda946da517) / [3× crop](https://git.kayg.org/attachments/f57463bd-0c5a-416e-9ed2-36726c052903) - Admin, 820 px: [light](https://git.kayg.org/attachments/41a26d10-4672-4185-b6fe-13bae8b02953) / [3× crop](https://git.kayg.org/attachments/28481784-d995-422b-98f7-87e320cf4a56); [dark](https://git.kayg.org/attachments/8a0a896b-78cd-40f0-ac29-5e0234f2cbcb) / [3× crop](https://git.kayg.org/attachments/3119b666-bf30-47fa-9f6d-a08ae61c6600) - Admin, 1440 px: [light](https://git.kayg.org/attachments/7bd03aa2-323d-46a7-aac1-f7c18824272b) / [3× crop](https://git.kayg.org/attachments/b0e9ee7d-4ec1-49c9-88b3-d456a7743ae0); [dark](https://git.kayg.org/attachments/593acaa6-0e7c-4bf6-a04b-99de7dcd4d3e) / [3× crop](https://git.kayg.org/attachments/7d397e60-4498-44bb-b4bb-5837df0ad3de) - Member, 390 px: [light](https://git.kayg.org/attachments/8a1a9762-2c6b-4a65-9807-ee1fe3280e77) / [3× crop](https://git.kayg.org/attachments/34406560-3481-44b4-8f24-bc66b92eb4ad); [dark](https://git.kayg.org/attachments/5364d298-696c-46b7-9c5c-c335153d8493) / [3× crop](https://git.kayg.org/attachments/6d56eb03-4cde-4a24-8826-13ea6f34855b) - Member, 820 px: [light](https://git.kayg.org/attachments/9caea472-4278-47fa-bdc3-4460a386914b) / [3× crop](https://git.kayg.org/attachments/65897ab8-e731-406a-90b5-5e2a5a368e73); [dark](https://git.kayg.org/attachments/410a5c93-a7d4-4436-9658-01eaf77cb888) / [3× crop](https://git.kayg.org/attachments/5262881b-dd94-4d5e-925b-b3551a7e8cb5) - Member, 1440 px: [light](https://git.kayg.org/attachments/45dee5ae-230b-4d86-bd48-fee0b1a50f9c) / [3× crop](https://git.kayg.org/attachments/0c42ecbc-d19d-46a2-a0f7-fb0c845279e1); [dark](https://git.kayg.org/attachments/0213c1a6-321f-4757-9e02-224130ba9d2b) / [3× crop](https://git.kayg.org/attachments/f5769b39-9235-4e93-88b1-224bcf2ce647) **Decisions** - Reuse `FloatingSidebar` on the narrow Settings list with an empty active item. This keeps the base list unselected and preserves the existing route callback. - Let an unbounded card grow with its rows, and let a height-bounded rail own scrolling inside the glass. DESIGN does not specify this overflow behavior. - At 820 px, the app sidebar is inline, so the phone-sheet assertion runs at 390 px where that sheet exists. **Known gaps** - No code gaps found. `origin/dev` advanced after the required one-time merge. Current status is `ahead 2, behind 34`; I did not merge a second time under the one-merge rule. Please integrate against current `dev` during promotion. Head SHA: `37555c50f06db1fbc159b3c1fc737f099725151f` (`job/overflow-511`).

kayg referenced this issue from a commit

2026-09-30 12:23:01 +00:00

Merge job/overflow-511 (#511: phone Settings list card grows with its rows or scrolls inside its glass; containment e2e)

kayg commented

2026-09-30 12:23:01 +00:00

Author

Owner

Merged into dev at 1aaefe288 (merged-tree web gates green).

Merged into dev at 1aaefe288 (merged-tree web gates green).

kayg closed this issue

2026-09-30 12:23:02 +00:00

kayg referenced this issue

2026-09-30 13:58:02 +00:00

Settings detail pane overflows its glass frame at ~1300 px (Text card renders outside); width-sweep containment test #518

kayg commented

2026-09-30 13:59:03 +00:00

Author

Owner

Starting work on #511 from job/overflow-mid, based on cd3cea757508d9f581d00fb7d5d7973fbc0a75fd (origin/dev). I am tracing the Settings glass/scroll layout across phone, tablet, and desktop, and will inspect the #431 tablet change before touching the layout.

Starting work on #511 from `job/overflow-mid`, based on `cd3cea757508d9f581d00fb7d5d7973fbc0a75fd` (`origin/dev`). I am tracing the Settings glass/scroll layout across phone, tablet, and desktop, and will inspect the #431 tablet change before touching the layout.

kayg commented

2026-09-30 14:37:25 +00:00

Author

Owner

Baseline finding for #511 before changing the layout:

At 820 CSS px with a fine pointer, /settings/appearance renders the tablet .detail pane with computed overflow-y: visible. The focused production E2E fails at “Appearance scrolls inside its tablet detail pane”; the dashboard is height-bounded, but the detail pane has no inner scroll owner.
At 1300 CSS px, Appearance, Account, Apps, and Admin Users pass the card containment check in both themes; the desktop .content pane owns vertical scrolling. If the reported ~1300 px image is device pixels from a narrower CSS viewport, it would enter the detail layout; that is an inference.
The unmerged #431 commit 770894a94 has the exact tablet frame/scroll rules. I will reuse those rules in the shared Settings shell, keeping the existing phone sheet and desktop content scroll owners.

Baseline finding for #511 before changing the layout: - At 820 CSS px with a fine pointer, `/settings/appearance` renders the tablet `.detail` pane with computed `overflow-y: visible`. The focused production E2E fails at “Appearance scrolls inside its tablet detail pane”; the dashboard is height-bounded, but the detail pane has no inner scroll owner. - At 1300 CSS px, Appearance, Account, Apps, and Admin Users pass the card containment check in both themes; the desktop `.content` pane owns vertical scrolling. If the reported ~1300 px image is device pixels from a narrower CSS viewport, it would enter the detail layout; that is an inference. - The unmerged #431 commit `770894a94` has the exact tablet frame/scroll rules. I will reuse those rules in the shared Settings shell, keeping the existing phone sheet and desktop content scroll owners.

kayg referenced this issue from a commit

2026-09-30 16:01:23 +00:00

fix(settings): contain tablet detail in glass (#511)

kayg referenced this issue from a commit

2026-09-30 16:39:14 +00:00

bench(settings): profile tablet detail routes (#511)

kayg commented

2026-09-30 16:51:55 +00:00

Author

Owner

Forgejo #511 final report

Built

Tablet Settings detail panes now scroll inside an anchored dashboard glass frame. The detail layout and Settings shell fill the available dashboard height, and the dashboard clips overflow so the glass background stays behind the full scroll area. Phone and desktop Settings layouts keep their existing scroll owners.

The production E2E now checks Appearance, Account, Apps and Admin Users at 39 widths: every 40 px from 360–1680, plus 390, 820, 1024, 1180 and 1300 px. It asserts the painted frame is within the viewport, no document or body has horizontal scroll, and every card stays within its scroll content. For cards taller than the pane, it scrolls the card to its bottom and checks that edge inside the glass-owned scrollport.

The test also captures every Settings detail page at 390, 820 and 1440 px in light and dark. It captures Appearance at 1024, 1180, 1300 and 1440 px in both themes, with 3× pane-bottom crops. The 60 selected PNGs are attached here: Settings screenshots and pane-bottom crops.

Files

apps/web/src/routes/settings/[...path]/+page.svelte
apps/web/e2e/settings-list-overflow-511.mjs
apps/web/e2e/route-perf.mjs

Commits and tree

a0616e69f150bb053a02572e0f8bba2c02715b5d — contain tablet detail in glass.
0880bc9f831d1ba1aad2e9bc7e4e25124bc4497b — profile tablet Settings detail routes.
Head: 0880bc9f831d1ba1aad2e9bc7e4e25124bc4497b.
The worktree is clean. No API or Rust source changed.

Gates (verbatim output)

bun run check:

$ node scripts/check-type-tokens.mjs && svelte-kit sync && svelte-check --tsconfig ./tsconfig.json
Text sizes and UI shape values use shared role tokens.
Loading svelte-check in workspace: /home/kayg/Developer/calternal-wt/overflow-mid/apps/web
Getting Svelte diagnostics...

svelte-check found 0 errors and 0 warnings

bun run test:

 Test Files  137 passed (137)
      Tests  899 passed (899)
   Start at  18:36:56
   Duration  224.82s (transform 53%, environment 18%, import 14%, tests 11%, setup 4%)

Production E2E:

PASS #511 Settings overflow matrix and card-bottom crops in /home/kayg/Developer/calternal-wt/overflow-mid/artifacts/overflow-511

The E2E completed for both themes. Its console and page-error checks passed. Vitest printed existing jsdom Not implemented: Window's scrollTo() warnings; all 899 tests passed.

Performance profile

I extended the route profile to measure the four Settings detail routes at 820 px, using the same production asset/readiness measurements as other route widths. The profile ran locally with CPU throttle 4. Baseline values below are from docs/perf/baseline.json at commit 37788888f83d0de8c513ee551585012983c5a248 (2026-09-27).

Route	Baseline data-ready p50 / p95	Local run p50 / p95
390 /settings/appearance	3,246 / 5,190 ms	8,321 / 12,390 ms
1440 /settings/appearance	2,953 / 4,055 ms	13,591 / 16,628 ms
820 /settings/appearance	no baseline	17,730 / 18,349 ms
820 /settings/account	no baseline	14,941 / 24,774 ms
820 /settings/apps	no baseline	16,133 / 18,632 ms
820 /settings/admin/users	no baseline	11,901 / 17,723 ms

All Settings routes in this run used 420,918 gzip JS bytes and 68,051 gzip CSS bytes. Server idle RSS was 207,183,872 bytes. The 24-request burst ran for 12,246 ms, completed 2,047 requests with HTTP 200, and measured p50 57.4 ms / p95 458.2 ms; peak RSS was 227,454,976 bytes and peak CPU was 91.68%.

The local host load average was 38.27 / 39.95 / 36.89 before and 55.19 / 51.78 / 44.54 after. The baseline host load was 25.38 / 28.87 / 30.08 before and 26.34 / 27.47 / 29.24 after. These runs are not comparable enough to attribute the slower local values to this CSS change. The 820 px profile supplies a new reference for later runs; I did not change docs/perf/baseline.json or file a performance regression from these noisy numbers.

Findings and decisions

At 820 px, the baseline tablet detail had overflow-y: visible, and its card could escape the glass frame. The unmerged #431 branch contained the requested anchored-frame/detail-scroll patch, so I ported that exact change and did not create a second tablet implementation.
A tall Admin Users card can be higher than the visible pane. It remains scrollable content inside the pane; the sweep checks its logical extent and scrolls its bottom edge into the glass. This is the interpretation used for cards taller than the viewport.
The first width sweep reloaded every Settings route at every width and recorded six HTTP 429 console errors. I changed the sweep to load each route once and resize that real production page. The final sweep had no page or console errors.
The screenshot archive is attached for the orchestrator’s visual review. This job verified geometry and scroll containment; it did not make a visual quality judgment.

cargo clean removed 7,067 files (4.4 GiB). The web build and .svelte-kit output were deleted after the gates.

# Forgejo #511 final report ## Built Tablet Settings detail panes now scroll inside an anchored dashboard glass frame. The detail layout and Settings shell fill the available dashboard height, and the dashboard clips overflow so the glass background stays behind the full scroll area. Phone and desktop Settings layouts keep their existing scroll owners. The production E2E now checks Appearance, Account, Apps and Admin Users at 39 widths: every 40 px from 360–1680, plus 390, 820, 1024, 1180 and 1300 px. It asserts the painted frame is within the viewport, no document or body has horizontal scroll, and every card stays within its scroll content. For cards taller than the pane, it scrolls the card to its bottom and checks that edge inside the glass-owned scrollport. The test also captures every Settings detail page at 390, 820 and 1440 px in light and dark. It captures Appearance at 1024, 1180, 1300 and 1440 px in both themes, with 3× pane-bottom crops. The 60 selected PNGs are attached here: [Settings screenshots and pane-bottom crops](https://git.kayg.org/attachments/d310960e-ccbc-4081-8984-30d131a02d1c). ## Files - `apps/web/src/routes/settings/[...path]/+page.svelte` - `apps/web/e2e/settings-list-overflow-511.mjs` - `apps/web/e2e/route-perf.mjs` ## Commits and tree - `a0616e69f150bb053a02572e0f8bba2c02715b5d` — contain tablet detail in glass. - `0880bc9f831d1ba1aad2e9bc7e4e25124bc4497b` — profile tablet Settings detail routes. - Head: `0880bc9f831d1ba1aad2e9bc7e4e25124bc4497b`. - The worktree is clean. No API or Rust source changed. ## Gates (verbatim output) `bun run check`: ```text $ node scripts/check-type-tokens.mjs && svelte-kit sync && svelte-check --tsconfig ./tsconfig.json Text sizes and UI shape values use shared role tokens. Loading svelte-check in workspace: /home/kayg/Developer/calternal-wt/overflow-mid/apps/web Getting Svelte diagnostics... svelte-check found 0 errors and 0 warnings ``` `bun run test`: ```text Test Files 137 passed (137) Tests 899 passed (899) Start at 18:36:56 Duration 224.82s (transform 53%, environment 18%, import 14%, tests 11%, setup 4%) ``` Production E2E: ```text PASS #511 Settings overflow matrix and card-bottom crops in /home/kayg/Developer/calternal-wt/overflow-mid/artifacts/overflow-511 ``` The E2E completed for both themes. Its console and page-error checks passed. Vitest printed existing jsdom `Not implemented: Window's scrollTo()` warnings; all 899 tests passed. ## Performance profile I extended the route profile to measure the four Settings detail routes at 820 px, using the same production asset/readiness measurements as other route widths. The profile ran locally with CPU throttle 4. Baseline values below are from `docs/perf/baseline.json` at commit `37788888f83d0de8c513ee551585012983c5a248` (2026-09-27). | Route | Baseline data-ready p50 / p95 | Local run p50 / p95 | |---|---:|---:| | 390 /settings/appearance | 3,246 / 5,190 ms | 8,321 / 12,390 ms | | 1440 /settings/appearance | 2,953 / 4,055 ms | 13,591 / 16,628 ms | | 820 /settings/appearance | no baseline | 17,730 / 18,349 ms | | 820 /settings/account | no baseline | 14,941 / 24,774 ms | | 820 /settings/apps | no baseline | 16,133 / 18,632 ms | | 820 /settings/admin/users | no baseline | 11,901 / 17,723 ms | All Settings routes in this run used 420,918 gzip JS bytes and 68,051 gzip CSS bytes. Server idle RSS was 207,183,872 bytes. The 24-request burst ran for 12,246 ms, completed 2,047 requests with HTTP 200, and measured p50 57.4 ms / p95 458.2 ms; peak RSS was 227,454,976 bytes and peak CPU was 91.68%. The local host load average was 38.27 / 39.95 / 36.89 before and 55.19 / 51.78 / 44.54 after. The baseline host load was 25.38 / 28.87 / 30.08 before and 26.34 / 27.47 / 29.24 after. These runs are not comparable enough to attribute the slower local values to this CSS change. The 820 px profile supplies a new reference for later runs; I did not change `docs/perf/baseline.json` or file a performance regression from these noisy numbers. ## Findings and decisions - At 820 px, the baseline tablet detail had `overflow-y: visible`, and its card could escape the glass frame. The unmerged #431 branch contained the requested anchored-frame/detail-scroll patch, so I ported that exact change and did not create a second tablet implementation. - A tall Admin Users card can be higher than the visible pane. It remains scrollable content inside the pane; the sweep checks its logical extent and scrolls its bottom edge into the glass. This is the interpretation used for cards taller than the viewport. - The first width sweep reloaded every Settings route at every width and recorded six HTTP 429 console errors. I changed the sweep to load each route once and resize that real production page. The final sweep had no page or console errors. - The screenshot archive is attached for the orchestrator’s visual review. This job verified geometry and scroll containment; it did not make a visual quality judgment. `cargo clean` removed 7,067 files (4.4 GiB). The web `build` and `.svelte-kit` output were deleted after the gates.

kayg commented

2026-09-30 16:59:03 +00:00

Author

Owner

Mid-width fix merged into dev at 1e634aefb (merged-tree web gates 903/903).

Mid-width fix merged into dev at 1e634aefb (merged-tree web gates 903/903).

Rows
Columns

Settings phone list: rows overflow their glass card (Plugins/System render below the Admin card) #511

Owner report (2026-09-30, screenshot at phone width): "overflow?"

Forgejo #511 final report

Built

Files

Commits and tree

Gates (verbatim output)

Performance profile

Findings and decisions