fix(header): reponsiveness adjustments

mateusfg7 · Jun 9, 2024 · 7f98b40 · 7f98b40
1 parent f8c11c5
commit 7f98b40
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 4 deletions.
diff --git a/src/app/_components/header/index.tsx b/src/app/_components/header/index.tsx
@@ -27,10 +27,10 @@ const MenuItem: React.FC<{ name: string; path: string }> = ({ name, path }) => {
 export function Header() {
   return (
     <header className="fixed top-0 z-40 w-full p-3">
-      <div className="content-container m-auto flex items-center justify-between rounded-xl border border-neutral-200/50 bg-neutral-50/80 p-3 backdrop-blur-3xl transition-all dark:border-neutral-900 dark:bg-neutral-1000/80 md:px-5">
+      <div className="content-container m-auto flex items-center justify-between rounded-xl border border-neutral-200/50 bg-neutral-50/80 p-0 backdrop-blur-3xl transition-all dark:border-neutral-900 dark:bg-neutral-1000/80 md:px-5">
         <Link
           href="/"
-          className="font-handwrite text-2xl font-bold drop-shadow-lg"
+          className="px-4 py-3 font-handwrite text-2xl font-bold drop-shadow-lg"
         >
           Mateus F.
         </Link>

diff --git a/src/app/_components/header/mobile-menu/index.tsx b/src/app/_components/header/mobile-menu/index.tsx
@@ -89,13 +89,13 @@ export function MobileMenu() {
   return (
     <Dialog.Root open={isDialogOpen} onOpenChange={setIsDialogOpen}>
       <Dialog.Trigger asChild className="md:hidden">
-        <button aria-label="Open menu">
+        <button className="px-4 py-3" aria-label="Open menu">
           <List size="1em" />
         </button>
       </Dialog.Trigger>
       <Dialog.Portal>
         <Dialog.Overlay className="fixed inset-0 z-50 bg-black/40 backdrop-blur-md data-[state=open]:animate-overlayShow" />
-        <Dialog.Content className="fixed bottom-0 right-0 top-0 z-50 w-3/4 data-[state=closed]:animate-slide-right data-[state=open]:animate-slide-left">
+        <Dialog.Content className="fixed right-0 top-0 z-50 h-dvh w-3/4 data-[state=closed]:animate-slide-right data-[state=open]:animate-slide-left">
           <div className="relative flex h-screen w-full">
             <Dialog.Close
               asChild