Archive/screentinker
1
0
Fork 0
mirror of https://github.com/screentinker/screentinker.git synced 2026-08-13 22:03:13 -06:00
Code Issues Actions 10 Packages Projects Releases Wiki Activity

fix(ui): make modals scroll instead of overflowing the viewport (#194)

Browse source 
The base .modal had no max-height/overflow on desktop — only the mobile media
query capped it — so a tall modal (e.g. the directory-board widget editor with
many tenant entries) grew past the screen with no scroll, stranding the lower
entries and the Save button off-screen ("unusable").

Cap .modal to 90vh and lay it out as a flex column so .modal-body becomes the
scroll region (flex + min-height:0 + overflow-y:auto) while the header and footer
(Cancel / Save) stay pinned and always reachable. Moved the cap onto the base
rule and dropped the now-redundant overflow from the mobile override.

Shared across all modals (all use the header/body/footer structure); short modals
are unchanged since max-height is a ceiling, not a fixed height. Verified in real
Chrome at a 700px viewport: modal capped to 630px, body scrollable (overflow=auto),
Save footer on-screen. CSS-only, no JS.

Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
screentinker 2026-07-16 12:12:52 -05:00 committed by GitHub
parent 76f072bf4b
commit 61c1246b5b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 15 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
frontend/css/main.css
View file

@ -1145,6 +1145,12 @@ body {
width: 440px;
max-width: 90vw;
box-shadow: var(--shadow);
/* Cap to the viewport and lay out as a column so a tall form (e.g. the directory-board
widget with many entries) scrolls inside .modal-body while the header/footer stay
pinned — otherwise the modal grows past the screen and Save becomes unreachable. */
max-height: 90vh;
display: flex;
flex-direction: column;
}
.modal-header {
@ -1153,6 +1159,7 @@ body {
justify-content: space-between;
padding: 16px 20px;
border-bottom: 1px solid var(--border);
flex-shrink: 0;
}
.modal-header h3 {
@ -1162,6 +1169,11 @@ body {
.modal-body {
padding: 20px;
/* Scroll region between the pinned header and footer. min-height:0 lets the flex item
shrink below its content so overflow-y actually engages inside the column. */
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
}
.modal-description {
@ -1176,6 +1188,7 @@ body {
gap: 8px;
padding: 16px 20px;
border-top: 1px solid var(--border);
flex-shrink: 0;
}
/* Form Elements */
@ -1465,7 +1478,8 @@ body {
.info-grid { grid-template-columns: 1fr; }
.remote-container { flex-direction: column; }
.remote-controls { width: 100%; flex-direction: row; flex-wrap: wrap; }
.modal { width: 95vw; max-height: 90vh; overflow-y: auto; }
/* max-height + scrolling body are now on the base .modal (pinned header/footer); just widen. */
.modal { width: 95vw; }
.tabs {
overflow-x: auto;
-webkit-overflow-scrolling: touch;