fix: extra spacing on navbar links

Author: darbyjack

src/components/layout/NavBar.astro

@@ -21,7 +21,7 @@ import LogoMarkerLight from "@/assets/brand/logo-marker-light.svg";
     </a>
     <div
       id="nav-menu"
-      class="bg-background-light-10 dark:bg-background-dark-90 absolute top-full right-0 left-0 flex w-full flex-col gap-4 p-4 shadow-xl max-md:hidden! md:relative md:block md:w-auto md:bg-transparent md:p-0 md:shadow-none"
+      class="bg-background-light-10 dark:bg-background-dark-90 absolute top-full right-0 left-0 flex w-full flex-col gap-4 p-4 shadow-xl max-md:hidden! md:relative md:flex md:w-auto md:flex-row md:items-center md:gap-0 md:bg-transparent md:p-0 md:shadow-none"
     >
       <NavDropDown label="Software">
         <NavDropDownLink href="/software/paper">Paper</NavDropDownLink>

src/components/layout/NavDropDown.astro

@@ -12,7 +12,9 @@ const { label, className } = Astro.props;
 
 <div
   class={clsx(
-    "color-gray-200 hover:text-blue-600 dark:hover:text-blue-400 text-sm transition-colors px-2.5 relative inline-block",
+    "color-gray-200 hover:text-blue-600 dark:hover:text-blue-400 text-sm transition-colors px-2.5 relative h-full",
+    "md:flex md:items-center",
+    "md:after:content-[''] md:after:absolute md:after:left-0 md:after:top-full md:after:h-2 md:after:w-full",
     className
   )}
   data-nav-dropdown
@@ -29,8 +31,8 @@ const { label, className } = Astro.props;
   </span>
 
   <ul
-    class="bg-background-light-10 dark:bg-background-dark-90 z-[100] hidden md:absolute md:mt-0 md:min-w-40 md:rounded-lg md:border md:border-gray-200 md:py-1 md:shadow-md md:dark:border-gray-800"
     role="menu"
+    class="bg-background-light-10 dark:bg-background-dark-90 z-[100] hidden md:absolute md:top-full md:left-0 md:min-w-40 md:translate-y-1 md:rounded-lg md:border md:border-gray-200 md:py-1 md:shadow-md md:dark:border-gray-800"
   >
     <slot />
   </ul>

src/components/layout/NavLink.astro

@@ -14,7 +14,11 @@ const { href, target, className } = Astro.props;
   href={href}
   rel="noreferrer"
   target={target}
-  class={clsx("color-gray-200 hover:text-blue-600 dark:hover:text-blue-400 text-sm transition-colors px-2.5", className)}
+  class={clsx(
+    "color-gray-200 hover:text-blue-600 dark:hover:text-blue-400 text-sm transition-colors px-2.5",
+    "md:inline-flex md:items-center",
+    className
+  )}
 >
   <slot />
 </a>