improve tabs

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 }}
     />
   );
 

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>
   );

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 }}
     />
   );
 

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 }}
     />
   );
 

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 }}
     />
   );
 

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 }}
     />
   );
 

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 }}
     />
   );
 

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 }}
     />
   );
 

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 }}
     />
   );
 

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 }}
     />
   );
 

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 &&

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 }}
     />
   );
 

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

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" },