fix(clerk-js): ArrowButtonBlock truncation within payment sources (#6764)

Author: alexcarpenter

.changeset/gold-cases-smash.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Fix ArrowButtonBlock truncation within payment sources

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

@@ -78,7 +78,7 @@ export const ArrowBlockButton = React.forwardRef<HTMLButtonElement, ArrowBlockBu
       {(isLoading || leftIcon) && (
         <Flex
           as='span'
-          sx={theme => ({ flex: `0 0 ${theme.space.$5}` })}
+          sx={theme => ({ width: theme.space.$5, height: theme.space.$5, flex: 'none', alignItems: 'center' })}
         >
           {isLoading ? (
             <Spinner
@@ -94,6 +94,8 @@ export const ArrowBlockButton = React.forwardRef<HTMLButtonElement, ArrowBlockBu
               sx={[
                 theme => ({
                   width: theme.sizes.$5,
+                  // Fixes a bug in Safari where the icon shifts when navigating between routes.
+                  transform: 'translateZ(0)',
                 }),
                 leftIconSx,
               ]}