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

[sreecharan-desu]

Because

• Settings page CTA buttons shrink in flex layouts, causing Japanese, Chinese, and Korean labels to stack one character per line (Line breaking on individual characters in button text for Chinese / Japanese / Korean in settings #18683).
• Modal button containers used gap-2 alongside child mx-2 margins, doubling horizontal spacing and causing premature wrapping (Copilot review feedback).

This pull request

• Apply shrink-0 and whitespace-nowrap to shared CTA styles (with specificity high enough to override flex-1 on modal buttons).
• Prevent CTA buttons/links inside unit-row actions from shrinking and wrapping.
• Allow paired modal/sub-row action buttons to wrap as a group when horizontal space is limited.
• Remove gap-2 from modal button containers; rely on existing child mx-2 margins for spacing.

Issue that this pull request solves

Closes: #18683

Checklist

• 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). — N/A: change targets CJK line-breaking in LTR button labels; no RTL layout changes.
• I have manually reviewed all AI generated code.

How to review (Optional)

• Key files/areas to focus on: packages/fxa-react/styles/ctas.css, packages/fxa-settings/src/styles/unit-row.css, Modal/index.tsx, SubRow/index.tsx
• Suggested review order: shared CTA CSS → unit-row CSS → modal/sub-row JSX
• Risky or complex parts: ensure English/German button layouts still work on mobile and landscape widths

Test plan

• Set browser language to Japanese (or Chinese/Korean) and open the account settings page.
• Confirm row action buttons (Add, Change, Disable, etc.) render on a single line.
• Open a settings modal with Cancel/Confirm and verify the Cancel label does not break one character per line.
• Spot-check English/German locales to ensure buttons still layout correctly on mobile and landscape widths.

[Copilot]

Pull request overview

This PR addresses a flexbox/layout issue in fxa-settings where CJK (Chinese/Japanese/Korean) CTA button labels could be squeezed into extremely narrow widths and end up rendering one character per line.

Changes:

• Updated shared CTA styling to prevent flex items from shrinking and to keep CTA labels on one line.
• Applied additional CTA non-shrinking / no-wrapping rules within settings unit-row action areas.
• Allowed modal/button groups to wrap when space is constrained by adding flex-wrap to the button container.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.

File	Description
packages/fxa-settings/src/styles/unit-row.css	Prevent CTA buttons/links inside unit-row actions from shrinking and wrapping.
packages/fxa-settings/src/components/Settings/SubRow/index.tsx	Allow passkey delete modal action buttons to wrap as a group.
packages/fxa-settings/src/components/Settings/Modal/index.tsx	Allow generic modal action buttons to wrap as a group.
packages/fxa-react/styles/ctas.css	Adjust CTA sizing behavior and add higher-specificity utilities to override flex-1 shrink behavior and prevent wrapping.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[sreecharan-desu]

Addressed the Copilot review feedback and refreshed the branch:

• Removed gap-2 from modal button containers (child buttons already use mx-2) in Modal/index.tsx and SubRow/index.tsx.
• Rebased onto latest main so CI runs against current base.

Ready for another look when you have a moment.