fix(scan): keep outline clear of paste button on mobile browser#1078
Open
orveth wants to merge 2 commits into
Open
fix(scan): keep outline clear of paste button on mobile browser#1078orveth wants to merge 2 commits into
orveth wants to merge 2 commits into
Conversation
The universal /scan page rendered QRScanner as `fixed inset-0 h-screen w-screen` on mobile, so the library's scan-region outline (centered at 50% of the section, sized at 3/4 * min(container.w, container.h)) centered on full vh rather than the visible dvh — on non-PWA mobile the outline's bottom edge slid behind the paste button. Paste button was also pinned via pb-14 rather than mirroring the home-page button placement. - Add an optional className prop to QRScanner so consumers can override the section sizing (twMerge handles position/inset/h/w conflicts). - On _protected.scan.tsx, drop PageFooter and adopt the home-page PageContent pattern from PR #1032: justify-between + pt-20 on mobile, useIsPwa-conditional pb-20 on the bottom wrapper. Scanner becomes an in-flow aspect-square w-full block, outline centers inside it, paste button sits in the same w-72 wrapper as Send/Receive/Buy on /. send.scan / receive.scan / transfer.scan stay fullscreen — they have no paste button.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
This pull request has been ignored for the connected project Preview Branches by Supabase. |
Drop the home-page-style isPwa-conditional pb-20 in favor of the same PageFooter pb-14 used on send-confirmation and other "primary action at bottom, content at top" screens. With the QRScanner section already in-flow (relative aspect-square w-full), PageContent + PageFooter give the outline a centered, square viewport above the paste button — no conditional needed.
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
2 participants
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.
Summary
/scan(universal QR scanner) had the scan-region outline overlap the paste button on non-PWA mobile browsers. TheQRScanner<section>wasfixed inset-0 h-screen w-screen, so the library's outline (centered at 50% of the section, sized at3/4 * min(container.w, container.h)) was centered on fullvhwhile the paste button sat at the bottom of the visibledvh— the outline's bottom edge slid behind it.Changes
app/components/qr-scanner/qr-scanner.tsx— add optionalclassNameprop so consumers can override the section sizing.cn()istwMerge(clsx(...)), soposition/inset/h/wfrom the caller cleanly override;sm:variants survive (desktop 400×400 stays).app/routes/_protected.scan.tsx— passrelative inset-auto aspect-square h-auto w-fulltoQRScannerso it becomes an in-flow square block on mobile. With the scanner now constrained to its own square,PageContent+PageFooter className="pb-14"(the canonical pattern used bysend-confirmationand other "primary action at the bottom" pages) gives the outline a centered viewport above the paste button — nouseIsPwaconditional needed.send.scan/receive.scan/transfer.scanstay fullscreen — they have no paste button and the immersive camera is the desired UX there.Test plan
/scanon mobile browser (Safari/Chrome, URL bar visible) — outline sits inside the in-flow square, paste button has clear margin below itPageFooter pb-14like every other bottom-action screensend.scan/receive.scan/transfer.scanstill show the fullscreen camera🤖 Generated with Claude Code