fix(clerk-js): Ensure scrollbox fills the available height (#7222)

alexcarpenter · web-flow · commit 4d7a6e006922 · 2025-11-14T15:12:41.000-05:00
diff --git a/.changeset/proud-months-go.md b/.changeset/proud-months-go.md
@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Ensure scrollbox height fills the available space.
diff --git a/packages/clerk-js/src/ui/elements/ProfileCard/ProfileCardContent.tsx b/packages/clerk-js/src/ui/elements/ProfileCard/ProfileCardContent.tsx
@@ -44,6 +44,7 @@ export const ProfileCardContent = (props: ProfileCardContentProps) => {
         borderColor: t.colors.$borderAlpha150,
         marginBlock: '-1px',
         marginInlineEnd: '-1px',
+        flex: 1,
       })}
       data-clerk-profile-scroll-box-root={scrollBoxId}
     >

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@clerk/clerk-js': patch
 +---
++
 +Ensure scrollbox height fills the available space.
Original file line number	Diff line number	Diff line change
`@@ -44,6 +44,7 @@ export const ProfileCardContent = (props: ProfileCardContentProps) => {`
`44`	`44`	`borderColor: t.colors.$borderAlpha150,`
`45`	`45`	`marginBlock: '-1px',`
`46`	`46`	`marginInlineEnd: '-1px',`
	`47`	`+ flex: 1,`
`47`	`48`	`})}`
`48`	`49`	`data-clerk-profile-scroll-box-root={scrollBoxId}`
`49`	`50`	`>`