fix: #1447: fix tablet menu (#1458)

* fix(minifront): #1447: fix tablet header menu * chore: changesets
penumbra-zone · Jul 9, 2024 · e7ebfb1 · e7ebfb1
1 parent cbc2419
commit e7ebfb1
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 2 deletions.
diff --git a/.changeset/five-jobs-speak.md b/.changeset/five-jobs-speak.md
@@ -0,0 +1,5 @@
+---
+'minifront': patch
+---
+
+Fix tablet header menu styles
diff --git a/apps/minifront/src/components/header/menu/menu.tsx b/apps/minifront/src/components/header/menu/menu.tsx
@@ -6,7 +6,7 @@ import { TabletNav } from './tablet-nav';
 
 export const MenuBar = () => {
   return (
-    <div className={cn('flex w-full items-center justify-between gap-8 list-none')}>
+    <div className={cn('flex w-full items-center justify-between sm:gap-8 list-none')}>
       <MobileNav />
       <DesktopNav />
       <TabletNav />

diff --git a/apps/minifront/src/components/header/menu/tablet-nav.tsx b/apps/minifront/src/components/header/menu/tablet-nav.tsx
@@ -12,7 +12,7 @@ export const TabletNav = () => {
   const navigate = useNavigate();
 
   return (
-    <NavigationMenu.Root delayDuration={0}>
+    <NavigationMenu.Root delayDuration={0} className='relative'>
       <NavigationMenu.Item className={cn('w-[138px]', ...itemStyle, 'hidden md:block xl:hidden')}>
         <NavigationMenu.Trigger className={cn('group', 'text-left', 'text-muted', ...triggerStyle)}>
           {metadata[pathname].title}