fix(ui): make icon social buttons match text button height

.changeset/social-icon-button-height.md

@@ -0,0 +1,5 @@
+---
+'@clerk/ui': patch
+---
+
+Fix icon-only social buttons rendering taller than the ones with text. They now size to the same height as the text (block) buttons across all appearance spacing and font-size settings, keeping every social button in a row consistent.

packages/ui/src/elements/SocialButtons.tsx

@@ -249,13 +249,19 @@ const SocialButtonIcon = forwardRef((props: SocialButtonProps, ref: Ref<HTMLButt
       variant='outline'
       colorScheme='neutral'
       hoverAsFocus
-      sx={t => ({
-        minHeight: t.sizes.$8,
-        width: '100%',
-      })}
+      sx={{ width: '100%' }}
       {...rest}
     >
-      {icon}
+      {/* Reserve one line of button text so the icon button matches the height of the
+          block button (and its siblings) across any theme spacing/font size, instead of
+          pinning to a static minHeight that stops tracking the text-based controls. */}
+      <Flex
+        as='span'
+        center
+        sx={{ minHeight: '1lh' }}
+      >
+        {icon}
+      </Flex>
     </Button>
   );
 });