Skip to content

fix(fxa-settings): prevent CJK button labels breaking one character per line - #21014

Open
vpomerleau wants to merge 1 commit into
mainfrom
contrib/pr-20724-cjk-button-wrapping
Open

fix(fxa-settings): prevent CJK button labels breaking one character per line#21014
vpomerleau wants to merge 1 commit into
mainfrom
contrib/pr-20724-cjk-button-wrapping

Conversation

@vpomerleau

@vpomerleau vpomerleau commented Aug 12, 2026

Copy link
Copy Markdown
Contributor

Because

This pull request

  • Cherry-picks @sreecharan-desu's commit unmodified onto current main; they remain the commit author.
  • .cta-xl now uses grow shrink-0 basis-0 instead of flex-1, so labels are not compressed.
  • Adds a higher-specificity shrink-0 whitespace-nowrap rule for the cta-* variants, plus the same for cta-* inside unit-row-actions.
  • Lets paired modal action buttons wrap as a group (flex-wrap) when horizontal space is tight.

Issue that this pull request solves

Closes: #18683

Checklist

Put an x in the boxes that apply

  • My commit is GPG signed.
  • If applicable, I have modified or added tests which pass locally.
  • I have added necessary documentation (if appropriate).
  • I have verified that my changes render correctly in RTL (if appropriate).
  • I have manually reviewed all AI generated code.

Screenshots

Before
image

After
image

How to review (Optional)

  • Key files/areas to focus on: packages/fxa-react/styles/ctas.css, packages/fxa-settings/src/styles/unit-row.css, Settings/Modal/index.tsx, Settings/SubRow/index.tsx
  • Suggested review order: shared CTA CSS → unit-row CSS → modal/sub-row JSX
  • Risky or complex parts: cta-xl is used 58 times in fxa-settings and 11 call sites combine it with flex-1. The override relies on element+class specificity (button.cta-primary) beating the flex-1 utility. Worth confirming English and German buttons still lay out correctly at mobile and landscape widths.

Other information (Optional)

  • No automated coverage is added — the change is CSS and className only. Manual CJK verification is still needed.
  • Local run on this branch: fxa-settings integration suite 2948 passed / 27 snapshots passed, tsc --noEmit clean, ESLint clean on both changed TSX files. One failure, Pair2/Supplicant/TimeoutAndCancel, reproduces identically on unmodified main and is unrelated to this change.

This comment was marked as outdated.

…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
vpomerleau force-pushed the contrib/pr-20724-cjk-button-wrapping branch from fa280e8 to 95ce9ff Compare August 13, 2026 19:33
@vpomerleau
vpomerleau marked this pull request as ready for review August 13, 2026 19:35
@vpomerleau
vpomerleau requested a review from a team as a code owner August 13, 2026 19:35
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Line breaking on individual characters in button text for Chinese / Japanese / Korean in settings

3 participants