[React] Fix: Improve social button icon arrangement (#4718)

![Screenshot 2024-09-19 at 5 13 13 PM](https://github.com/user-attachments/assets/ae06781e-6b44-4231-9385-0a4ac27be563)
![Screenshot 2024-09-19 at 5 13 07 PM](https://github.com/user-attachments/assets/23b3f073-b6ab-4aae-8be8-a5820763cd65)

<!-- start pr-codex -->

---

## PR-Codex overview
This PR improves the layout of social icons in the Connect UI by organizing them into columns for better user experience.

### Detailed summary
- Added logic to arrange social icons into columns based on the number of login options
- Updated the layout of social buttons to display them in columns instead of a row

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

Author: gregfromstl

.changeset/rude-frogs-learn.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Improve arrangement of social icons in Connect UI

packages/thirdweb/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsx

@@ -135,6 +135,27 @@ export const ConnectWalletSocialOptions = (
   const isEmailEnabled = emailIndex !== -1;
   const phoneIndex = authOptions.indexOf("phone");
   const isPhoneEnabled = phoneIndex !== -1;
+  const socialLogins: SocialAuthOption[] = authOptions.filter((o) =>
+    socialAuthOptions.includes(o as SocialAuthOption),
+  ) as SocialAuthOption[];
+
+  const columnCount = useMemo(() => {
+    switch (socialLogins.length) {
+      case 7:
+        return 4;
+      case 6:
+        return 4;
+      default:
+        return 5;
+    }
+  }, [socialLogins.length]);
+
+  const socialLoginColumns: SocialAuthOption[][] = useMemo(() => {
+    return Array.from(
+      { length: Math.ceil(socialLogins.length / columnCount) },
+      (_, i) => socialLogins.slice(i * columnCount, (i + 1) * columnCount),
+    );
+  }, [socialLogins, columnCount]);
 
   const [manualInputMode, setManualInputMode] = useState<
     "email" | "phone" | "none" | null
@@ -175,10 +196,6 @@ export const ConnectWalletSocialOptions = (
     type = "tel";
   }
 
-  const socialLogins = authOptions.filter((o) =>
-    socialAuthOptions.includes(o as SocialAuthOption),
-  );
-
   const hasSocialLogins = socialLogins.length > 0;
   const ecosystemInfo = isEcosystemWallet(wallet)
     ? {
@@ -315,49 +332,46 @@ export const ConnectWalletSocialOptions = (
       )}
       {/* Social Login */}
       {hasSocialLogins && (
-        <Container
-          flex="row"
-          center="x"
-          gap={socialLogins.length > 4 ? "xs" : "sm"}
-          style={{
-            justifyContent: "space-between",
-            display: "grid",
-            gridTemplateColumns: `repeat(${socialLogins.length}, 1fr)`,
-          }}
-        >
-          {socialLogins.map((loginMethod) => {
-            const imgIconSize = (() => {
-              if (!showOnlyIcons) {
-                return iconSize.md;
-              }
-              if (socialLogins.length > 4) {
-                return iconSize.md;
-              }
-              return iconSize.lg;
-            })();
-
-            return (
-              <SocialButton
-                aria-label={`Login with ${loginMethod}`}
-                data-variant={showOnlyIcons ? "icon" : "full"}
-                key={loginMethod}
-                variant={"outline"}
-                disabled={props.disabled}
-                onClick={() => {
-                  handleSocialLogin(loginMethod as SocialAuthOption);
-                }}
-              >
-                <Img
-                  src={socialIcons[loginMethod as SocialAuthOption]}
-                  width={imgIconSize}
-                  height={imgIconSize}
-                  client={props.client}
-                />
-                {!showOnlyIcons &&
-                  `${socialLogins.length === 1 ? "Continue with " : ""}${loginMethodsLabel[loginMethod as SocialAuthOption]}`}
-              </SocialButton>
-            );
-          })}
+        <Container flex="column" gap={socialLogins.length > 4 ? "xs" : "sm"}>
+          {socialLoginColumns.map((column) => (
+            <SocialButtonRow key={column[0]}>
+              {column.map((loginMethod) => {
+                const imgIconSize = (() => {
+                  if (!showOnlyIcons) {
+                    return iconSize.md;
+                  }
+                  if (socialLogins.length > 4) {
+                    return iconSize.md;
+                  }
+                  return iconSize.lg;
+                })();
+                return (
+                  <SocialButton
+                    aria-label={`Login with ${loginMethod}`}
+                    data-variant={showOnlyIcons ? "icon" : "full"}
+                    key={loginMethod}
+                    variant={"outline"}
+                    disabled={props.disabled}
+                    onClick={() => {
+                      handleSocialLogin(loginMethod as SocialAuthOption);
+                    }}
+                    style={{
+                      flexGrow: socialLogins.length < 7 ? 1 : 0,
+                    }}
+                  >
+                    <Img
+                      src={socialIcons[loginMethod as SocialAuthOption]}
+                      width={imgIconSize}
+                      height={imgIconSize}
+                      client={props.client}
+                    />
+                    {!showOnlyIcons &&
+                      `${socialLogins.length === 1 ? "Continue with " : ""}${loginMethodsLabel[loginMethod as SocialAuthOption]}`}
+                  </SocialButton>
+                );
+              })}
+            </SocialButtonRow>
+          ))}
         </Container>
       )}
 
@@ -476,8 +490,27 @@ export const ConnectWalletSocialOptions = (
   );
 };
 
+const SocialButtonRow = (props: { children: React.ReactNode[] }) => (
+  <Container
+    flex="row"
+    center="x"
+    gap={props.children.length > 4 ? "xs" : "sm"}
+    style={{
+      justifyContent: "center",
+      display: "flex",
+      ...{
+        "& > *": {
+          flexBasis: `${100 / props.children.length}%`,
+          maxWidth: `${100 / props.children.length}%`,
+        },
+      },
+    }}
+  >
+    {props.children}
+  </Container>
+);
+
 const SocialButton = /* @__PURE__ */ styled(Button)({
-  flexGrow: 1,
   "&[data-variant='full']": {
     display: "flex",
     justifyContent: "flex-start",