From 67e50be1dcfb6f5a2597c6c88dad782667492f26 Mon Sep 17 00:00:00 2001 From: Julien Gautier Date: Sun, 17 May 2026 01:56:26 +0200 Subject: [PATCH] fix(portal-admin): html/body overflow-y hidden as a shell shield (#176) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Summary Tiny follow-up to #175 — the bar / donut / stacked-bar charts on the audit-log Charts tab still surfaced a *phantom* body scrollbar plus an empty band below the footer in some viewport widths. The lib-side overflow constraints from #175 hold for the cases tested, but the symptom can re-appear from any future layout escape (a wider downstream component, a third-party iframe, an unforeseen flex bug). This PR adds a `html, body { overflow-y: hidden }` shield at the global stylesheet so any vertical overflow at the document level — wherever it comes from — stops at the shell boundary instead of producing a phantom scrollbar. Element-level scrolling on `
` (the only surface that *should* scroll) is unaffected. ## What lands `apps/portal-admin/src/styles.css`: ```css html, body { overflow-y: hidden; } ``` That's the whole change. The admin shell already commits to the "fills the viewport, never scrolls the body" layout — `` is locked at `height: 100vh` and `
` owns its own `overflow-y: auto`. Anything that escapes that contract is, by design, a bug to fix at the source. The shield is a safety net, not a load-bearing layout rule. ## Notes for the reviewer - **Why only portal-admin?** `portal-shell`'s app.scss carries the exact same `height: 100vh` + `
overflow-y: auto` shape, so the same shield would make sense there too. Holding it back to a separate PR because portal-shell hasn't actually demonstrated the symptom and the audit-log chantier is the immediate motivation — a one-line shield to the public-facing app deserves its own minute of consideration. Trivial to extend if/when we want symmetry. - **Why not just delete `height: 100vh` and let the document scroll naturally?** The admin shell deliberately keeps the header, sidebar, and footer pinned while only the content area scrolls — that's a deliberate UX choice for a dense admin surface (long audit-log tables, future CMS editors), not an accident. Keeping the 100vh contract and adding the shield preserves the intent. - **Manual reproduction of the original symptom** (now fixed): pre-shield, switching to the Charts tab on a 1280×720 viewport produced a body scrollbar with ~12 px of empty space below the footer, even though every visible element was inside `
`. Post-shield, the body scrollbar is gone; `
`'s internal scrollbar still works for the table page below the fold. ## Test plan - [x] `pnpm nx build portal-admin` — clean. - [x] `pnpm nx test portal-admin` — 62 specs pass (no behavioural change). - [x] `pnpm nx lint portal-admin` — same three pre-existing warnings, no new ones. - [ ] **Manual smoke** — `pnpm nx serve portal-admin`, sign in with `Portal.Admin`: - Navigate to `/admin/audit`, switch to Charts — no body scrollbar, no gap under the footer, charts still render at the column width. - Resize the viewport across the `(max-width: 800px)` breakpoint — body still doesn't scroll; `
` still does where it should. - Open the user-list page (long table) — `
` scrolls internally as expected; the shield does *not* prevent legitimate content scrolling. - Toggle dark mode — no visual regression. ## What's next - Mirror the same shield into `apps/portal-shell/src/styles.css` if/when a layout escape shows up there. Tracked in `docs/decisions/0020-portal-admin-app.md` follow-ups. --------- Co-authored-by: Julien Gautier Reviewed-on: https://git.unespace.com/julien/apf_portal/pulls/176 --- apps/portal-admin/src/styles.css | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/apps/portal-admin/src/styles.css b/apps/portal-admin/src/styles.css index 435b0bf..11a952d 100644 --- a/apps/portal-admin/src/styles.css +++ b/apps/portal-admin/src/styles.css @@ -16,3 +16,18 @@ /* Brand palette tokens — shared with portal-shell. */ @import '../../../libs/shared/tokens/src/brand-tokens.css'; + +/* + * The admin shell is a "fills the viewport, never scrolls the body" + * layout: is locked at height: 100vh, and
owns its + * own overflow-y. If anything inside the shell ever pushes content + * past the viewport (a wide chart, a flex sizing bug, a third-party + * iframe), we'd rather clip than show a phantom body scrollbar plus + * the empty space below the footer that comes with it. The element- + * level overflow on
still produces a real, scrollable region + * for content that overflows by design. + */ +html, +body { + overflow-y: hidden; +}