Skip to content

fix(settings): wrap the scan-QR help link inside the phone frame #21189

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
dschom wants to merge 1 commit into
base: main
Choose a base branch
from
+6 −1
Draft

fix(settings): wrap the scan-QR help link inside the phone frame #21189

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion packages/fxa-settings/src/pages/Pair2/Authority/ScanQR/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,9 +80,14 @@ const ScanQR = ({ qrCodeValue }: ScanQRProps) => {
{/* `FtlMsg` wraps the text rather than the link so the localized
string does not absorb the "opens in new window" note that
`LinkExternal` appends for screen readers. */}
{/* The phone's screen is about half the artwork wide, so the link
is capped just inside it: longer translations wrap onto a
second line on the screen rather than running past the bezel.
The overlay leaves room for two lines above the artwork's
bottom edge. */}
<LinkExternal
href={Constants.SYNC_SUMO_URL}
className="mt-2 rounded-sm text-sm text-grey-900 underline focus-visible-default hover:text-grey-700"
className="mt-2 max-w-[46%] rounded-sm text-sm text-grey-900 underline focus-visible-default hover:text-grey-700"
>
<FtlMsg id="pair2-authority-scan-qr-help-link">
Get help scanning
Expand Down