fix(fxa-settings): prevent CJK button labels breaking one character per line - #21014
Draft
vpomerleau wants to merge 1 commit into
Draft
fix(fxa-settings): prevent CJK button labels breaking one character per line#21014vpomerleau wants to merge 1 commit into
vpomerleau wants to merge 1 commit into
Conversation
…er line Flex-shrink on settings row and modal CTA buttons was squeezing Japanese, Chinese, and Korean labels to a single character per line. Keep button text on one line and let paired modal actions wrap as a group when space is tight. Use child mx-2 margins for modal button spacing instead of gap-2 to avoid doubled horizontal spacing that caused premature wrapping. Fixes #18683
Contributor
There was a problem hiding this comment.
Pull request overview
This PR addresses an i18n-driven layout issue in fxa-settings where CTA button labels in CJK locales can end up wrapping one character per line due to flex shrink behavior. It does so by tightening shared CTA flex sizing, adding non-shrinking / no-wrap overrides for CTA variants (including in unit-row actions), and allowing modal action button groups to wrap as a unit when horizontal space is constrained.
Changes:
- Updates shared CTA sizing (
.cta-xl) to grow without shrinking to avoid overly-compressed labels in flex layouts. - Adds higher-specificity
shrink-0 whitespace-nowraprules for CTA variants globally and withinunit-row-actions. - Enables wrapping of paired modal/sub-row action buttons via
flex-wrapon their containers.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| packages/fxa-react/styles/ctas.css | Adjusts .cta-xl flex behavior and adds higher-specificity CTA variant rules to prevent shrinking/character-by-character wrapping. |
| packages/fxa-settings/src/styles/unit-row.css | Prevents CTA links/buttons inside unit row actions from shrinking and wrapping. |
| packages/fxa-settings/src/components/Settings/Modal/index.tsx | Allows modal action buttons to wrap as a group when space is tight. |
| packages/fxa-settings/src/components/Settings/SubRow/index.tsx | Allows passkey delete modal action buttons to wrap as a group when space is tight. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
|
|
||
| {hasButtons && ( | ||
| <div className="flex justify-center mx-auto mt-6 max-w-64"> | ||
| <div className="flex flex-wrap justify-center mx-auto mt-6 max-w-64"> |
| </p> | ||
| </FtlMsg> | ||
| <div className="flex justify-center mx-2 mt-6"> | ||
| <div className="flex flex-wrap justify-center mx-2 mt-6"> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Because
This pull request
main; they remain the commit author..cta-xlnow usesgrow shrink-0 basis-0instead offlex-1, so labels are not compressed.shrink-0 whitespace-nowraprule for thecta-*variants, plus the same forcta-*insideunit-row-actions.flex-wrap) when horizontal space is tight.Issue that this pull request solves
Closes: #18683
Checklist
Put an
xin the boxes that applyScreenshots
Before
After
How to review (Optional)
packages/fxa-react/styles/ctas.css,packages/fxa-settings/src/styles/unit-row.css,Settings/Modal/index.tsx,Settings/SubRow/index.tsxcta-xlis used 58 times in fxa-settings and 11 call sites combine it withflex-1. The override relies on element+class specificity (button.cta-primary) beating theflex-1utility. Worth confirming English and German buttons still lay out correctly at mobile and landscape widths.Other information (Optional)
classNameonly. Manual CJK verification is still needed.tsc --noEmitclean, ESLint clean on both changed TSX files. One failure,Pair2/Supplicant/TimeoutAndCancel, reproduces identically on unmodifiedmainand is unrelated to this change.