refactor(clerk-js): Social buttons mobile layout

.changeset/clean-taxes-check.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Update SocialButtons layout to be consistent across desktop and mobile.

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

@@ -20,15 +20,15 @@ import {
   useAppearance,
 } from '../customizables';
 import { useEnabledThirdPartyProviders } from '../hooks';
-import { mqu, type PropsOfComponent } from '../styledSystem';
+import { type PropsOfComponent } from '../styledSystem';
 import { sleep } from '../utils/sleep';
 import { LastAuthenticationStrategyBadge } from './Badge';
 import { useCardState } from './contexts';
 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;
@@ -150,18 +150,15 @@ export const SocialButtons = React.memo((props: SocialButtonsRootProps) => {
           gap={2}
           sx={t => ({
             justifyContent: 'center',
-            [mqu.sm]: {
-              gridTemplateColumns: 'repeat(1, 1fr)',
-            },
             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}))`
                   })`,
           })}
         >