From f2fccdf190dffbaa7b3fbd125e235d56b83f3395 Mon Sep 17 00:00:00 2001
From: pac7 <47831526-pac7@users.noreply.replit.com>
Date: Tue, 23 Sep 2025 21:15:44 +0000
Subject: [PATCH] Improve icon sizes for better visual consistency across
 devices

Update Tailwind CSS with new height and width utilities for icons and adjust icon sizes in the enhanced header component for improved responsiveness.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 9ac4060c-9ba6-40b4-b325-c945a385dd39
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
---
 .replit                                          |  4 ++++
 static/css/tailwind.css                          | 16 ++++++++++++++++
 templates/components/layout/enhanced_header.html |  8 ++++----
 3 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/.replit b/.replit
index 3520ba63..5f30feb2 100644
--- a/.replit
+++ b/.replit
@@ -54,6 +54,10 @@ outputType = "webview"
 localPort = 5000
 externalPort = 80
 
+[[ports]]
+localPort = 38645
+externalPort = 3002
+
 [[ports]]
 localPort = 41923
 externalPort = 3000
diff --git a/static/css/tailwind.css b/static/css/tailwind.css
index a14b6601..fa09d9fb 100644
--- a/static/css/tailwind.css
+++ b/static/css/tailwind.css
@@ -716,6 +716,9 @@
   .h-6 {
     height: calc(var(--spacing) * 6);
   }
+  .h-7 {
+    height: calc(var(--spacing) * 7);
+  }
   .h-8 {
     height: calc(var(--spacing) * 8);
   }
@@ -815,6 +818,9 @@
   .w-6 {
     width: calc(var(--spacing) * 6);
   }
+  .w-7 {
+    width: calc(var(--spacing) * 7);
+  }
   .w-8 {
     width: calc(var(--spacing) * 8);
   }
@@ -3280,6 +3286,11 @@
       display: none;
     }
   }
+  .md\:h-7 {
+    @media (width >= 48rem) {
+      height: calc(var(--spacing) * 7);
+    }
+  }
   .md\:h-\[140px\] {
     @media (width >= 48rem) {
       height: 140px;
@@ -3290,6 +3301,11 @@
       height: 100%;
     }
   }
+  .md\:w-7 {
+    @media (width >= 48rem) {
+      width: calc(var(--spacing) * 7);
+    }
+  }
   .md\:w-48 {
     @media (width >= 48rem) {
       width: calc(var(--spacing) * 48);
diff --git a/templates/components/layout/enhanced_header.html b/templates/components/layout/enhanced_header.html
index 764b1096..43c3ead7 100644
--- a/templates/components/layout/enhanced_header.html
+++ b/templates/components/layout/enhanced_header.html
@@ -180,8 +180,8 @@ Includes: Browse menu, advanced search, theme toggle, user dropdown, mobile menu
         @click="toggleTheme()"
         class="inline-flex items-center justify-center 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 hover:bg-accent hover:text-accent-foreground h-12 w-12"
       >
-        <i class="fas fa-sun h-5 w-5 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"></i>
-        <i class="fas fa-moon absolute h-5 w-5 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"></i>
+        <i class="fas fa-sun h-6 w-6 md:h-7 md:w-7 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"></i>
+        <i class="fas fa-moon absolute h-6 w-6 md:h-7 md:w-7 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"></i>
         <span class="sr-only">Toggle theme</span>
       </button>
 
@@ -280,8 +280,8 @@ Includes: Browse menu, advanced search, theme toggle, user dropdown, mobile menu
           @click="toggleTheme()"
           class="inline-flex items-center justify-center 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 hover:bg-accent hover:text-accent-foreground h-10 w-10"
         >
-          <i class="fas fa-sun h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"></i>
-          <i class="fas fa-moon absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"></i>
+          <i class="fas fa-sun h-6 w-6 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"></i>
+          <i class="fas fa-moon absolute h-6 w-6 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"></i>
         </button>
       </div>