Make search bar more responsive

Author: eandreeva-twr

src/components/Header.astro

@@ -105,13 +105,20 @@ const localeLinks = SUPPORTED_LOCALES.map(locale => ({
         </nav>
     </div>
 
-    <!-- Search (Desktop) -->
-    <div class="hidden lg:flex flex-1 max-w-sm mx-8">
+    <!-- Search (Desktop, full bar) — only at xl+ where there's room; below xl the compact icon opens the overlay -->
+    <div class="hidden xl:flex flex-1 max-w-sm mx-8">
       <Search currentLocale={currentLocale} />
     </div>
 
     <!-- Auth Buttons & Theme Toggle -->
     <div class="hidden lg:flex items-center gap-3">
+      <!-- Compact search trigger — shown only in the 1024–1280px band; opens the same overlay as mobile -->
+      <button id="compact-search-btn" type="button" data-search-trigger aria-label="Search" class="flex xl:hidden items-center justify-center p-2 rounded-xl transition-colors">
+        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
+        </svg>
+      </button>
+
       <ThemeToggle />
 
       <!-- Language Switcher -->
@@ -150,7 +157,7 @@ const localeLinks = SUPPORTED_LOCALES.map(locale => ({
 
     <!-- Mobile Search, Theme & Menu Buttons -->
     <div class="lg:hidden flex items-center gap-1">
-      <button id="mobile-search-btn" class="p-2 text-[#443f49] dark:text-slate-300">
+      <button id="mobile-search-btn" data-search-trigger class="p-2 text-[#443f49] dark:text-slate-300">
         <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
         </svg>
@@ -371,6 +378,17 @@ const localeLinks = SUPPORTED_LOCALES.map(locale => ({
     font-size: 0.8125rem;
     min-width: 2.5rem;
   }
+
+  /* Compact search icon (1024–1280px band) — matches the desktop nav color scheme */
+  #compact-search-btn {
+    color: var(--text-secondary);
+    cursor: pointer;
+  }
+
+  #compact-search-btn:hover {
+    color: var(--text-primary);
+    background: var(--bg-hover);
+  }
 </style>
 
 <script>

src/layouts/DocsLayout.astro

@@ -428,7 +428,7 @@ if (canonicalURL.pathname.length > 1 && canonicalURL.pathname.endsWith('/')) {
         const target = e.target as HTMLElement;
 
         // Open mobile search
-        const searchBtn = target.closest('#mobile-search-btn');
+        const searchBtn = target.closest('[data-search-trigger]');
         if (searchBtn) {
           e.preventDefault();
           const overlay = document.getElementById('mobile-search-overlay');
@@ -1516,7 +1516,7 @@ if (canonicalURL.pathname.length > 1 && canonicalURL.pathname.endsWith('/')) {
     color: var(--accent-primary) !important;
   }
 
-  @media (min-width: 1024px) {
+  @media (min-width: 1280px) {
     .mobile-search-overlay {
       display: none;
     }