refactor: improve layout structure and header styling

src/components/Header.astro

@@ -6,19 +6,24 @@ import UserIcon from "../svgs/UserIcon.astro";
 const { t } = Astro.locals;
 ---
 
-<header class="bg-primary py-8">
+<header class="bg-primary w-full max-w-screen py-4 md:py-8">
     <div class="wrapper flex items-center justify-between">
-        <a href="/"><Logo /></a>
+        <a href="/" class="flex-shrink-0"><Logo /></a>
         <nav>
-            <ul class="flex items-center justify-center gap-4">
-                <li class="flex items-center justify-center gap-1">
+            <ul class="flex items-center gap-2 md:gap-4">
+                <li class="items-center gap-1 text-sm sm:flex md:text-base">
                     <UserIcon />
-                    {t("header.login")}
+                    <span class="hidden md:inline">{t("header.login")}</span>
                 </li>
-                <li class="flex items-center justify-center">
+                <li class="flex items-center">
                     <CartButton client:load />
                 </li>
-                <li class="flex items-center justify-center">
+                <li class="flex items-center md:hidden">
+                    <button class="p-1" aria-label="Menu">
+                        <MenuIcon />
+                    </button>
+                </li>
+                <li class="hidden items-center md:flex">
                     <MenuIcon />
                 </li>
             </ul>

src/layouts/Layout.astro

@@ -18,13 +18,15 @@ const { title, description } = Astro.props;
     <head>
         <meta charset="UTF-8" />
         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
         <title>{title}</title>
         <Metatags {title} {description} />
     </head>
-    <body class="grid">
+    <body class="grid min-h-screen overflow-x-hidden">
         <Header />
-        <slot />
+        <main class="flex-1">
+            <slot />
+        </main>
         <!-- TODO: Review ThemeToggle-->
         <!-- <div class="wrapper">
             <ThemeToggle />