fix menu shifting in safari

app/globals.css

@@ -1,4 +1,5 @@
 @import "tailwindcss";
+@import "tw-animate-css";
 
 @custom-variant dark (&:where([data-theme=dark] *));
 

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>
         );

package.json

@@ -26,13 +26,14 @@
     "@mdx-js/loader": "^3.1.0",
     "@mdx-js/react": "^3.1.0",
     "@neondatabase/serverless": "^1.0.0",
-    "@next/bundle-analyzer": "15.4.0-canary.43",
-    "@next/mdx": "15.4.0-canary.43",
+    "@next/bundle-analyzer": "15.4.0-canary.44",
+    "@next/mdx": "15.4.0-canary.44",
     "@octokit/graphql": "^9.0.1",
     "@octokit/graphql-schema": "^15.26.0",
     "@radix-ui/react-alert-dialog": "^1.1.14",
     "@radix-ui/react-aspect-ratio": "^1.1.7",
     "@radix-ui/react-avatar": "^1.1.10",
+    "@radix-ui/react-dialog": "^1.1.14",
     "@radix-ui/react-dropdown-menu": "^2.1.15",
     "@radix-ui/react-label": "^2.1.7",
     "@radix-ui/react-popover": "^1.1.14",
@@ -56,7 +57,7 @@
     "geist": "^1.4.2",
     "html-entities": "^2.6.0",
     "lucide-react": "0.511.0",
-    "next": "15.4.0-canary.43",
+    "next": "15.4.0-canary.44",
     "react": "19.1.0",
     "react-activity-calendar": "^2.7.12",
     "react-countup": "^6.5.3",
@@ -90,8 +91,9 @@
     "sonner": "^2.0.3",
     "tailwind-merge": "^3.3.0",
     "tailwindcss": "^4.1.7",
+    "tw-animate-css": "^1.3.0",
     "unified": "^11.0.5",
-    "zod": "3.25.7"
+    "zod": "3.25.17"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3.3.1",
@@ -99,15 +101,15 @@
     "@jakejarvis/eslint-config": "^4.0.7",
     "@tailwindcss/postcss": "^4.1.7",
     "@types/mdx": "^2.0.13",
-    "@types/node": "^22.15.20",
-    "@types/react": "19.1.4",
+    "@types/node": "^22.15.21",
+    "@types/react": "19.1.5",
     "@types/react-dom": "19.1.5",
     "babel-plugin-react-compiler": "19.1.0-rc.2",
     "cross-env": "^7.0.3",
     "dotenv": "^16.5.0",
     "drizzle-kit": "^0.31.1",
     "eslint": "^9.27.0",
-    "eslint-config-next": "15.4.0-canary.43",
+    "eslint-config-next": "15.4.0-canary.44",
     "eslint-config-prettier": "^10.1.5",
     "eslint-plugin-css-modules": "^2.12.0",
     "eslint-plugin-drizzle": "^0.2.3",