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

@@ -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">
+        <div className="border-b border-border bg-card px-3 sm:px-6">
-          <TabsList className="h-auto bg-transparent flex-wrap py-2">
+          <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>
 

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;
+  }
 }