fix(ui): update the free trial badge spacing and rendering (#8712)

l-armstrong · web-flow · commit 03c83baab94e · 2026-06-02T15:35:11.000-05:00
diff --git a/.changeset/empty-spiders-happen.md b/.changeset/empty-spiders-happen.md
@@ -0,0 +1,5 @@
+---
+'@clerk/ui': patch
+---
+
+"Fix rendering issue for free trial badge."
diff --git a/packages/ui/src/elements/LineItems.tsx b/packages/ui/src/elements/LineItems.tsx
@@ -113,7 +113,7 @@ const Title = React.forwardRef<HTMLTableCellElement, TitleProps>(({ title, descr
           sx={t => ({
             display: 'inline-flex',
             alignItems: 'center',
-            gap: t.space.$1,
+            gap: t.space.$2,
           })}
         >
           {icon ? (
@@ -124,7 +124,7 @@ const Title = React.forwardRef<HTMLTableCellElement, TitleProps>(({ title, descr
             />
           ) : null}
           <Span localizationKey={title} />
-          {badge}
+          {badge ? <Box>{badge}</Box> : null}
         </Span>
       ) : null}
       {descriptionElements.length > 0 ? (

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@clerk/ui': patch
 +---
++
 +"Fix rendering issue for free trial badge."