fix(portal-shell): same html/body overflow-y hidden shield as admin #177

2026-05-17T02:30:54+02:00

julien commented

2026-05-17 02:30:54 +02:00

Summary

Mirror of #176 onto portal-shell. Same one-line shield, same rationale: the two apps share an identical :host { height: 100vh } + <main> overflow-y: auto layout, so the same defensive html, body { overflow-y: hidden } rule belongs on both surfaces. Brings the public-facing shell to the same posture as the admin one — any future layout escape stops at the shell boundary rather than producing a phantom body scrollbar plus an empty band below the footer.

What lands

apps/portal-shell/src/styles.css:

html,
body {
  overflow-y: hidden;
}

Same block as #176 with a comment that explicitly cross-references the admin shield so future contributors don't accidentally diverge the two apps.

Notes for the reviewer

Why now, rather than waiting for portal-shell to demonstrate the symptom? #176's reviewer note said this would land "if/when a layout escape shows up there." The user asked for parity immediately, on the reasoning that the shell contract is the same on both apps — the shield is defensive and one-line, so coupling the two posture changes is cheaper than tracking a "TODO once we see it in shell".
No new tests. Same justification as #176 — the change is at the global stylesheet level, has no behavioural surface, and the manual repro path already exists (force a chart or wide element past the viewport; pre-shield → body scrollbar + footer gap; post-shield → clipped at the shell root, <main> still scrolls).
Element-level scrolling on <main> is unaffected. The skip-link, sidebar, and footer all keep their pinned positions; long routes (the user list, future content pages) scroll inside <main> as designed.

Test plan

pnpm nx build portal-shell — clean.
pnpm nx test portal-shell — green.
pnpm nx lint portal-shell — clean.
pnpm nx run-many -t build test lint -p portal-shell,portal-admin — green (admin and shell share the build cache; touching only one file invalidates only the shell target).
Manual smoke — pnpm nx serve portal-shell:
- Open /fr and /en, scroll long pages — <main> scrolls, body doesn't.
- Resize across the breakpoint where the sidebar collapses — body still doesn't scroll; sidebar/footer pin correctly.
- Toggle dark mode — no visual regression.

What's next

Nothing pending on this shell-shield front. The two apps are now symmetric; if a third app appears (it won't in v1) the same pattern is documented in both styles.css headers.

## Summary Mirror of #176 onto `portal-shell`. Same one-line shield, same rationale: the two apps share an identical `:host { height: 100vh }` + `<main> overflow-y: auto` layout, so the same defensive `html, body { overflow-y: hidden }` rule belongs on both surfaces. Brings the public-facing shell to the same posture as the admin one — any future layout escape stops at the shell boundary rather than producing a phantom body scrollbar plus an empty band below the footer. ## What lands `apps/portal-shell/src/styles.css`: ```css html, body { overflow-y: hidden; } ``` Same block as #176 with a comment that explicitly cross-references the admin shield so future contributors don't accidentally diverge the two apps. ## Notes for the reviewer - **Why now, rather than waiting for portal-shell to demonstrate the symptom?** #176's reviewer note said this would land "if/when a layout escape shows up there." The user asked for parity immediately, on the reasoning that the shell contract is the *same* on both apps — the shield is defensive and one-line, so coupling the two posture changes is cheaper than tracking a "TODO once we see it in shell". - **No new tests.** Same justification as #176 — the change is at the global stylesheet level, has no behavioural surface, and the manual repro path already exists (force a chart or wide element past the viewport; pre-shield → body scrollbar + footer gap; post-shield → clipped at the shell root, `<main>` still scrolls). - **Element-level scrolling on `<main>` is unaffected.** The skip-link, sidebar, and footer all keep their pinned positions; long routes (the user list, future content pages) scroll inside `<main>` as designed. ## Test plan - [x] `pnpm nx build portal-shell` — clean. - [x] `pnpm nx test portal-shell` — green. - [x] `pnpm nx lint portal-shell` — clean. - [x] `pnpm nx run-many -t build test lint -p portal-shell,portal-admin` — green (admin and shell share the build cache; touching only one file invalidates only the shell target). - [ ] **Manual smoke** — `pnpm nx serve portal-shell`: - Open `/fr` and `/en`, scroll long pages — `<main>` scrolls, body doesn't. - Resize across the breakpoint where the sidebar collapses — body still doesn't scroll; sidebar/footer pin correctly. - Toggle dark mode — no visual regression. ## What's next Nothing pending on this shell-shield front. The two apps are now symmetric; if a third app appears (it won't in v1) the same pattern is documented in both `styles.css` headers.

julien added 1 commit 2026-05-17 02:30:55 +02:00

fix(portal-shell): same html/body overflow-y hidden shield as admin

CI / scan (pull_request) Successful in 3m57s

Details

CI / commits (pull_request) Successful in 4m17s

Details

CI / check (pull_request) Successful in 4m31s

Details

CI / a11y (pull_request) Successful in 3m49s

Details

CI / perf (pull_request) Successful in 7m57s

Details

10d55a6a27

portal-shell's app.scss has the same "100vh shell, internal main
scroll" shape as portal-admin. Mirroring the shield keeps the two
apps consistent — any future layout escape stops at the shell
boundary instead of producing a phantom body scrollbar.

julien merged commit b9daaa5f58 into main

2026-05-17 02:31:16 +02:00

julien deleted branch fix/portal-shell-overflow-shield

2026-05-17 02:31:17 +02:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: julien/apf_portal#177