fix(clerk-js): Adjust verification modal placement and card logo (#5153)

clerk · Feb 14, 2025 · 14fd729 · 14fd729
1 parent 80e6ba0
commit 14fd729
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 2 deletions.
diff --git a/.changeset/silent-pets-happen.md b/.changeset/silent-pets-happen.md
@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Adjust verification modal vertical alignment and remove logo usage within verification cards.
diff --git a/packages/clerk-js/src/ui/Components.tsx b/packages/clerk-js/src/ui/Components.tsx
@@ -403,7 +403,6 @@ const Components = (props: ComponentsProps) => {
       startPath={buildVirtualRouterUrl({ base: '/user-verification', path: urlStateParam?.path })}
       componentName={'UserVerificationModal'}
       modalContainerSx={{ alignItems: 'center' }}
-      modalContentSx={t => ({ height: `min(${t.sizes.$176}, calc(100% - ${t.sizes.$12}))`, margin: 0 })}
     >
       <UserVerificationModal {...userVerificationModal} />
     </LazyModalRenderer>

diff --git a/packages/clerk-js/src/ui/elements/VerificationCodeCard.tsx b/packages/clerk-js/src/ui/elements/VerificationCodeCard.tsx
@@ -43,7 +43,7 @@ export const VerificationCodeCard = (props: PropsWithChildren<VerificationCodeCa
   return (
     <Card.Root>
       <Card.Content>
-        <Header.Root showLogo>
+        <Header.Root>
           <Header.Title localizationKey={props.cardTitle} />
           <Header.Subtitle localizationKey={props.cardSubtitle} />
           <IdentityPreview