From ac03bcd1e0d6ab18d5de39d2a76ea2ba4c0a7899 Mon Sep 17 00:00:00 2001
From: kaizendae <abdelattie@gmail.com>
Date: Tue, 12 Nov 2024 21:18:25 +0100
Subject: [PATCH] fix: improve responsive header layout

---
 src/components/header.astro | 4 ++--
 src/components/search.astro | 4 ++--
 src/global.css              | 8 +++++++-
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/components/header.astro b/src/components/header.astro
index 70f489c9..bafae4ae 100644
--- a/src/components/header.astro
+++ b/src/components/header.astro
@@ -89,9 +89,9 @@ const currentPath = Astro.url.pathname;
 
     <nav
       aria-label="Header Navigation"
-      class="hidden flex-1 flex-row items-center justify-between pl-36 md:flex"
+      class="hidden flex-row items-center justify-between md:flex lg:pl-12"
     >
-      <ul class="flex flex-row items-center space-x-5">
+      <ul class="flex flex-row items-center space-x-0.5 lg:space-x-1">
         {
           navItems.map(item => (
             <li>
diff --git a/src/components/search.astro b/src/components/search.astro
index 291b36dc..a077c517 100644
--- a/src/components/search.astro
+++ b/src/components/search.astro
@@ -9,10 +9,10 @@ import { Icon } from "astro-icon/components";
   aria-label="Open search"
   aria-controls="search-dialog"
   aria-expanded="false"
-  class="focus:ring-primary-500 inline-flex items-center space-x-2 rounded-md px-4 py-2 text-sm text-gray-600 hover:text-black"
+  class="focus:ring-primary-500 inline-flex items-center space-x-2 rounded-md py-2 pl-4 text-sm text-gray-600 hover:text-black"
 >
   <Icon name="search" class="h-5 w-5" />
-  <span> Search </span>
+  <span class="hidden lg:block"> Search </span>
 </button>
 
 <!-- Search dialog -->
diff --git a/src/global.css b/src/global.css
index 4451a18b..8bd88c25 100644
--- a/src/global.css
+++ b/src/global.css
@@ -29,7 +29,13 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 .container {
-  @apply mx-auto w-full max-w-screen-xl px-3 md:px-0;
+  @apply mx-auto w-full 
+    max-w-[90rem]             /* 1440px max-width */
+    sm:max-w-[640px]          
+    md:max-w-[768px]          
+    lg:max-w-[896px]          /* ~1024px - 128px margins */
+    xl:max-w-[1024px]         /* ~1280px - 256px margins */
+    2xl:max-w-[1200px];       /* ~1440px - 240px margins */
 }