From cb318c72300a17efbcd00c03362061ec444069e2 Mon Sep 17 00:00:00 2001
From: johndoe6345789 <john.doe6345789@gmail.com>
Date: Fri, 16 Jan 2026 03:37:40 +0000
Subject: [PATCH] Generated by Spark: Favico designer is hard to find when
 mobile browser is in desktop mode. There is 3 rows of tabs, does it allow for
 4?

---
 src/App.tsx   | 16 ++++++++--------
 src/index.css | 10 ++++++++++
 2 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index c726d1a..d0f9cc9 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -594,8 +594,8 @@ Navigate to the backend directory and follow the setup instructions.
       </header>
 
       <Tabs value={activeTab} onValueChange={setActiveTab} className="flex-1 flex flex-col">
-        <div className="border-b border-border bg-card px-6">
-          <TabsList className="h-auto bg-transparent flex-wrap py-2">
+        <div className="border-b border-border bg-card px-3 sm:px-6">
+          <TabsList className="h-auto bg-transparent flex-wrap py-2 gap-1 justify-start">
             <TabsTrigger value="dashboard" className="gap-2">
               <ChartBar size={18} />
               Dashboard
@@ -656,6 +656,12 @@ Navigate to the backend directory and follow the setup instructions.
               <DeviceMobile size={18} />
               PWA
             </TabsTrigger>
+            {safeFeatureToggles.faviconDesigner && (
+              <TabsTrigger value="favicon" className="gap-2">
+                <Image size={18} />
+                Favicon
+              </TabsTrigger>
+            )}
             <TabsTrigger value="features" className="gap-2">
               <Faders size={18} />
               Features
@@ -701,12 +707,6 @@ Navigate to the backend directory and follow the setup instructions.
                 Sass Styles
               </TabsTrigger>
             )}
-            {safeFeatureToggles.faviconDesigner && (
-              <TabsTrigger value="favicon" className="gap-2">
-                <Image size={18} />
-                Favicon Designer
-              </TabsTrigger>
-            )}
           </TabsList>
         </div>
 
diff --git a/src/index.css b/src/index.css
index b4f6481..964e97a 100644
--- a/src/index.css
+++ b/src/index.css
@@ -79,4 +79,14 @@
   --radius-xl: calc(var(--radius) * 2);
   --radius-2xl: calc(var(--radius) * 3);
   --radius-full: 9999px;
+}
+
+@layer components {
+  [data-slot="tabs-list"] {
+    @apply w-full;
+  }
+  
+  [data-slot="tabs-trigger"] {
+    @apply flex-none;
+  }
 }
\ No newline at end of file