Update magic login footer text to prevent wrapping

[chriskmnds]

Closes https://linear.app/a8c/issue/DSGCOM-153/login-magic-code-on-confirm-page-update-footer-to-a-tertiary-resend

Part of https://linear.app/a8c/issue/DSGCOM-153/login-magic-code-on-confirm-page-update-footer-to-a-tertiary-resend

Proposed Changes

• Updated footer text on magic login confirmation pages to match Figma designs
• Changed "Check your spam folder" to "Check spam" to prevent text wrapping across multiple lines
• Updated magic code verification page to use "Didn't get the code?" (semantically correct for users entering the code)
• Updated magic link confirmation page to use "Didn't get the email?" (semantically correct for users waiting for the email)
• Added comma before "or" in both footer texts for better readability

Before	After

Why are these changes being made?

• The footer text on magic login confirmation pages needed to be updated to match the Figma designs
• The original text "Check your spam folder" was too long and wrapped across 3 lines on desktop, creating a poor visual experience
• We reworked the text to be more concise ("Check spam") so it fits on 2 lines without requiring the form to be wider
• This improves the visual layout and ensures consistent messaging across both magic link and magic code flows

Testing Instructions

1. Navigate to /log-in/link and submit the form with an email address (e.g., [email protected])
2. Verify the confirmation page shows: "Didn't get the email? You might want to double check if the email address is associated with your account, or reset your password."
3. Navigate to /log-in/jetpack/link and submit the form with an email address
4. Verify the code verification page shows: "Didn't get the code? Check spam, or resend the email" (should fit on 2 lines)
5. Verify the second line shows: "Wrong email or account? Use a different account"
6. Check that the footer text doesn't wrap to 3 lines on desktop viewport sizes
7. Test on mobile to ensure text remains readable

Pre-merge Checklist

• Has the general commit checklist been followed? (PCYsg-hS-p2)
• Have you written new tests for your changes?
• Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
• Have you checked for TypeScript, React or other console errors?
• Have you tested accessibility for your changes? Ensure the feature remains usable with various user agents (e.g., browsers), interfaces (e.g., keyboard navigation), and assistive technologies (e.g., screen readers) (PCYsg-S3g-p2).
• Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
• Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
  • For UI changes, have we tested the change in various languages (for example, ES, PT, FR, or DE)? The length of text and words vary significantly between languages.
• For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?

[github-actions]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-162091

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-162091&env=jetpack

Automattic for Agencies live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-162091&env=a8c-for-agencies

[chriskmnds]

@jasmussen what do you think of the copy change? The goal is to keep the text on two lines (no wrapping), while not expanding beyond the form (or to expand the form itself). There are alternatives:

• @matt-west had also suggested just a "Resend code" button.
• Make the form slightly wider, although that will not be consistent with the rest

[dzver]

This change will make 2 strings untranslated while decreasing the clarity of the message.

The text would be longer in other languages and it would be on 3 or maybe 4 lines anyways.

[chriskmnds]

This change will make 2 strings untranslated while decreasing the clarity of the message.

The text would be longer in other languages and it would be on 3 or maybe 4 lines anyways.

Indeed, good call. Totally ignored that.

Thinking what a better option would be here. It sounds like either going with just a tertiary button "resend code" or expanding the form (which again won't solve it for all translations, and I think it was wider before and we changed / or it was narrower and folks didn't like this wider one)

[jasmussen]

Thank you for the ping, thank you for the attention to detail. I wonder, can it be one paragraph, instead of two paragraphs?

I.e. the present state is this, two paragraphs:

Didn't get the code? Check your spam folder
or resend the email

Wrong email or account? Use a different account

The above is also missing some periods, in general I would always end sentences in periods, that's the most safe rule of thumb.

In any case, what I'm proposing could be something like this, one paragraph:

Didn't get the code? Check your spam folder,
or resend the email. Wrong email or account?
Use a different account.

We could rephrase further to optimize things, but Veselin has a solid point as well as far as translations. We need something that, as well as it can, handles longer languages. We should already be applying text-wrap: pretty; for this particular text, so it should avoid typographic widows.

Yet another alternative would be to keep the two separate paragraphs, but apply text-wrap: balance;. Balance tries to make all lines of text have about the same overall width. So the first example would probably look more like this:

Didn't get the code? Check your
spam folder or resend the email

Wrong email or account? Use a different account

As far as systematization, this would be a bit of an edge-case, applying custom CSS just to this, generally something to minimize, so I'm sharing the above options in case something stands out, or inspires better ideas!

[chriskmnds]

Thank you for the ping, thank you for the attention to detail. I wonder, can it be one paragraph, instead of two paragraphs?

I.e. the present state is this, two paragraphs:

Didn't get the code? Check your spam folder
or resend the email

Wrong email or account? Use a different account

The above is also missing some periods, in general I would always end sentences in periods, that's the most safe rule of thumb.

In any case, what I'm proposing could be something like this, one paragraph:

Didn't get the code? Check your spam folder,
or resend the email. Wrong email or account?
Use a different account.

We could rephrase further to optimize things, but Veselin has a solid point as well as far as translations. We need something that, as well as it can, handles longer languages. We should already be applying text-wrap: pretty; for this particular text, so it should avoid typographic widows.

Yet another alternative would be to keep the two separate paragraphs, but apply text-wrap: balance;. Balance tries to make all lines of text have about the same overall width. So the first example would probably look more like this:

Didn't get the code? Check your
spam folder or resend the email

Wrong email or account? Use a different account

As far as systematization, this would be a bit of an edge-case, applying custom CSS just to this, generally something to minimize, so I'm sharing the above options in case something stands out, or inspires better ideas!

Thanks @jasmussen. I will go through these and work something out for testing.

I am assuming the original proposal by Matt.W. to have a plain tertiary button "Resend code" for the first line, probably closer to the main CTA, we don't want that, right?

[jasmussen]

I am assuming the original proposal by Matt.W. to have a plain tertiary button "Resend code" for the first line, probably closer to the main CTA, we don't want that, right?

I don't think it's a bad idea. I'm just generally weary around changing around sensitive bits too much, and slightly at random, so often I'm veering towards the simplest solutions to try first. But it can work if all else doesn't!

[chriskmnds]

I am assuming the original proposal by Matt.W. to have a plain tertiary button "Resend code" for the first line, probably closer to the main CTA, we don't want that, right?

I don't think it's a bad idea. I'm just generally weary around changing around sensitive bits too much, and slightly at random, so often I'm veering towards the simplest solutions to try first. But it can work if all else doesn't!

Sounds good. We can test both then. :-)