Skip to content

The element between the app and the views can shrink, so pages scroll on a phone #333

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mattshax merged 1 commit into from
Sep 8, 2026
Merged

The element between the app and the views can shrink, so pages scroll on a phone #333

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions web/src/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,6 +121,14 @@ button { font-family: inherit; }

.app { display: flex; flex-direction: column; height: 100%; }
.app-body { display: flex; flex: 1; min-height: 0; }
/* The element between the app body and the views. A flex item's default
min-height is auto, which refuses to shrink below its content: in the
phone's column that let a tall page (Settings, measured at 2102px in an
844px app) push the whole layout past the viewport, carrying the
navigation bar off-screen and leaving nothing able to scroll, since the
scrolling containers below it never got a bounded height to work
against. Zero here is what lets every view's own scroller do its job. */
main.content { min-height: 0; min-width: 0; }

/* Classification banner: full width above everything, in the platform's
style. Sized so it reads as chrome and not as content. */
Expand Down
Loading