Adjust layout to ensure content displays correctly without overlapping

Replaces grid layout with flexbox in enhanced_header.html to resolve column width issues caused by gap-8.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: c537be14-ffc2-48de-88ef-2bdd9e6ae15a
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/d6d61dac-164d-45dd-929f-7dcdfd771b64/c537be14-ffc2-48de-88ef-2bdd9e6ae15a/DIBq8v8

.replit

@@ -35,6 +35,10 @@ outputType = "webview"
 localPort = 5000
 externalPort = 80
 
+[[ports]]
+localPort = 38953
+externalPort = 3002
+
 [[ports]]
 localPort = 41923
 externalPort = 3000

templates/components/layout/enhanced_header.html

@@ -47,9 +47,9 @@ Includes: Browse menu, advanced search, theme toggle, user dropdown, mobile menu
             x-cloak
             class="absolute left-0 mt-1 w-[560px] p-4 bg-background border rounded-lg shadow-lg z-50"
           >
-            <div class="grid grid-cols-2 gap-6">
+            <div class="flex gap-6">
               <!-- Left Column -->
-              <div class="space-y-2">
+              <div class="flex-1 space-y-2">
                 <a 
                   href="{% url 'parks:park_list' %}" 
                   class="flex items-start gap-3 p-3 rounded-md hover:bg-accent transition-colors group"
@@ -88,7 +88,7 @@ Includes: Browse menu, advanced search, theme toggle, user dropdown, mobile menu
               </div>
 
               <!-- Right Column -->
-              <div class="space-y-2">
+              <div class="flex-1 space-y-2">
                 <a 
                   href="{% url 'rides:global_ride_list' %}" 
                   class="flex items-start gap-3 p-3 rounded-md hover:bg-accent transition-colors group"