From ac344aea92e8dc2df84bbd74b5a256242aa5c5c9 Mon Sep 17 00:00:00 2001
From: pac7 <47831526-pac7@users.noreply.replit.com>
Date: Sun, 21 Sep 2025 17:53:03 +0000
Subject: [PATCH] Adjust header layout to place search between other navigation
 elements

Repositions the search bar within the header to prevent overlap with other buttons, specifically placing it between the browse menu and sign-in options in the enhanced header component.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: dcfff319-6e91-4220-98a9-8295b87755b7
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/d6d61dac-164d-45dd-929f-7dcdfd771b64/dcfff319-6e91-4220-98a9-8295b87755b7/ol0seac
---
 .../targeted_element_1758477128342.png            | Bin 0 -> 112 bytes
 .../components/layout/enhanced_header.html        |  12 ++++--------
 2 files changed, 4 insertions(+), 8 deletions(-)
 create mode 100644 attached_assets/targeted_element_1758477128342.png

diff --git a/attached_assets/targeted_element_1758477128342.png b/attached_assets/targeted_element_1758477128342.png
new file mode 100644
index 0000000000000000000000000000000000000000..7114d45eb52b8780eccb8afd52ad44c0b7f3c763
GIT binary patch
literal 112
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`s-7;6Ar*{oCU4|rVBl%;_;0`K
zBb#|MyM=(osY(W;364fmA099=F#P|&Lq;hZsDTZnftkTmfk9CvN-G^G!r<xZ=d#Wz
Gp$P!B#2fhl

literal 0
HcmV?d00001

diff --git a/backend/templates/components/layout/enhanced_header.html b/backend/templates/components/layout/enhanced_header.html
index 7c89021b..1da0fd8a 100644
--- a/backend/templates/components/layout/enhanced_header.html
+++ b/backend/templates/components/layout/enhanced_header.html
@@ -131,16 +131,16 @@ Includes: Browse menu, advanced search, theme toggle, user dropdown, mobile menu
       </div>
     </div>
 
-    <!-- Center Search Bar -->
-    <div class="hidden md:flex flex-1 min-w-0 justify-center">
+    <!-- Desktop Right Side -->
+    <div class="hidden md:flex items-center gap-3 shrink-0">
       <!-- Enhanced Search -->
-      <div class="relative w-full min-w-0 max-w-xl lg:max-w-2xl" x-data="searchComponent">
+      <div class="relative" x-data="searchComponent">
         <div class="relative">
           <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground"></i>
           <input
             type="search"
             placeholder="Search parks, rides..."
-            class="w-full min-w-0 pl-10 pr-14 h-10 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+            class="w-64 pl-10 pr-14 h-10 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
             x-model="query"
             @input.debounce.300ms="search()"
             hx-get="{% url 'search:search' %}"
@@ -163,10 +163,6 @@ Includes: Browse menu, advanced search, theme toggle, user dropdown, mobile menu
           <!-- Search results will be populated by HTMX -->
         </div>
       </div>
-    </div>
-
-    <!-- Desktop Right Side -->
-    <div class="hidden md:flex items-center gap-3 shrink-0">
 
       <!-- Theme Toggle -->
       <div x-data="themeToggle">