refactor(clerk-js): Social buttons mobile layout

.changeset/clean-taxes-check.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': minor
+---
+
+Update SocialButtons to show "Continue with" prefix for last auth strategy, and improve mobile layout consistency.

packages/clerk-js/src/ui/elements/SocialButtons.tsx

@@ -28,7 +28,7 @@ import { distributeStrategiesIntoRows } from './utils';
 
 const SOCIAL_BUTTON_BLOCK_THRESHOLD = 2;
 const SOCIAL_BUTTON_PRE_TEXT_THRESHOLD = 1;
-const MAX_STRATEGIES_PER_ROW = 6;
+const MAX_STRATEGIES_PER_ROW = 5;
 
 export type SocialButtonsProps = React.PropsWithChildren<{
   enableOAuthProviders: boolean;
@@ -100,7 +100,9 @@ export const SocialButtons = React.memo((props: SocialButtonsRootProps) => {
     MAX_STRATEGIES_PER_ROW,
     lastAuthenticationStrategy,
   );
+  const strategiesCount = lastAuthenticationStrategyPresent ? strategies.length - 1 : strategies.length;
   const strategyRowOneLength = strategyRows.at(lastAuthenticationStrategyPresent ? 1 : 0)?.length ?? 0;
+  const shouldForceSingleColumnOnMobile = !lastAuthenticationStrategyPresent && strategies.length === 2;
 
   const preferBlockButtons =
     socialButtonsVariant === 'blockButton'
@@ -151,34 +153,38 @@ export const SocialButtons = React.memo((props: SocialButtonsRootProps) => {
           sx={t => ({
             justifyContent: 'center',
             [mqu.sm]: {
-              gridTemplateColumns: 'repeat(1, 1fr)',
+              // Force single-column on mobile when 2 strategies are present (without last auth) to prevent
+              // label overflow. When last auth is present, only 1 strategy remains here, so overflow isn't a concern.
+              gridTemplateColumns: shouldForceSingleColumnOnMobile ? 'repeat(1, minmax(0, 1fr))' : undefined,
             },
             gridTemplateColumns:
               strategies.length < 1
-                ? `repeat(1, 1fr)`
+                ? `repeat(1, minmax(0, 1fr))`
                 : `repeat(${row.length}, ${
                     rowIndex === 0
-                      ? `1fr`
+                      ? `minmax(0, 1fr)`
                       : // Calculate the width of each button based on the width of the buttons within the first row.
                         // t.sizes.$2 is used here to represent the gap defined on the Grid component.
-                        `calc((100% - (${strategyRowOneLength} - 1) * ${t.sizes.$2}) / ${strategyRowOneLength})`
+                        `minmax(0, calc((100% - (${strategyRowOneLength} - 1) * ${t.sizes.$2}) / ${strategyRowOneLength}))`
                   })`,
           })}
         >
           {row.map(strategy => {
-            const label =
-              strategies.length === SOCIAL_BUTTON_PRE_TEXT_THRESHOLD
-                ? `Continue with ${strategyToDisplayData[strategy].name}`
-                : strategyToDisplayData[strategy].name;
+            const shouldShowPreText =
+              strategiesCount === SOCIAL_BUTTON_PRE_TEXT_THRESHOLD ||
+              (strategy === lastAuthenticationStrategy && row.length === 1);
 
-            const localizedText =
-              strategies.length === SOCIAL_BUTTON_PRE_TEXT_THRESHOLD
-                ? localizationKeys('socialButtonsBlockButton', {
-                    provider: strategyToDisplayData[strategy].name,
-                  })
-                : localizationKeys('socialButtonsBlockButtonManyInView', {
-                    provider: strategyToDisplayData[strategy].name,
-                  });
+            const label = shouldShowPreText
+              ? `Continue with ${strategyToDisplayData[strategy].name}`
+              : strategyToDisplayData[strategy].name;
+
+            const localizedText = shouldShowPreText
+              ? localizationKeys('socialButtonsBlockButton', {
+                  provider: strategyToDisplayData[strategy].name,
+                })
+              : localizationKeys('socialButtonsBlockButtonManyInView', {
+                  provider: strategyToDisplayData[strategy].name,
+                });
 
             const imageOrInitial = strategyToDisplayData[strategy].iconUrl ? (
               <Image