fix(clerk-js): UP/OP footer padding on small screens (#4191)

clerk · Sep 19, 2024 · ef824dc · ef824dc
1 parent 2e5c550
commit ef824dc
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/.changeset/nasty-walls-double.md b/.changeset/nasty-walls-double.md
@@ -0,0 +1,5 @@
+---
+"@clerk/clerk-js": patch
+---
+
+Fix UserProfile and OrganizationProfile wrong padding on footer for small screens when Development notice is enabled
diff --git a/packages/clerk-js/src/ui/elements/Card/CardFooter.tsx b/packages/clerk-js/src/ui/elements/Card/CardFooter.tsx
@@ -37,7 +37,7 @@ export const CardFooter = React.forwardRef<HTMLDivElement, CardFooterProps>((pro
   });
 
   const profileCardFooterStyles = (t: InternalTheme) => ({
-    padding: `${t.space.$4} ${t.space.$6} ${t.space.$2}`,
+    padding: `${t.space.$4} ${t.space.$8}`,
   });
 
   return (
@@ -59,7 +59,7 @@ export const CardFooter = React.forwardRef<HTMLDivElement, CardFooterProps>((pro
             marginTop: 0,
           },
         }),
-        isProfileFooter ? profileCardFooterStyles : footerStyles,
+        !isProfileFooter && footerStyles,
         sx,
       ]}
       {...rest}
@@ -72,6 +72,7 @@ export const CardFooter = React.forwardRef<HTMLDivElement, CardFooterProps>((pro
         devModeNoticeSx={t => ({
           padding: t.space.$none,
         })}
+        outerSx={isProfileFooter ? profileCardFooterStyles : undefined}
         withDevOverlay
       />
     </Flex>