From 66f57448be9c7bd5709aa8a9ea4856f2f56f7dc5 Mon Sep 17 00:00:00 2001
From: pacnpal <183241239+pacnpal@users.noreply.github.com>
Date: Sun, 21 Sep 2025 22:23:22 -0400
Subject: [PATCH] Refine browse menu styles for improved layout and
 accessibility

---
 .../components/layout/enhanced_header.html    | 60 +++++++++----------
 1 file changed, 30 insertions(+), 30 deletions(-)

diff --git a/templates/components/layout/enhanced_header.html b/templates/components/layout/enhanced_header.html
index 6c9a5103..b5593d19 100644
--- a/templates/components/layout/enhanced_header.html
+++ b/templates/components/layout/enhanced_header.html
@@ -27,12 +27,12 @@ Includes: Browse menu, advanced search, theme toggle, user dropdown, mobile menu
           class="relative"
         >
           <button 
-            class="flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-md hover:bg-accent transition-colors"
+            class="flex items-center gap-2 px-3 py-1.5 text-sm font-medium rounded-md hover:bg-accent transition-colors"
             @click="open = !open"
           >
             <i class="fas fa-compass w-4 h-4"></i>
             Browse
-            <i class="fas fa-chevron-down w-4 h-4"></i>
+            <i class="fas fa-chevron-down w-3 h-3 transition-transform duration-200" :class="{ 'rotate-180': open }"></i>
           </button>
 
           <!-- Browse Dropdown -->
@@ -45,83 +45,83 @@ 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-[600px] p-6 bg-background border rounded-lg shadow-lg z-50"
+            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-8">
+            <div class="grid grid-cols-2 gap-6">
               <!-- Left Column -->
-              <div class="space-y-4">
+              <div class="space-y-2">
                 <a 
                   href="{% url 'parks:park_list' %}" 
-                  class="flex items-start gap-3 p-4 rounded-lg hover:bg-accent transition-colors group min-h-[4rem]"
+                  class="flex items-start gap-3 p-3 rounded-md hover:bg-accent transition-colors group"
                   @click="open = false"
                 >
-                  <i class="fas fa-map-marker-alt w-5 h-5 mt-1 text-muted-foreground group-hover:text-foreground flex-shrink-0"></i>
+                  <i class="fas fa-map-marker-alt w-4 h-4 mt-0.5 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 break-words">Explore theme parks worldwide</p>
+                    <h3 class="font-medium text-sm mb-1 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-4 rounded-lg hover:bg-accent transition-colors group min-h-[4rem]"
+                  class="flex items-start gap-3 p-3 rounded-md hover:bg-accent transition-colors group"
                   @click="open = false"
                 >
-                  <i class="fas fa-wrench w-5 h-5 mt-1 text-muted-foreground group-hover:text-foreground flex-shrink-0"></i>
+                  <i class="fas fa-wrench w-4 h-4 mt-0.5 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 break-words">Ride and attraction manufacturers</p>
+                    <h3 class="font-medium text-sm mb-1 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-4 rounded-lg hover:bg-accent transition-colors group min-h-[4rem]"
+                  class="flex items-start gap-3 p-3 rounded-md hover:bg-accent transition-colors group"
                   @click="open = false"
                 >
-                  <i class="fas fa-users w-5 h-5 mt-1 text-muted-foreground group-hover:text-foreground flex-shrink-0"></i>
+                  <i class="fas fa-users w-4 h-4 mt-0.5 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 break-words">Theme park operating companies</p>
+                    <h3 class="font-medium text-sm mb-1 leading-tight">Operators</h3>
+                    <p class="text-xs text-muted-foreground leading-relaxed">Theme park operating companies</p>
                   </div>
                 </a>
               </div>
 
               <!-- Right Column -->
-              <div class="space-y-4">
+              <div class="space-y-2">
                 <a 
                   href="{% url 'rides:global_ride_list' %}" 
-                  class="flex items-start gap-3 p-4 rounded-lg hover:bg-accent transition-colors group min-h-[4rem]"
+                  class="flex items-start gap-3 p-3 rounded-md hover:bg-accent transition-colors group"
                   @click="open = false"
                 >
-                  <i class="fas fa-rocket w-5 h-5 mt-1 text-muted-foreground group-hover:text-foreground flex-shrink-0"></i>
+                  <i class="fas fa-rocket w-4 h-4 mt-0.5 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 break-words">Discover rides and attractions</p>
+                    <h3 class="font-medium text-sm mb-1 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-4 rounded-lg hover:bg-accent transition-colors group min-h-[4rem]"
+                  class="flex items-start gap-3 p-3 rounded-md hover:bg-accent transition-colors group"
                   @click="open = false"
                 >
-                  <i class="fas fa-drafting-compass w-5 h-5 mt-1 text-muted-foreground group-hover:text-foreground flex-shrink-0"></i>
+                  <i class="fas fa-drafting-compass w-4 h-4 mt-0.5 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 break-words">Ride designers and architects</p>
+                    <h3 class="font-medium text-sm mb-1 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-4 rounded-lg hover:bg-accent transition-colors group min-h-[4rem]"
+                  class="flex items-start gap-3 p-3 rounded-md hover:bg-accent transition-colors group"
                   @click="open = false"
                 >
-                  <i class="fas fa-trophy w-5 h-5 mt-1 text-muted-foreground group-hover:text-foreground flex-shrink-0"></i>
+                  <i class="fas fa-trophy w-4 h-4 mt-0.5 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 break-words">Community rankings and favorites</p>
+                    <h3 class="font-medium text-sm mb-1 leading-tight">Top Lists</h3>
+                    <p class="text-xs text-muted-foreground leading-relaxed">Community rankings and favorites</p>
                   </div>
                 </a>
               </div>