Keep the lightbox close button clear of the polaroid on mobile - #64
Merged
Conversation
Fixes #61. On touch phones the close button is pinned to the top-right of the viewport, but the dialog centered its polaroid across the full screen — so a tall portrait photo or video rode up underneath the button, where its translucent circle and near-white glyph both vanish against the ivory frame and it reads as broken. The dialog now takes exactly the screen region below the close button's strip (safe-area inset + offset + button + breathing room) and centers the polaroid inside it with grid, so the frame can never reach the button. The mobile media height cap mirrors the same carve-out, and the now full-width dialog also widens the tap-anywhere-to-close area. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Contributor
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
…dden
The mobile rule set display: grid on .lightbox-dialog unconditionally,
and an author display beats the UA's dialog:not([open]) { display: none }
— so the closed lightbox rendered as a ghost box (empty polaroid, dot
row, close button) at the bottom of every page on phone-sized touch
viewports. Lighthouse caught it: the ghost's dot row fails the
tap-targets audit, dropping /about's SEO score to 0.96.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes #61. (Originally planned as a stack on #63, but that merged first — this is based on main and contains only the one commit.)
What was wrong
On touch phones the ✕ button is viewport-pinned to the top-right corner, but the lightbox dialog centered the polaroid across the whole screen. A tall portrait photo or video pushed the frame's top edge up underneath the button — and since the button's fill is 12% white and its glyph near-white, both vanish against the ivory frame, so it looks clipped/broken (both screenshots on the issue).
The fix
The mobile dialog now takes exactly the screen region below the close button's strip (safe-area inset + 0.75rem offset + 2.25rem button + 0.5rem breathing room) and centers the polaroid inside that region with grid — the frame geometrically cannot reach the button. The mobile media height cap mirrors the same carve-out so tall media shrinks to fit the region instead of reflating the dialog. As a side benefit, the dialog now spans full width, which enlarges the tap-anywhere-outside-the-photo-to-close area (
lightbox.tscloses when the click target is the dialog itself).Verified
Browser-tested at 375×812 and 375×667 (SE) with touch emulation: all 9 carousel items clear the button (minimum 39px on the tall 9:16 video at 812px, 8px at 667px) and fit above the viewport bottom with the dot row visible. All 19 Playwright tests pass (including the touch-phone lightbox tests); Prettier and stylelint clean.
🤖 Generated with Claude Code