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 #18683

Author: sreecharan-desu

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;
+  }
+}

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

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"

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 {