From 06bd7a8bdfc8ade794c22d87738348a038521137 Mon Sep 17 00:00:00 2001
From: pac7 <47831526-pac7@users.noreply.replit.com>
Date: Sun, 21 Sep 2025 17:51:37 +0000
Subject: [PATCH] Align header elements and improve search bar responsiveness

Update the header layout to use flexbox for better alignment and adjust the search bar to be responsive across different screen sizes.

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/bWnWnhe
---
 .../templates/components/layout/enhanced_header.html | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/backend/templates/components/layout/enhanced_header.html b/backend/templates/components/layout/enhanced_header.html
index 5b40a5dd..7c89021b 100644
--- a/backend/templates/components/layout/enhanced_header.html
+++ b/backend/templates/components/layout/enhanced_header.html
@@ -6,16 +6,16 @@ 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="grid grid-cols-[auto_1fr_auto] items-center h-14 px-4 gap-4">
+  <div class="flex items-center h-14 px-4 gap-3 md:gap-4">
     
     <!-- Logo and Browse Menu -->
-    <div class="flex items-center space-x-6">
+    <div class="flex items-center gap-4 shrink-0">
       <!-- Logo -->
       <a href="{% url 'home' %}" class="flex items-center space-x-2 flex-shrink-0">
         <div class="w-6 h-6 bg-purple-600 rounded flex items-center justify-center">
           <span class="text-white text-xs font-bold">TW</span>
         </div>
-        <span class="font-bold text-lg">ThrillWiki</span>
+        <span class="font-bold text-lg whitespace-nowrap">ThrillWiki</span>
       </a>
 
       <!-- Browse Menu (Desktop) -->
@@ -132,15 +132,15 @@ Includes: Browse menu, advanced search, theme toggle, user dropdown, mobile menu
     </div>
 
     <!-- Center Search Bar -->
-    <div class="hidden md:block justify-self-center w-full max-w-xl lg:max-w-2xl">
+    <div class="hidden md:flex flex-1 min-w-0 justify-center">
       <!-- Enhanced Search -->
-      <div class="relative" x-data="searchComponent">
+      <div class="relative w-full min-w-0 max-w-xl lg:max-w-2xl" 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 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"
+            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"
             x-model="query"
             @input.debounce.300ms="search()"
             hx-get="{% url 'search:search' %}"