fix(settings): break long email in verification code pages#18832
fix(settings): break long email in verification code pages#18832MagentaManifold merged 1 commit intomainfrom
Conversation
|
Unfortunately this only works in Storybook because it only works with the fallback, not localized strings. |
MagentaManifold
force-pushed
the
FXA-10726
branch
2 times, most recently
from
a20099e to
60bad4e
Compare
vpomerleau
left a comment
vpomerleau
left a comment
There was a problem hiding this comment.
Great work, tested locally and works as intended! The only change I would recommend before merging is using <FtlMsg>, we are standardizing towards that custom wrapper.
| ); | ||
| screen.getByText( | ||
| `Enter the code that was sent to ${MOCK_EMAIL} within 5 minutes.` | ||
| (_, element) => |
There was a problem hiding this comment.
Nice way to account for the <span> 👍
| <EmailCodeImage /> | ||
|
|
||
| <FtlMsg id="signin-token-code-instruction" vars={{ email }}> | ||
| <Localized |
There was a problem hiding this comment.
<FtlMsg> (custom wrapper) is preferred over <Localized>
There was a problem hiding this comment.
PageSecondaryEmailVerify used Localized so I thought it does something different from FtlMsg. TIL FtlMsg is literally just a one-line wrapper to enforce a child prop. Thanks for your suggestions!
There was a problem hiding this comment.
Part of the intent of the wrapper is to unblock more customized localization testing in the future. Pages with "Localized" are older and were created before the wrapper was introduced.
| <EmailCodeImage /> | ||
|
|
||
| <FtlMsg id="confirm-signup-code-instruction" vars={{ email: email! }}> | ||
| <Localized |
There was a problem hiding this comment.
Same here, <FtlMsg> is preferred
Because: * The “Enter your confirmation code” page has UI issues on mobile when using a long email address This commit: * breaks long email into multiple lines so that the lines does not grow out of the box (in both ConfirmSignupCode and SigninTokenCode) Closes FXA-10726
3 participants
Because
This pull request
Issue that this pull request solves
Closes: FXA-10726
Checklist
Put an
xin the boxes that applyScreenshots (Optional)