From a70f15a7b2418d6249678a307455938d526ab8fe Mon Sep 17 00:00:00 2001
From: zaidmukaddam <zaidaltafmukaddam@gmail.com>
Date: Thu, 15 Aug 2024 20:29:24 +0530
Subject: [PATCH] feat: Improve dropdown menu styling and responsiveness

---
 app/page.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index 8362cd8..f8b26fa 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -239,13 +239,13 @@ export default function Home() {
             disabled={isDisabled}
             onClick={handleToggle}
           >
-            {selectedModel === 'Speed' && <FastForward className="w-5 h-5 mr-2" />}
-            {selectedModel.includes('Quality') && <Sparkles className="w-5 h-5 mr-2" />}
-            {selectedModel}
+            {selectedModel === 'Speed' && <FastForward className="w-5 h-5 sm:mr-2" />}
+            {selectedModel.includes('Quality') && <Sparkles className="w-5 h-5 sm:mr-2" />}
+            <span className="hidden sm:inline">{selectedModel}</span>
             <ChevronDown className={`w-5 h-5 ml-2 transform transition-transform ${isOpen ? 'rotate-180' : ''}`} />
           </Button>
         </DropdownMenuTrigger>
-        <DropdownMenuContent className="w-64 p-1">
+        <DropdownMenuContent className="w-64 p-1 mr-2 sm:mr-0">
           {models.map((model) => (
             <DropdownMenuItem
               key={model.name}
@@ -899,7 +899,7 @@ export default function Home() {
                   animate={{ opacity: 1, scale: 1 }}
                   transition={{ duration: 0.5, delay: 0.2 }}
                 >
-                  <User2 className="w-6 h-6 text-primary flex-shrink-0" />
+                  <User2 className="size-5 sm:size-6 text-primary flex-shrink-0" />
                 </motion.div>
                 <motion.div
                   initial={{ opacity: 0, y: 20 }}