From 62900d47bdfe8a8df103289124f059bf6a44b36a Mon Sep 17 00:00:00 2001
From: pac7 <47831526-pac7@users.noreply.replit.com>
Date: Sun, 21 Sep 2025 17:47:45 +0000
Subject: [PATCH] Improve header layout and search bar functionality

Adjust header grid layout, center the search bar, increase its size, and update button sizes to resolve overlapping issues and improve usability.

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/m0pCFEo
---
 .../targeted_element_1758476700613.png        | Bin 0 -> 1333 bytes
 .../components/layout/enhanced_header.html    |  66 ++++++++++--------
 2 files changed, 37 insertions(+), 29 deletions(-)
 create mode 100644 attached_assets/targeted_element_1758476700613.png

diff --git a/attached_assets/targeted_element_1758476700613.png b/attached_assets/targeted_element_1758476700613.png
new file mode 100644
index 0000000000000000000000000000000000000000..cf12d1c071eaabbe8ce045345a78a785f9abcc9a
GIT binary patch
literal 1333
zcmeAS@N?(olHy`uVBq!ia0y~yV9fxsH8|LSWU{buKLZ2HD^C~4kP5~(H*RMgHV|OB
zaOwa57nha`Wc0i}bt&tc2-i-FOXqHG|M~BedjkU_6AOocf&+xHg!=?o$dy%Oi>r9D
z4pi>IJf>x8P$fXM54swfzI9DY=M-3>oFIg(A1J91zrfLnHMd!{+XKb$<4pTh!A7iR
z5!tf($z5-VY>CK(naFO)XX3hL&X>=zgyV!GihdT3C)^%06c#M-y|IV~$;kp0K?iO^
z_y>}KnvZA5`am?sh<>m^_T4T{jf~y7G56vb|0C-M`rTn)Lkr6`fq)Bn8`YeJV1Xf^
z5D<PK1*)|1H_+_gWp$olv!8M8=tXul%Ojwt3bp^%E2zW663Y0=BqXE|;OyWSoy@-s
zVe|wo1#y_;4m1M8li_$c$f^yK8zMPT%s5a7w0X7lXB58xRZh@XPz0Kw2K1G><L)-N
za}LBa*(t*!>xJ%u1#kD(zvL8np{$?@vk<B_ARwW@G1_3^L_`7r+uV4NsSjjAV<6Dx
zz)9y6VWvswKX5@r_d}rU2i9))h69$2{(=avfmQ!x5*60U(9S#RgA&#oHaFY^d+$Id
zBkS8tEq+*Nui~814)+2><6U3^+?{{n4@(-yj%I{7*aIiTClquxG?j7g_C^k=3*in$
z5XU`GU9g}wvceUT3{p5foRLye<0qiAKWQ5!)G`XgEQk3Y6jv2)4vxQjRtF;+UEqIU
zJw#1o7*KcEYq4oyH|=5BqXY{ZkpCOM0%gBid(3yRLj)7p{|fOAPE0I$TpAhqhki;T
z#e+7>9Y~Vm5I7+ea3Sq&uoOtEgz5tsR3i)=9UQG0f4<<lj~Ud!6z1??GB6QM?m3Te
z_Z#(uB$yeEXMqWHw(gl7K(kjUCUC*Tp)N^iad_KQ=Hir&lJbCl+{)?$ED#!x0sVFC
zwD??TOkD7Fh(nlg6=?KTvm`kt79o}tv}C~YiM357<N{w}2?vs=fsUx~I<ONIG81%w
zIr`qZ91t56g4#^;AjJe&AYm6Uo~?FrBRmCnAh0y3@O!|{!0`Y7%++&bfQ26$sMKR-
Y_;HybFim*BE>MKQ)78&qol`;+09~+6)Bpeg

literal 0
HcmV?d00001

diff --git a/backend/templates/components/layout/enhanced_header.html b/backend/templates/components/layout/enhanced_header.html
index 74f86ddc..5b40a5dd 100644
--- a/backend/templates/components/layout/enhanced_header.html
+++ b/backend/templates/components/layout/enhanced_header.html
@@ -6,7 +6,7 @@ Includes: Browse menu, advanced search, theme toggle, user dropdown, mobile menu
 {% load static %}
 
 <header class="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
-  <div class="flex h-14 items-center justify-between px-4 max-w-full">
+  <div class="grid grid-cols-[auto_1fr_auto] items-center h-14 px-4 gap-4">
     
     <!-- Logo and Browse Menu -->
     <div class="flex items-center space-x-6">
@@ -131,8 +131,8 @@ Includes: Browse menu, advanced search, theme toggle, user dropdown, mobile menu
       </div>
     </div>
 
-    <!-- Desktop Right Side -->
-    <div class="hidden md:flex items-center space-x-4">
+    <!-- Center Search Bar -->
+    <div class="hidden md:block justify-self-center w-full max-w-xl lg:max-w-2xl">
       <!-- Enhanced Search -->
       <div class="relative" x-data="searchComponent">
         <div class="relative">
@@ -140,7 +140,7 @@ Includes: Browse menu, advanced search, theme toggle, user dropdown, mobile menu
           <input
             type="search"
             placeholder="Search parks, rides..."
-            class="w-[300px] pl-10 pr-20 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-full md:max-w-xl lg:max-w-2xl 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' %}"
@@ -149,7 +149,7 @@ Includes: Browse menu, advanced search, theme toggle, user dropdown, mobile menu
             hx-include="this"
             name="q"
           />
-          <c-button variant="default" size="sm" class="absolute right-1 top-1/2 transform -translate-y-1/2">Search</c-button>
+          <c-button variant="default" size="default" class="absolute right-2 top-1/2 transform -translate-y-1/2">Search</c-button>
         </div>
         
         <!-- Search Results Dropdown -->
@@ -163,6 +163,10 @@ 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">
@@ -237,19 +241,21 @@ Includes: Browse menu, advanced search, theme toggle, user dropdown, mobile menu
           </div>
         </div>
       {% else %}
-        <div class="flex items-center space-x-2">
-          <button 
-            @click="window.authModal.show('login')"
-            class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-9 rounded-md px-3"
+        <div class="flex items-center gap-2">
+          <c-button 
+            variant="outline" 
+            size="default"
+            x_on="@click='window.authModal.show(\'login\')'"
           >
             Sign In
-          </button>
-          <button 
-            @click="window.authModal.show('register')"
-            class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-9 rounded-md px-3"
+          </c-button>
+          <c-button 
+            variant="default" 
+            size="default"
+            x_on="@click='window.authModal.show(\'register\')'"
           >
             Sign Up
-          </button>
+          </c-button>
         </div>
       {% endif %}
     </div>
@@ -308,23 +314,25 @@ Includes: Browse menu, advanced search, theme toggle, user dropdown, mobile menu
           </div>
         </div>
       {% else %}
-        <div class="flex items-center space-x-1">
-          <div 
-            hx-get="{% url 'account_login' %}"
-            hx-target="body"
-            hx-swap="beforeend"
-            class="cursor-pointer"
+        <div class="flex items-center gap-1">
+          <c-button 
+            variant="outline" 
+            size="default"
+            hx_get="{% url 'account_login' %}"
+            hx_target="body"
+            hx_swap="beforeend"
           >
-            <c-button variant="outline" size="default">Login</c-button>
-          </div>
-          <div 
-            hx-get="{% url 'account_signup' %}"
-            hx-target="body"
-            hx-swap="beforeend"
-            class="cursor-pointer"
+            Login
+          </c-button>
+          <c-button 
+            variant="default" 
+            size="default"
+            hx_get="{% url 'account_signup' %}"
+            hx_target="body"
+            hx_swap="beforeend"
           >
-            <c-button variant="default" size="default">Join</c-button>
-          </div>
+            Join
+          </c-button>
         </div>
       {% endif %}