From c00d20cc4c392d1a045c1411ad8f44213b774f14 Mon Sep 17 00:00:00 2001
From: pac7 <47831526-pac7@users.noreply.replit.com>
Date: Sun, 21 Sep 2025 14:12:33 +0000
Subject: [PATCH] Fix search bar width on mobile devices

Adjusted the `max-w-full` class and search input padding in `enhanced_header.html` to ensure the mobile search bar fits within the screen width.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 495199c6-aa06-48cd-8c40-9cccf398cfcf
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/d6d61dac-164d-45dd-929f-7dcdfd771b64/495199c6-aa06-48cd-8c40-9cccf398cfcf/vWva8Z0
---
 .../templates/components/layout/enhanced_header.html   | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/backend/templates/components/layout/enhanced_header.html b/backend/templates/components/layout/enhanced_header.html
index 475f6928..7652b797 100644
--- a/backend/templates/components/layout/enhanced_header.html
+++ b/backend/templates/components/layout/enhanced_header.html
@@ -428,19 +428,21 @@ Includes: Browse menu, advanced search, theme toggle, user dropdown, mobile menu
   <!-- Mobile Search Bar -->
   <div class="md:hidden border-t bg-background">
     <div class="px-4 py-3">
-      <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>
+      <div class="relative max-w-full">
+        <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground z-10"></i>
         <input
           type="search"
           placeholder="Search parks, rides..."
-          class="w-full 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 pl-10 pr-16 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"
           hx-get="{% url 'search:search' %}"
           hx-trigger="input changed delay:300ms"
           hx-target="#mobile-search-results"
           hx-include="this"
           name="q"
         />
-        {% include 'components/ui/button.html' with variant='default' size='sm' text='Search' class='absolute right-1 top-1/2 transform -translate-y-1/2' %}
+        <button type="submit" class="absolute right-2 top-1/2 transform -translate-y-1/2 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-8 px-2">
+          <i class="fas fa-search h-3 w-3"></i>
+        </button>
       </div>
       <div id="mobile-search-results" class="mt-2"></div>
     </div>