[P2] /settings overflows <main> by 56px under top-nav — account deletion controls below the fold

[AndresL230]

Found while reviewing #335 (which fixes this class of bug on five other screens but misses this one).

The bug

frontend/src/components/screens/Settings.tsx:232:

<div style={{ display: "flex", height: "calc(100vh - 112px)" }}>

112px is the TopBar height. Root total = 112 + (100vh - 112) = exactly 100vh — correct for the sidebar layout where <main> is 100vh.

But in the top-nav layout, ShellFrame stacks a 56px TopNav above <main>, so <main> is 100vh - 56px. The screen overflows by exactly 56px.

What the user sees

The inner pane at :233 already has overflowY: auto, so /settings shows two nested scrollbars, and the bottom 56px of the pane sits below the fold — including the account-deletion controls on the data tab.

Mobile always takes the top-nav path (useSidebar = pref === "sidebar" && !isMobile), so this is the mobile experience.

Fix

Use FullHeightScreen / height: 100% per #335's approach, or reference the exported TOP_NAV_HEIGHT (TopNav.tsx:75) which is already available and unused here.

Same class, lower severity — worth folding in

• Tree.tsx:311 — height: calc(100vh - 240px); overflows top-nav <main> by ~29px, and the 3D graph canvas is sized off this box via ref/size.h so it renders oversized too.
• Gradebook/Landing.tsx:218 and Gradebook/Course.tsx:555 — minHeight: calc(100vh - var(--row-h)). --row-h is a density token (40/34/48px per globals.css:144,157,160), not a nav height — so the offset is semantically wrong and density-dependent (spurious scroll of 16/22/8px).

Root cause

Screens hand-roll viewport math instead of resolving against <main>. #335 collapses this onto ShellFrame's two 100vh declarations, which is the right shape — these are the stragglers.

[AndresL230]

Scope narrowed — the headline bug is fixed (verified @ 7fa6cb6).

Settings.tsx no longer hard-codes height: calc(100vh - 112px); it now wraps in <FullHeightScreen> (imported :5, opens :221, closes :633). The 56px top-nav overflow and the buried account-deletion controls on the data tab are gone.

Still open — the 'same class, worth folding in' residuals from the body:

• Tree.tsx:328 — height: calc(100vh - 240px), still present. This is the one with real consequence beyond a scrollbar: the 3D graph canvas is sized off this box via ref/size.h, so it renders oversized under top-nav.
• Gradebook/Landing.tsx:232 and Gradebook/Course.tsx:553 — now minHeight: calc(100vh - var(--row-h)), i.e. refactored to a token but still viewport-absolute rather than 100%.

Retaining this issue for those three; the P2 mobile-severity rationale no longer applies, so treat it as P3.

[AndresL230]

Proposal — the three viewport-math residuals (B11, verified @ d1d724f)

Not implemented — proposal only. The headline bug is confirmed fixed (Settings.tsx now wraps in <FullHeightScreen>, :5 / :238 / :650 — no calc(100vh - 112px) remains). Three residuals survive:

1. Tree.tsx:328 — height: calc(100vh - 240px). This is the one with real consequence: the immediate child (:329) is the ref observed by a ResizeObserver (:55) whose size.w/size.h feed <KnowledgeGraph width height> (:336-337), so the 3D canvas inherits the bad offset and renders ~29px oversized under the top-nav layout.
2. Gradebook/Landing.tsx:232 and 3. Gradebook/Course.tsx:561 — minHeight: calc(100vh - var(--row-h)). Semantically wrong and density-dependent: --row-h is a density token (40/34/48px per globals.css:140,153,156), not a nav height.

Proposal

Mechanical: adopt FullHeightScreen (height: 100%, resolves against <main> in both sidebar and top-nav layouts; 6 existing call sites from #335, and Settings.test.tsx:40 already establishes the test-mock convention). Pair it with a Tree journey assertion that the canvas fits the viewport, since that's the case with user-visible consequence.

Scope and risk

• ~1 hour. Minimal risk, entirely mechanical.
• This one is small and safe enough that I'd happily fold it into a bundle rather than track it separately — say the word and it rides along with the next frontend PR. Listing it here only because B11 is proposals-only by instruction.

[AndresL230]

Landed via #487 (162078a). Leaving this open for your UI verification — the fix has a visible surface.

What changed

All three residuals are gone; there is no calc(100vh - …) left in these files.

File	Was	Now
Tree.tsx	height: calc(100vh - 240px)	FullHeightScreen root, graph row flex: 1 + minHeight: 0
Gradebook/Landing.tsx	minHeight: calc(100vh - var(--row-h))	FullHeightScreen root, <main> flex: 1 0 auto
Gradebook/Course.tsx	same	same

Line numbers had drifted from this issue's body, for the record: Tree was at :399 (not :311/:328), Landing at :242, Course at :581.

The bug, measured

Rather than argue it, the new journey (frontend/e2e/viewport-fit.spec.ts) was run against the unfixed build first:

layout "topnav": canvas 480px vs scrollport 664px — overshoots by 27px
layout "sidebar": <main> is 686px but needs only 647px
 (647px available, 338px of content) — 39px is phantom

• The tree failure is topnav only — sidebar passed at base, which is exactly what a 240px constant calibrated for the sidebar layout does. Your estimate in the issue body was ~29px; measured 27px.
• The gradebook phantom is 39px, i.e. --row-h (40px at default density) to within rounding. The density-token-as-nav-height diagnosis in this issue is confirmed numerically.

What to look at

1. /tree — the graph canvas should sit flush with the bottom of the frame with no page scroll, in both layouts. Toggle the layout preference in Settings (sidebar ↔ top nav) and check both; the top-nav one is where the bug lived.
2. /gradebook and a course page — no spurious scrollbar when the content fits. Worth a look at each density setting too (compact / default / comfortable), since that is the token the old code was subtracting.
3. The fullscreen graph overlay (the Fullscreen button on /tree) was already correct and is untouched.

Verification

• New journey asserts the canvas fits the scrollport in both layouts, and that the gradebook adds no height beyond what its content needs. It fails on the pre-fix build (above) and passes after.
• Full local e2e cycle at the merged head: 35/35 journeys, oracles 0 findings.
• tsc clean · lint 0 errors · vitest 403 tests.

Close when the three surfaces look right to you.