Fix admin UI not using full vertical space on mobile (WWT-40)#47
Merged
PeterRounce merged 1 commit intoJul 2, 2026
Merged
Conversation
The admin app shell was sized with `h-screen` (`height: 100vh`). On Android Chrome `100vh` does not track the dynamic browser toolbar, so the shell rendered shorter than the visible viewport — leaving a large empty region at the bottom of the screen and clipping content (e.g. the Lightning Address / QR card on the Card Detail page, per the report). Switch the full-height layout roots from static viewport-height units to dynamic ones so the layout always fills the actual visible viewport: - app-shell.tsx: `h-screen` -> `h-dvh` (the reported bug) - App.tsx: auth-loading splash and error boundary `h-screen` -> `h-dvh` - login.tsx / register.tsx: `min-h-screen` -> `min-h-dvh` `dvh` (dynamic viewport height) is supported on all evergreen browsers including Pixel Chrome; Tailwind v4 emits the utilities natively. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
PeterRounce
deleted the
peter/wwt-40-admin-screen-doesnt-use-all-vertical-space
branch
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
WWT-40 — Admin screen doesn't use all vertical space
Reported by Rob on an Android Pixel (Chrome). The admin screen (screenshot was the Card Detail page) left a large empty region at the bottom and clipped the lower card.
Root cause
The app shell is sized with
h-screen(height: 100vh). On Android Chrome,100vhdoesn't track the dynamic browser toolbar, so the shell rendered shorter than the visible viewport — leaving dead space at the bottom and, because<main>is the scroll container, clipping the Lightning-Address / QR card.Fix
Replace static viewport-height units with dynamic ones so the layout always fills the true visible viewport:
admin-ui/src/components/app-shell.tsxh-screen→h-dvh(the reported bug)admin-ui/src/App.tsxh-screen→h-dvhadmin-ui/src/pages/login.tsxmin-h-screen→min-h-dvhadmin-ui/src/pages/register.tsxmin-h-screen→min-h-dvhdvh(dynamic viewport height) is supported on all evergreen browsers including Pixel Chrome; Tailwind v4 emitsh-dvh/min-h-dvhnatively. No remainingh-screen/min-h-screen/100vhin the SPA.Verification
npm run build(tsc typecheck + vite) passes; built CSS contains.h-dvh { height: 100dvh }and.min-h-dvh.Version bumped
0.22.4→0.22.5(PATCH).🤖 Generated with Claude Code