From f9bcc76353a9a199bb90ade8911d1e024efd616b Mon Sep 17 00:00:00 2001 From: Jascha Date: Thu, 28 May 2026 16:28:06 -0700 Subject: [PATCH] fix(modal): make modal card scrollable so close controls stay reachable MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit On small viewports the How It Works content is taller than the screen. .snd-modal centers the card with align-items: center and .snd-modal-card had no height bound, so the card overflowed both the top and bottom edges — pushing the X (top) and the Close CTA (bottom) off-screen with no way to scroll, trapping the user in the dialog. Bound the card to the viewport (max-height: 100%) and let it scroll internally (overflow-y: auto, overscroll-behavior: contain). The X is now visible on open and both close controls are reachable. General fix — applies to every modal, not just How It Works. Verified on a 375x600 viewport: X visible on open, card scrolls, bottom CTA reachable after scroll, clicking X closes the dialog. --- app/ui/tokens.css | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/app/ui/tokens.css b/app/ui/tokens.css index 2732194e..7bc0715c 100644 --- a/app/ui/tokens.css +++ b/app/ui/tokens.css @@ -16,7 +16,8 @@ --snd-font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace; } -html, body { +html, +body { background: var(--snd-bg); color: var(--snd-text); font-family: var(--snd-font-sans); @@ -637,6 +638,9 @@ send-upload-area { padding: 32px; max-width: 560px; width: 100%; + max-height: 100%; + overflow-y: auto; + overscroll-behavior: contain; border-radius: 0; }