fix(ui): Prevent banner background scaling (#3766)

clerk · Jul 19, 2024 · 09ad995 · 09ad995
1 parent b2788f6
commit 09ad995
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 2 deletions.
diff --git a/.changeset/sharp-cycles-wave.md b/.changeset/sharp-cycles-wave.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/ui/src/primitives/card.tsx b/packages/ui/src/primitives/card.tsx
@@ -144,8 +144,8 @@ export const Banner = React.forwardRef(function CardBanner(
           'pointer-events-none absolute inset-0 w-full',
           // manually nudge the radius by `1px` for a snug fit
           'rounded-b-[calc(theme(borderRadius.xl)-0.0625rem)]',
-          '[background-image:repeating-linear-gradient(-45deg,theme(colors.orange.50),_theme(colors.orange.50)_6px,_theme(colors.orange.100/0.75)_6px,_theme(colors.orange.100/0.75)_12px)]',
-          '[mask-image:linear-gradient(to_top,_black,transparent_8rem)]',
+          '[background-image:repeating-linear-gradient(-45deg,theme(colors.orange.50),theme(colors.orange.50)_6px,theme(colors.orange.100/0.75)_6px,theme(colors.orange.100/0.75)_12px)]',
+          '[mask-image:linear-gradient(to_top,black,transparent_128px)]',
         )}
       />
       <div className='absolute inset-x-0 bottom-0 z-10 flex h-[--card-body-padding] w-full items-center justify-center'>