From cbc008fc897fc878fb43efa0202a4cc5e655caa5 Mon Sep 17 00:00:00 2001
From: mbecker20 <becker.maxh@gmail.com>
Date: Fri, 13 Mar 2026 04:02:19 -0700
Subject: [PATCH] improve tabs

---
 ui/src/pages/docker/container/tabs.tsx   |  1 -
 ui/src/pages/settings/index.tsx          |  6 ++----
 ui/src/pages/stack-service/tabs.tsx      |  1 -
 ui/src/pages/swarm/config/tabs.tsx       |  1 -
 ui/src/pages/swarm/node/tabs.tsx         |  1 -
 ui/src/pages/swarm/secret/tabs.tsx       |  1 -
 ui/src/pages/swarm/service/tabs.tsx      |  1 -
 ui/src/pages/swarm/stack/tabs.tsx        |  1 -
 ui/src/pages/swarm/task/tabs.tsx         |  1 -
 ui/src/resources/server/docker/index.tsx |  1 -
 ui/src/resources/stack/info.tsx          |  2 +-
 ui/src/resources/swarm/docker/index.tsx  |  1 -
 ui/src/theme/index.tsx                   |  9 +++++++++
 ui/src/ui/mobile-friendly-tabs.tsx       | 14 ++++++++------
 14 files changed, 20 insertions(+), 21 deletions(-)

diff --git a/ui/src/pages/docker/container/tabs.tsx b/ui/src/pages/docker/container/tabs.tsx
index 68c875621..c8d08f2dc 100644
--- a/ui/src/pages/docker/container/tabs.tsx
+++ b/ui/src/pages/docker/container/tabs.tsx
@@ -89,7 +89,6 @@ export default function ContainerTabs({
       tabs={tabs}
       value={view}
       onValueChange={setView as any}
-      tabProps={{ w: 140 }}
     />
   );
 
diff --git a/ui/src/pages/settings/index.tsx b/ui/src/pages/settings/index.tsx
index 3bd18fc1a..130d78907 100644
--- a/ui/src/pages/settings/index.tsx
+++ b/ui/src/pages/settings/index.tsx
@@ -24,9 +24,10 @@ export default function Settings() {
     <Stack gap="xl" mb="50vh">
       <SettingsCoreInfo />
       <MobileFriendlyTabs
-        changeAt="xl"
         value={view}
         onValueChange={setView as any}
+        actions={currentView === "Variables" && <ExportToml includeVariables />}
+        tabsProps={{ color: "green" }}
         tabs={[
           {
             value: "Variables",
@@ -65,9 +66,6 @@ export default function Settings() {
             icon: ICONS.OnboardingKey,
           },
         ]}
-        actions={currentView === "Variables" && <ExportToml includeVariables />}
-        tabProps={{ w: 150 }}
-        tabsProps={{ color: "green" }}
       />
     </Stack>
   );
diff --git a/ui/src/pages/stack-service/tabs.tsx b/ui/src/pages/stack-service/tabs.tsx
index 3e97ba4fb..be0f9833c 100644
--- a/ui/src/pages/stack-service/tabs.tsx
+++ b/ui/src/pages/stack-service/tabs.tsx
@@ -93,7 +93,6 @@ export default function StackServiceTabs({
       tabs={tabs}
       value={view}
       onValueChange={setView as any}
-      tabProps={{ w: 140 }}
     />
   );
 
diff --git a/ui/src/pages/swarm/config/tabs.tsx b/ui/src/pages/swarm/config/tabs.tsx
index 8cca2f0a0..a7de3e38d 100644
--- a/ui/src/pages/swarm/config/tabs.tsx
+++ b/ui/src/pages/swarm/config/tabs.tsx
@@ -67,7 +67,6 @@ export default function SwarmConfigTabs({
       tabs={tabs}
       value={view}
       onValueChange={setView as any}
-      tabProps={{ w: 140 }}
     />
   );
 
diff --git a/ui/src/pages/swarm/node/tabs.tsx b/ui/src/pages/swarm/node/tabs.tsx
index 2525c1e4e..f28049861 100644
--- a/ui/src/pages/swarm/node/tabs.tsx
+++ b/ui/src/pages/swarm/node/tabs.tsx
@@ -59,7 +59,6 @@ export default function SwarmNodeTabs({
       tabs={tabs}
       value={view}
       onValueChange={setView as any}
-      tabProps={{ w: 140 }}
     />
   );
 
diff --git a/ui/src/pages/swarm/secret/tabs.tsx b/ui/src/pages/swarm/secret/tabs.tsx
index fb0f91462..de8a4301f 100644
--- a/ui/src/pages/swarm/secret/tabs.tsx
+++ b/ui/src/pages/swarm/secret/tabs.tsx
@@ -67,7 +67,6 @@ export default function SwarmSecretTabs({
       tabs={tabs}
       value={view}
       onValueChange={setView as any}
-      tabProps={{ w: 140 }}
     />
   );
 
diff --git a/ui/src/pages/swarm/service/tabs.tsx b/ui/src/pages/swarm/service/tabs.tsx
index d28461589..240689700 100644
--- a/ui/src/pages/swarm/service/tabs.tsx
+++ b/ui/src/pages/swarm/service/tabs.tsx
@@ -66,7 +66,6 @@ export default function SwarmServiceTabs({
       tabs={tabs}
       value={view}
       onValueChange={setView as any}
-      tabProps={{ w: 140 }}
     />
   );
 
diff --git a/ui/src/pages/swarm/stack/tabs.tsx b/ui/src/pages/swarm/stack/tabs.tsx
index f844c60e7..26991a510 100644
--- a/ui/src/pages/swarm/stack/tabs.tsx
+++ b/ui/src/pages/swarm/stack/tabs.tsx
@@ -69,7 +69,6 @@ export default function SwarmStackTabs({
       tabs={tabs}
       value={view}
       onValueChange={setView as any}
-      tabProps={{ w: 140 }}
     />
   );
 
diff --git a/ui/src/pages/swarm/task/tabs.tsx b/ui/src/pages/swarm/task/tabs.tsx
index 07deb4c28..d4b3f01c0 100644
--- a/ui/src/pages/swarm/task/tabs.tsx
+++ b/ui/src/pages/swarm/task/tabs.tsx
@@ -54,7 +54,6 @@ export default function SwarmTaskTabs({
       tabs={tabs}
       value={view}
       onValueChange={setView as any}
-      tabProps={{ w: 140 }}
     />
   );
 
diff --git a/ui/src/resources/server/docker/index.tsx b/ui/src/resources/server/docker/index.tsx
index dda3ee8d5..05422f213 100644
--- a/ui/src/resources/server/docker/index.tsx
+++ b/ui/src/resources/server/docker/index.tsx
@@ -79,7 +79,6 @@ export default function ServerDockerResources({
       tabs={tabsNoContent}
       value={view}
       onValueChange={setView as any}
-      tabProps={{ w: 140 }}
     />
   );
 
diff --git a/ui/src/resources/stack/info.tsx b/ui/src/resources/stack/info.tsx
index 81542aafa..ed71fc400 100644
--- a/ui/src/resources/stack/info.tsx
+++ b/ui/src/resources/stack/info.tsx
@@ -55,7 +55,7 @@ export default function StackInfo({
   const defaultShowContents = !latestContents || latestContents.length < 3;
 
   return (
-    <Section gap="xl" titleOther={titleOther}>
+    <Section titleOther={titleOther}>
       {/* Errors */}
       {latestErrors &&
         latestErrors.length > 0 &&
diff --git a/ui/src/resources/swarm/docker/index.tsx b/ui/src/resources/swarm/docker/index.tsx
index 39be22c4a..4ba1fbdec 100644
--- a/ui/src/resources/swarm/docker/index.tsx
+++ b/ui/src/resources/swarm/docker/index.tsx
@@ -92,7 +92,6 @@ export default function SwarmDockerResources({
       tabs={tabsNoContent}
       value={view}
       onValueChange={setView as any}
-      tabProps={{ w: 140 }}
     />
   );
 
diff --git a/ui/src/theme/index.tsx b/ui/src/theme/index.tsx
index 28061ee76..b0d664e72 100644
--- a/ui/src/theme/index.tsx
+++ b/ui/src/theme/index.tsx
@@ -23,6 +23,7 @@ import {
   Select,
   Switch,
   Table,
+  Tabs,
   virtualColor,
 } from "@mantine/core";
 import { Types } from "komodo_client";
@@ -253,6 +254,14 @@ const theme = createTheme({
         },
       }),
     }),
+    Tabs: Tabs.extend({
+      styles: (theme) => ({
+        list: {
+          backgroundColor: theme.colors.accent[1],
+          borderRadius: theme.radius.sm,
+        },
+      }),
+    }),
   },
 });
 
diff --git a/ui/src/ui/mobile-friendly-tabs.tsx b/ui/src/ui/mobile-friendly-tabs.tsx
index 14f187b7e..4ae85e7eb 100644
--- a/ui/src/ui/mobile-friendly-tabs.tsx
+++ b/ui/src/ui/mobile-friendly-tabs.tsx
@@ -78,12 +78,13 @@ export function MobileFriendlyTabsSelector({
   value,
   onValueChange,
   changeAt: _changeAt,
-  fullIconSize = "1.3rem",
+  fullIconSize = "1.1rem",
   mobileIconSize = "1rem",
   tabProps,
 }: MobileFriendlyTabsSelectorProps) {
   const tabs = _tabs.filter((t) => !t.hidden);
-  const changeAt = _changeAt ?? (tabs.length > 4 ? "lg" : "md");
+  const changeAt =
+    _changeAt ?? (tabs.length > 6 ? "lg" : tabs.length > 3 ? "md" : "sm");
   const SelectedIcon = tabs.find((tab) => tab.value === value)?.icon;
   return (
     <>
@@ -100,10 +101,12 @@ export function MobileFriendlyTabsSelector({
             >
               <Group
                 gap="xs"
-                fz="h3"
+                fz="lg"
                 justify="center"
                 c={tabValue === value ? undefined : "dimmed"}
-                w={tabProps?.w ?? 140}
+                w={100}
+                miw="fit-content"
+                wrap="nowrap"
                 {...tabProps}
               >
                 {Icon && <Icon size={fullIconSize} />}
@@ -116,7 +119,7 @@ export function MobileFriendlyTabsSelector({
       </Group>
 
       {/* MOBILE VIEW */}
-      <Stack hiddenFrom={changeAt}>
+      <Stack hiddenFrom={changeAt} w="100%">
         <Select
           w={{ base: "100%", md: 300 }}
           value={value}
@@ -137,7 +140,6 @@ export function MobileFriendlyTabsSelector({
               </Group>
             );
           }}
-          // maxDropdownHeight="calc(100vh - 230px)"
           withScrollArea={false}
           styles={{
             dropdown: { maxHeight: "calc(100vh - 230px)", overflowY: "auto" },