minor fixes to responsiveness

Author: sloanfinger

src/components/Navigation.tsx

@@ -216,7 +216,7 @@ export default async function Navigation() {
   return (
     <NavContainer>
       <nav className="fixed top-0 left-0 z-60 flex w-full flex-col from-rose-950/20 to-black/30 py-0.75 transition-[background-color,box-shadow,backdrop-filter] group-data-from-link-in-bio:h-dvh group-data-scrolled:bg-black/30 group-data-scrolled:shadow-xl group-data-scrolled:backdrop-blur-sm group-data-[state=open]:border-rose-600 group-data-[state=open]:bg-radial group-data-[state=open]:backdrop-blur-sm">
-        <div className="mx-auto flex w-full max-w-360 grid-cols-[1fr_max-content_1fr] items-center justify-between px-4 py-4.25 md:py-4.5 md:grid md:px-6">
+        <div className="mx-auto flex w-full max-w-360 grid-cols-[1fr_max-content_1fr] items-center justify-between px-4 py-4.25 md:py-4.5 lg:grid md:px-6">
           <Link href="/">
             <h1 className="flex items-center gap-2 text-xl font-bold md:text-2xl lg:gap-2.5">
               <figure className="size-[1.5em]">
@@ -226,7 +226,7 @@ export default async function Navigation() {
             </h1>
           </Link>
 
-          <div className="hidden items-center md:flex lg:gap-4 lg:text-lg">
+          <div className="hidden items-center md:flex lg:px-4 lg:gap-4 lg:text-lg">
             <NavigationItems />
           </div>
 

src/components/SettingsNavigation.tsx

@@ -91,7 +91,7 @@ export default function SettingsNavigation({
 }: Props) {
   return (
     <Dialog.Root>
-      <header className="sticky top-18 md:top-20 z-50 mt-17.25 top:mt-19.25 flex items-center justify-between border-y border-zinc-800 bg-black/30 px-3.5 md:px-4 py-5 sm:py-6 text-xl/none shadow-xl backdrop-blur-sm sm:px-6 md:block md:py-10 md:shadow-none">
+      <header className="sticky top-18 md:top-20 z-50 mt-17.25 top:mt-19.25 flex items-center justify-between border-y border-zinc-800 bg-black/30 px-4 md:px-6 py-5 sm:py-6 text-xl/none shadow-xl backdrop-blur-sm md:block md:py-8 md:shadow-none">
         <h2 className="flex cursor-default items-center gap-1.5 font-semibold text-zinc-500 sm:text-2xl/none md:text-3xl">
           Settings <PiLineVerticalBold className="rotate-24" />{" "}
           <span className="text-white">{title}</span>