From 62053c7d03f6ef25f01aa0c32221ce6c02a0ebe7 Mon Sep 17 00:00:00 2001
From: Dan Schomburg <dschomburg@mozilla.com>
Date: Thu, 10 Sep 2026 19:00:46 -0700
Subject: [PATCH] fix(settings): wrap the scan-QR help link inside the phone
 frame

Because:
 - On /pair/authority/scan_qr the "Get help scanning" link had no width
   limit, so long translations such as French ran past the phone bezel.

This commit:
 - Caps the link at 46% of the artwork so long strings wrap onto a second
   line inside the phone screen.

Closes #FXA-14486
---
 .../src/pages/Pair2/Authority/ScanQR/index.tsx             | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/fxa-settings/src/pages/Pair2/Authority/ScanQR/index.tsx b/packages/fxa-settings/src/pages/Pair2/Authority/ScanQR/index.tsx
index 4d050f1c505..e53b43d664c 100644
--- a/packages/fxa-settings/src/pages/Pair2/Authority/ScanQR/index.tsx
+++ b/packages/fxa-settings/src/pages/Pair2/Authority/ScanQR/index.tsx
@@ -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