fix menu shifting in safari

components/layout/menu-item.tsx

@@ -31,7 +31,7 @@ const MenuItem = ({
         aria-label={text}
         data-current={current || undefined}
         className={cn(
-          "text-foreground/85 hover:border-ring data-current:border-primary/40! inline-flex items-center hover:border-b-[3px] hover:no-underline data-current:border-b-[3px]",
+          "text-foreground/85 hover:border-ring data-current:border-primary/40! inline-flex items-center border-b-3 border-b-transparent hover:no-underline",
           className
         )}
         {...rest}

components/layout/menu.tsx

@@ -44,7 +44,10 @@ const Menu = ({ className, ...rest }: React.ComponentProps<"div">) => {
         const isCurrent = item.href?.split("/")[1] === segment;
 
         return (
-          <div className="mt-[3px] inline-block last:-mr-2.5 max-sm:first:hidden [&_a,&_button]:p-2.5" key={index}>
+          <div
+            className="inline-block border-t-3 border-t-transparent last:-mr-2.5 max-sm:first:hidden [&_a,&_button]:p-2.5"
+            key={index}
+          >
             <MenuItem {...item} current={isCurrent} />
           </div>
         );