From bcdd2810a9627598081ad62024d3fa2811ad8ffb Mon Sep 17 00:00:00 2001
From: pac7 <47831526-pac7@users.noreply.replit.com>
Date: Mon, 22 Sep 2025 01:57:07 +0000
Subject: [PATCH] Improve the visual layout and spacing of the enhanced header
 component

Adjusted CSS classes in `enhanced_header.html` to increase the width of the dropdown menu, increase grid gap, and modify padding/margins for better visual presentation.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: c537be14-ffc2-48de-88ef-2bdd9e6ae15a
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/d6d61dac-164d-45dd-929f-7dcdfd771b64/c537be14-ffc2-48de-88ef-2bdd9e6ae15a/c8DPZlH
---
 .replit                                       |  4 ++
 .../components/layout/enhanced_header.html    | 64 +++++++++----------
 2 files changed, 36 insertions(+), 32 deletions(-)

diff --git a/.replit b/.replit
index 21bef7fc..3b0e8744 100644
--- a/.replit
+++ b/.replit
@@ -43,6 +43,10 @@ externalPort = 3000
 localPort = 45245
 externalPort = 3001
 
+[[ports]]
+localPort = 46253
+externalPort = 3002
+
 [deployment]
 deploymentTarget = "autoscale"
 run = ["gunicorn", "--bind=0.0.0.0:5000", "--reuse-port", "thrillwiki.wsgi:application"]
diff --git a/templates/components/layout/enhanced_header.html b/templates/components/layout/enhanced_header.html
index d29b7c39..61a2e1f7 100644
--- a/templates/components/layout/enhanced_header.html
+++ b/templates/components/layout/enhanced_header.html
@@ -45,44 +45,44 @@ Includes: Browse menu, advanced search, theme toggle, user dropdown, mobile menu
             x-transition:leave-start="transform opacity-100 scale-100"
             x-transition:leave-end="transform opacity-0 scale-95"
             x-cloak
-            class="absolute left-0 mt-2 w-[480px] p-6 bg-background border rounded-lg shadow-lg z-50"
+            class="absolute left-0 mt-2 w-[600px] p-6 bg-background border rounded-lg shadow-lg z-50"
           >
-            <div class="grid grid-cols-2 gap-6">
+            <div class="grid grid-cols-2 gap-8">
               <!-- Left Column -->
               <div class="space-y-4">
                 <a 
                   href="{% url 'parks:park_list' %}" 
-                  class="flex items-start gap-3 p-3 rounded-lg hover:bg-accent transition-colors group"
+                  class="flex items-start gap-3 p-4 rounded-lg hover:bg-accent transition-colors group"
                   @click="open = false"
                 >
-                  <i class="fas fa-map-marker-alt w-5 h-5 mt-0.5 text-muted-foreground group-hover:text-foreground"></i>
-                  <div>
-                    <h3 class="font-semibold text-sm mb-1">Parks</h3>
-                    <p class="text-xs text-muted-foreground">Explore theme parks worldwide</p>
+                  <i class="fas fa-map-marker-alt w-5 h-5 mt-1 text-muted-foreground group-hover:text-foreground flex-shrink-0"></i>
+                  <div class="min-w-0 flex-1">
+                    <h3 class="font-semibold text-sm mb-1.5 leading-tight">Parks</h3>
+                    <p class="text-xs text-muted-foreground leading-relaxed">Explore theme parks worldwide</p>
                   </div>
                 </a>
 
                 <a 
                   href="{% url 'rides:manufacturer_list' %}" 
-                  class="flex items-start gap-3 p-3 rounded-lg hover:bg-accent transition-colors group"
+                  class="flex items-start gap-3 p-4 rounded-lg hover:bg-accent transition-colors group"
                   @click="open = false"
                 >
-                  <i class="fas fa-wrench w-5 h-5 mt-0.5 text-muted-foreground group-hover:text-foreground"></i>
-                  <div>
-                    <h3 class="font-semibold text-sm mb-1">Manufacturers</h3>
-                    <p class="text-xs text-muted-foreground">Ride and attraction manufacturers</p>
+                  <i class="fas fa-wrench w-5 h-5 mt-1 text-muted-foreground group-hover:text-foreground flex-shrink-0"></i>
+                  <div class="min-w-0 flex-1">
+                    <h3 class="font-semibold text-sm mb-1.5 leading-tight">Manufacturers</h3>
+                    <p class="text-xs text-muted-foreground leading-relaxed">Ride and attraction manufacturers</p>
                   </div>
                 </a>
 
                 <a 
                   href="{% url 'parks:operator_list' %}" 
-                  class="flex items-start gap-3 p-3 rounded-lg hover:bg-accent transition-colors group"
+                  class="flex items-start gap-3 p-4 rounded-lg hover:bg-accent transition-colors group"
                   @click="open = false"
                 >
-                  <i class="fas fa-users w-5 h-5 mt-0.5 text-muted-foreground group-hover:text-foreground"></i>
-                  <div>
-                    <h3 class="font-semibold text-sm mb-1">Operators</h3>
-                    <p class="text-xs text-muted-foreground">Theme park operating companies</p>
+                  <i class="fas fa-users w-5 h-5 mt-1 text-muted-foreground group-hover:text-foreground flex-shrink-0"></i>
+                  <div class="min-w-0 flex-1">
+                    <h3 class="font-semibold text-sm mb-1.5 leading-tight">Operators</h3>
+                    <p class="text-xs text-muted-foreground leading-relaxed">Theme park operating companies</p>
                   </div>
                 </a>
               </div>
@@ -91,37 +91,37 @@ Includes: Browse menu, advanced search, theme toggle, user dropdown, mobile menu
               <div class="space-y-4">
                 <a 
                   href="{% url 'rides:global_ride_list' %}" 
-                  class="flex items-start gap-3 p-3 rounded-lg hover:bg-accent transition-colors group"
+                  class="flex items-start gap-3 p-4 rounded-lg hover:bg-accent transition-colors group"
                   @click="open = false"
                 >
-                  <i class="fas fa-rocket w-5 h-5 mt-0.5 text-muted-foreground group-hover:text-foreground"></i>
-                  <div>
-                    <h3 class="font-semibold text-sm mb-1">Rides</h3>
-                    <p class="text-xs text-muted-foreground">Discover rides and attractions</p>
+                  <i class="fas fa-rocket w-5 h-5 mt-1 text-muted-foreground group-hover:text-foreground flex-shrink-0"></i>
+                  <div class="min-w-0 flex-1">
+                    <h3 class="font-semibold text-sm mb-1.5 leading-tight">Rides</h3>
+                    <p class="text-xs text-muted-foreground leading-relaxed">Discover rides and attractions</p>
                   </div>
                 </a>
 
                 <a 
                   href="{% url 'rides:designer_list' %}" 
-                  class="flex items-start gap-3 p-3 rounded-lg hover:bg-accent transition-colors group"
+                  class="flex items-start gap-3 p-4 rounded-lg hover:bg-accent transition-colors group"
                   @click="open = false"
                 >
-                  <i class="fas fa-drafting-compass w-5 h-5 mt-0.5 text-muted-foreground group-hover:text-foreground"></i>
-                  <div>
-                    <h3 class="font-semibold text-sm mb-1">Designers</h3>
-                    <p class="text-xs text-muted-foreground">Ride designers and architects</p>
+                  <i class="fas fa-drafting-compass w-5 h-5 mt-1 text-muted-foreground group-hover:text-foreground flex-shrink-0"></i>
+                  <div class="min-w-0 flex-1">
+                    <h3 class="font-semibold text-sm mb-1.5 leading-tight">Designers</h3>
+                    <p class="text-xs text-muted-foreground leading-relaxed">Ride designers and architects</p>
                   </div>
                 </a>
 
                 <a 
                   href="#" 
-                  class="flex items-start gap-3 p-3 rounded-lg hover:bg-accent transition-colors group"
+                  class="flex items-start gap-3 p-4 rounded-lg hover:bg-accent transition-colors group"
                   @click="open = false"
                 >
-                  <i class="fas fa-trophy w-5 h-5 mt-0.5 text-muted-foreground group-hover:text-foreground"></i>
-                  <div>
-                    <h3 class="font-semibold text-sm mb-1">Top Lists</h3>
-                    <p class="text-xs text-muted-foreground">Community rankings and favorites</p>
+                  <i class="fas fa-trophy w-5 h-5 mt-1 text-muted-foreground group-hover:text-foreground flex-shrink-0"></i>
+                  <div class="min-w-0 flex-1">
+                    <h3 class="font-semibold text-sm mb-1.5 leading-tight">Top Lists</h3>
+                    <p class="text-xs text-muted-foreground leading-relaxed">Community rankings and favorites</p>
                   </div>
                 </a>
               </div>