fix(fxa-settings): prevent CJK button labels breaking one character per line - #21014
Open
vpomerleau wants to merge 1 commit into
Open
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
vpomerleau
force-pushed
the
contrib/pr-20724-cjk-button-wrapping
branch
from
August 13, 2026 19:33
fa280e8 to
95ce9ff
Compare
vpomerleau
marked this pull request as ready for review
August 13, 2026 19:35
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.