From 4bdef08967e7fcf98ed31b1c91c030abc75e6d7b Mon Sep 17 00:00:00 2001
From: sreecharan-desu <sreecharan309@gmail.com>
Date: Sun, 21 Jun 2026 13:06:07 +0530
Subject: [PATCH] fix(fxa-settings): prevent CJK button labels breaking one
 character per 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 mozilla/fxa#18683
---
 packages/fxa-react/styles/ctas.css            | 21 ++++++++++++++++++-
 .../src/components/Settings/Modal/index.tsx   |  2 +-
 .../src/components/Settings/SubRow/index.tsx  |  2 +-
 packages/fxa-settings/src/styles/unit-row.css |  5 +++++
 4 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/packages/fxa-react/styles/ctas.css b/packages/fxa-react/styles/ctas.css
index 091a0f941d3..21d4ca79638 100644
--- a/packages/fxa-react/styles/ctas.css
+++ b/packages/fxa-react/styles/ctas.css
@@ -55,7 +55,8 @@
   /* Max-height is a likely temp "hack" for .spinner until it's converted to TW */
   /* font-color is also a hack until all buttons are TWified */
   .cta-xl {
-    @apply flex-1 font-bold text-base p-4 rounded-md;
+    /* grow without shrinking — prevents CJK labels breaking one character per line */
+    @apply grow shrink-0 basis-0 font-bold text-base p-4 rounded-md;
   }
 
   .cta-caution {
@@ -202,3 +203,21 @@
     }
   }
 }
+
+@layer utilities {
+  /*
+   * Flex children default to flex-shrink: 1, which squeezes CJK button labels
+   * to one character per line in settings rows and modals. Higher specificity
+   * than the flex-1 utility ensures shrink-0 wins when both are present.
+   */
+  button.cta-neutral,
+  a.cta-neutral,
+  button.cta-primary,
+  a.cta-primary,
+  button.cta-caution,
+  a.cta-caution,
+  button.cta-primary-cms,
+  a.cta-primary-cms {
+    @apply shrink-0 whitespace-nowrap;
+  }
+}
diff --git a/packages/fxa-settings/src/components/Settings/Modal/index.tsx b/packages/fxa-settings/src/components/Settings/Modal/index.tsx
index 5851cca2bec..ffec768768d 100644
--- a/packages/fxa-settings/src/components/Settings/Modal/index.tsx
+++ b/packages/fxa-settings/src/components/Settings/Modal/index.tsx
@@ -98,7 +98,7 @@ export const Modal = ({
               {children}
 
               {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">
                   {hasCancelButton && (
                     <FtlMsg id="modal-cancel-button">
                       <button
diff --git a/packages/fxa-settings/src/components/Settings/SubRow/index.tsx b/packages/fxa-settings/src/components/Settings/SubRow/index.tsx
index eaa0b107bc8..cbafb6778a4 100644
--- a/packages/fxa-settings/src/components/Settings/SubRow/index.tsx
+++ b/packages/fxa-settings/src/components/Settings/SubRow/index.tsx
@@ -441,7 +441,7 @@ const PasskeyDeleteModal = ({
           using a different way.
         </p>
       </FtlMsg>
-      <div className="flex justify-center mx-2 mt-6">
+      <div className="flex flex-wrap justify-center mx-2 mt-6">
         <FtlMsg id="passkey-delete-modal-cancel-button">
           <button
             className="cta-neutral mx-2 flex-1 cta-xl"
diff --git a/packages/fxa-settings/src/styles/unit-row.css b/packages/fxa-settings/src/styles/unit-row.css
index 0bfa3ffb055..6f5eb0f8ced 100644
--- a/packages/fxa-settings/src/styles/unit-row.css
+++ b/packages/fxa-settings/src/styles/unit-row.css
@@ -15,6 +15,11 @@
 
   &-actions {
     @apply w-full items-baseline mt-2;
+
+    a[class*='cta-'],
+    button[class*='cta-'] {
+      @apply shrink-0 whitespace-nowrap;
+    }
   }
 
   &-hr {