From 1c3c9ea7b1095052912e2c6225493d624126c487 Mon Sep 17 00:00:00 2001
From: MichalC <103170279+wSBMichalee@users.noreply.github.com>
Date: Mon, 31 Aug 2026 23:19:32 +0200
Subject: [PATCH] fix: keep WhatsApp CTA visible in mobile Header

---
 src/components/Header/index.tsx | 20 +++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
index 215a23f..cfa46e5 100644
--- a/src/components/Header/index.tsx
+++ b/src/components/Header/index.tsx
@@ -64,26 +64,26 @@ export function Header({ navItems = [] }: { navItems?: any[] }) {
 
           {/* Right Actions & Hamburger */}
           <div className="flex items-center gap-4 z-50">
-            <div className="hidden sm:flex items-center gap-4">
+            <div className="flex items-center gap-2 sm:gap-4">
               <Link 
                 href={process.env.NEXT_PUBLIC_WHATSAPP_NUMBER ? `https://wa.me/${process.env.NEXT_PUBLIC_WHATSAPP_NUMBER}` : '#'} 
                 target="_blank"
                 rel="noopener noreferrer"
-                className="flex items-center gap-2 px-5 py-2.5 rounded-full bg-green-500 hover:bg-green-600 text-white transition-colors font-medium text-sm shadow-sm"
+                className="flex items-center gap-2 px-3 py-2 sm:px-5 sm:py-2.5 rounded-full bg-green-500 hover:bg-green-600 text-white transition-colors font-medium text-sm shadow-sm"
               >
                 <MessageCircle size={18} />
-                <span className="hidden lg:inline">WhatsApp</span>
+                <span className="hidden sm:inline">WhatsApp</span>
               </Link>
-              <div className="w-px h-6 bg-border mx-2 hidden xl:block" />
+              <div className="w-px h-6 bg-border mx-1 sm:mx-2 hidden xl:block" />
             </div>
             
-            <div className="flex items-center gap-2">
+            <div className="hidden sm:flex items-center gap-2">
               <ThemeSwitcher />
               <LanguageSwitcher />
             </div>
 
             <button 
-              className="xl:hidden w-11 h-11 flex items-center justify-center text-foreground rounded-full hover:bg-accent/10 transition-colors ml-1"
+              className="xl:hidden w-11 h-11 flex shrink-0 items-center justify-center text-foreground rounded-full hover:bg-accent/10 transition-colors ml-1"
               onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
               aria-label="Toggle menu"
             >
@@ -111,8 +111,14 @@ export function Header({ navItems = [] }: { navItems?: any[] }) {
           ))}
         </nav>
 
-        <div className="absolute bottom-12 left-0 right-0 px-6 sm:hidden flex flex-col items-center">
+        <div className="absolute bottom-12 left-0 right-0 px-6 flex flex-col items-center">
           <div className="w-full h-px bg-border/50 mb-8 max-w-xs" />
+          
+          <div className="flex items-center gap-4 mb-6 sm:hidden">
+            <ThemeSwitcher />
+            <LanguageSwitcher />
+          </div>
+
           <Link 
             href={process.env.NEXT_PUBLIC_WHATSAPP_NUMBER ? `https://wa.me/${process.env.NEXT_PUBLIC_WHATSAPP_NUMBER}` : '#'} 
             target="_blank"