UI: Fix Banner component z-index

fuma-nama · Sep 4, 2024 · 6bcd263 · 6bcd263
1 parent 6a1fe4e
commit 6bcd263
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 4 deletions.
diff --git a/.changeset/rotten-needles-drop.md b/.changeset/rotten-needles-drop.md
@@ -0,0 +1,5 @@
+---
+'fumadocs-ui': patch
+---
+
+Fix Banner component z-index
diff --git a/apps/docs/components/preview/index.tsx b/apps/docs/components/preview/index.tsx
@@ -224,8 +224,10 @@ export default {
   banner: (
     <Wrapper>
       <div className="flex flex-col gap-4">
-        <Banner>Be careful, Fumadocs v99 has released</Banner>
-        <Banner id="99">Be careful, this banner can be closed</Banner>
+        <Banner className="z-0">Be careful, Fumadocs v99 has released</Banner>
+        <Banner className="z-0" id="99">
+          Be careful, this banner can be closed
+        </Banner>
       </div>
     </Wrapper>
   ),

diff --git a/packages/ui/src/components/banner.tsx b/packages/ui/src/components/banner.tsx
@@ -25,7 +25,7 @@ export function Banner({
       id={id}
       {...props}
       className={cn(
-        'relative flex h-12 flex-row items-center justify-center bg-fd-secondary px-4 text-center text-sm font-medium',
+        'relative z-40 flex h-12 flex-row items-center justify-center bg-fd-secondary px-4 text-center text-sm font-medium',
         !open && 'hidden',
         props.className,
       )}

diff --git a/packages/ui/src/components/layout/nav.tsx b/packages/ui/src/components/layout/nav.tsx
@@ -51,7 +51,7 @@ export function NavBox({
     <header
       {...props}
       className={cn(
-        'sticky top-0 z-50 border-b transition-colors',
+        'sticky top-0 z-40 border-b transition-colors',
         transparent
           ? 'border-transparent'
           : 'border-fd-foreground/10 bg-fd-background/60 backdrop-blur-md',