From e4151a501dcde73d40ba37cf93587c1c79104a03 Mon Sep 17 00:00:00 2001 From: Garrett Mills Date: Wed, 14 Oct 2026 20:23:51 -0500 Subject: [PATCH] Fix click-preview modal clipping under the status bar on mobile Flex-centering in a scrolling container overflows off both edges when the card art + info tile is taller than the viewport, and the part pushed above the top can't be scrolled to. Center with margin: auto instead. --- src/styles.css | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/styles.css b/src/styles.css index faee9b8..72b0ba4 100644 --- a/src/styles.css +++ b/src/styles.css @@ -1968,9 +1968,13 @@ tbody tr:hover { inside a dialog (e.g. the sample hand modal), and the zoomed preview must stay on top of the dialog it was opened from. */ z-index: 450; + /* Centered via `.preview-modal`'s `margin: auto`, NOT align-items / + justify-content: center — those overflow equally off BOTH edges when the + content is taller than the viewport (card art + info tile on a phone), + and the part pushed above the top edge can't be scrolled to, leaving the + close button under the status bar. Auto margins collapse to 0 instead, + so overflow only ever extends downward into the scrollable area. */ display: flex; - align-items: center; - justify-content: center; overflow-y: auto; padding: 24px 12px; /* The close button pokes up above the (flex-centered) modal content, so on @@ -2002,6 +2006,7 @@ tbody tr:hover { `.preview-modal-backdrop`'s own scrolling, not by clipping content. */ .preview-modal { position: relative; + margin: auto; cursor: default; display: flex; flex-wrap: wrap;