fix(layout): use flexbox so header growth doesn't overlap content #28

Merged

lz merged 1 commit from fix/mobile-header-overlap into main

2026-05-26 20:53:08 +02:00

lz commented

2026-05-26 19:46:38 +02:00

Owner

Summary

MainSplit hardcoded height: calc(100dvh - 60px), assuming a 60px header. On narrow viewports the header (Agent Nexus + tabs + Lock) wraps to two lines and grows past 60px, so the right-pane terminal extended past the viewport bottom and was clipped — the bottom of the terminal (and on the empty state, the "Click files…" sub-text) sat under nothing visible.

Switch body to display: flex; flex-direction: column. Header keeps its natural height as a flex item; main becomes flex: 1 1 auto; min-height: 0 and fills whatever's left. MainSplit switches to height: 100% (of its parent main) and is now position: relative so its mobile .right-pane overlay (which used inset: 60px 0 0 0) can inset: 0 within the split instead of the viewport.

The other routes (Settings, Providers, Config) still scroll the body normally — main keeps its max-width: 640px and padding-bottom: 80px centering for those pages.

Test plan

pnpm lint — clean
pnpm typecheck — clean
pnpm test — 474/474 passing
Manual on a narrow phone: header may still wrap on very small widths, but content underneath is not clipped
Manual: confirm terminal panel reaches the bottom of the viewport in both portrait and landscape
Manual on desktop: layout unchanged
Manual on Settings/Providers/Config routes: scroll + padding unchanged

## Summary `MainSplit` hardcoded `height: calc(100dvh - 60px)`, assuming a 60px header. On narrow viewports the header (Agent Nexus + tabs + Lock) wraps to two lines and grows past 60px, so the right-pane terminal extended past the viewport bottom and was clipped — the bottom of the terminal (and on the empty state, the "Click files…" sub-text) sat under nothing visible. Switch `body` to `display: flex; flex-direction: column`. Header keeps its natural height as a flex item; `main` becomes `flex: 1 1 auto; min-height: 0` and fills whatever's left. `MainSplit` switches to `height: 100%` (of its parent `main`) and is now `position: relative` so its mobile `.right-pane` overlay (which used `inset: 60px 0 0 0`) can `inset: 0` within the split instead of the viewport. The other routes (Settings, Providers, Config) still scroll the body normally — `main` keeps its `max-width: 640px` and `padding-bottom: 80px` centering for those pages. ## Test plan - [x] `pnpm lint` — clean - [x] `pnpm typecheck` — clean - [x] `pnpm test` — 474/474 passing - [ ] Manual on a narrow phone: header may still wrap on very small widths, but content underneath is not clipped - [ ] Manual: confirm terminal panel reaches the bottom of the viewport in both portrait and landscape - [ ] Manual on desktop: layout unchanged - [ ] Manual on Settings/Providers/Config routes: scroll + padding unchanged

lz added 1 commit

2026-05-26 19:46:38 +02:00

fix(layout): use flexbox so header growth doesn't overlap content

ci / nexus (pull_request) Successful in 2m32s

Details

ci / images (./nexus, agent-nexus) (pull_request) Successful in 4m4s

Details

ci / images (./worker, nexus-worker) (pull_request) Successful in 1m9s

Details

0484ef28fe

MainSplit hardcoded height: calc(100dvh - 60px), assuming a 60px header.
On narrow viewports the header (Agent Nexus + tabs + Lock) wraps to two
lines and grows past 60px, so the right-pane terminal extended past the
viewport bottom and was clipped.

Switch body to display: flex; flex-direction: column. Header keeps its
natural height as a flex item; main becomes flex: 1 1 auto and fills
whatever's left. MainSplit changes to height: 100% (of its parent main)
and is now position: relative so its mobile .right-pane overlay (which
used inset: 60px 0 0 0) can inset: 0 within the split instead of the
viewport.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

lz merged commit 6a0e7b8a3b into main

2026-05-26 20:53:08 +02:00

lz deleted branch fix/mobile-header-overlap

2026-05-26 20:53:08 +02:00

lz referenced this pull request from a commit

2026-05-26 20:53:09 +02:00

Merge pull request 'fix(layout): use flexbox so header growth doesn't overlap content' (#28) from fix/mobile-header-overlap into main

lz referenced this pull request

2026-09-15 18:23:36 +02:00

OAuth 2.1 authorization server: oidc-provider, storage adapter, consent #151