On the "Approval now required" card at the end of the firefox.com/pair flow, the "from your other device" text is styled to be extra-small, despite being fairly-important

[dholbert]

Description

When you use the firefox.com/pair flow to connect a mobile Firefox installation to the Sync account that you're signed into on desktop, the second-to-last card in the flow looks substantially different from the rest -- the card that directs you to complete the final process on your phone. For some reason, the text on this card is extra-small, and the card lacks a graphic (whereas the other cards all seem to have a graphic)

Steps to reproduce

1. In Firefox on Android, go to the Settings (from the 3-dot menu) and tap the Sync section at the top
2. Tap "Ready to Scan" to open a QR-code-scanner.
3. On your desktop Firefox (where you've set up with Firefox Sync), visit https://firefox.com/pair and click "Get Started"
4. Scan the QR code.
5. Click through the steps on your computer, until you get to the "Approval now required" card.

Expected result

The "from your other device" text should be readable and reasonably-prominent.

Actual result

The "from your other device" text is awkwardly small -- smaller than any other text in the whole flow, it seems? Looking in devtools, that's because it's literally wrapped in a <small> tag which gives it font-size:80%, which works out to 11.2px in devtools computed-style view. That's pretty small.

It's odd for this text to be small, since it's sort-of the most important text on this card -- it's the text that tells you where to go to perform the next step. (There's other text below this that reiterates this, e.g. "Firefox on Android", but it still feels weird for this "on your other device" text to be smaller than the rest.)

Environment

My desktop environment (where I'm seeing this) is Firefox 121.0a1 (2023-11-13) on Ubuntu 22.04

Screenshot of the card in question -- note the extremely-small "from your other device" text:

┆Issue is synchronized with this Jira Task

[dholbert]

Ah, maybe this was fixed already and I just happened to hit this just before the fix was deployed. :)

Searching the github-source to find this UI, I found https://github.com/mozilla/fxa/blame/f66607fa6557b240de28c0625995eda6c2afa3bd/packages/fxa-content-server/app/scripts/templates/pair/supp_wait_for_auth.mustache#L4 which now has <small class="card-subheader">from your other device</small>.

I'm not getting that class="card-subheader" locally, but possibly just because the commit hasn't made it to production yet. If I manually add that class="card-subheader" in DevTools, then that element becomes the same size as the surrounding text (14px) which addresses the problem.

So: this is probably already-fixed with the fix in-the-pipeline.