screentinker/frontend/css
screentinker 61c1246b5b
fix(ui): make modals scroll instead of overflowing the viewport (#194)
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>
2026-07-16 12:12:52 -05:00
..
main.css fix(ui): make modals scroll instead of overflowing the viewport (#194) 2026-07-16 12:12:52 -05:00
reset.css Initial open source release 2026-04-08 12:14:53 -05:00
seo-page.css SEO: add meta tags, sitemap, robots.txt, comparison pages, guides, internal linking 2026-04-28 20:54:32 -05:00
variables.css Initial open source release 2026-04-08 12:14:53 -05:00