From b8d1880a95f9d717527811bede8f4edd910a8bbb Mon Sep 17 00:00:00 2001
From: Waleed Latif <walif6@gmail.com>
Date: Tue, 21 Jul 2026 13:19:35 -0700
Subject: [PATCH] improvement(emcn): consistent hugging tab bars via
 ChipModalTabs

- Pin ChipModalTabs to w-fit so the segmented pill always hugs its tabs
  instead of stretching full-width when dropped into a flex column
- Migrate the mothership settings tab bar off a hand-rolled full-width
  underline bar onto ChipModalTabs
- Fix undefined --border-secondary token (fell back to currentColor) in
  mothership -> --border, matching the admin settings precedent
---
 .../components/mothership/mothership.tsx      | 45 +++++++------------
 .../src/components/chip-modal/chip-modal.tsx  |  6 ++-
 2 files changed, 20 insertions(+), 31 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/mothership/mothership.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/mothership/mothership.tsx
index 7c86d4721ff..b61f8353a24 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/mothership/mothership.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/mothership/mothership.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { useCallback, useMemo, useState } from 'react'
-import { Badge, Button, ChipInput, ChipSelect, cn, Label, Skeleton } from '@sim/emcn'
+import { Badge, Button, ChipInput, ChipModalTabs, ChipSelect, Label, Skeleton } from '@sim/emcn'
 import { formatDateTime } from '@sim/utils/formatting'
 import { useQueryStates } from 'nuqs'
 import { AnthropicIcon, OpenAIIcon } from '@/components/icons'
@@ -115,26 +115,11 @@ export function Mothership() {
           />
         </div>
 
-        <div className='flex gap-1 border-[var(--border-secondary)] border-b pb-px'>
-          {TABS.map((tab) => (
-            <button
-              key={tab.id}
-              type='button'
-              onClick={() => setMothershipParams({ tab: tab.id })}
-              className={cn(
-                'relative px-3 py-2 font-medium text-sm transition-colors',
-                activeTab === tab.id
-                  ? 'text-[var(--text-primary)]'
-                  : 'text-[var(--text-tertiary)] hover-hover:hover:text-[var(--text-secondary)]'
-              )}
-            >
-              {tab.label}
-              {activeTab === tab.id && (
-                <span className='absolute right-0 bottom-0 left-0 h-[2px] bg-[var(--text-primary)]' />
-              )}
-            </button>
-          ))}
-        </div>
+        <ChipModalTabs
+          tabs={TABS.map((tab) => ({ value: tab.id, label: tab.label }))}
+          value={activeTab}
+          onChange={(value) => setMothershipParams({ tab: value as MothershipTab })}
+        />
 
         <div className='flex items-center gap-3'>
           <div className='flex items-center gap-2'>
@@ -281,7 +266,7 @@ function OverviewTab({
       )}
       {breakdown?.users && (
         <div className='flex flex-col gap-0.5'>
-          <div className='flex items-center gap-3 border-[var(--border-secondary)] border-b px-3 py-2 text-[var(--text-tertiary)] text-caption'>
+          <div className='flex items-center gap-3 border-[var(--border)] border-b px-3 py-2 text-[var(--text-tertiary)] text-caption'>
             <span className='flex-1'>User ID</span>
             <span className='w-[100px] text-right'>Requests</span>
             <span className='w-[100px] text-right'>Cost</span>
@@ -296,7 +281,7 @@ function OverviewTab({
             }) => (
               <div
                 key={u.user_id}
-                className='flex items-center gap-3 border-[var(--border-secondary)] border-b px-3 py-2 text-small last:border-b-0'
+                className='flex items-center gap-3 border-[var(--border)] border-b px-3 py-2 text-small last:border-b-0'
               >
                 <span className='flex-1 truncate font-mono text-[var(--text-primary)] text-caption'>
                   {u.user_id}
@@ -328,7 +313,7 @@ function OverviewTab({
       {requests?.requests && (
         <div className='max-h-[400px] overflow-auto'>
           <div className='flex flex-col gap-0.5'>
-            <div className='sticky top-0 z-10 flex items-center gap-3 border-[var(--border-secondary)] border-b bg-[var(--surface-1)] px-3 py-2 text-[var(--text-tertiary)] text-caption'>
+            <div className='sticky top-0 z-10 flex items-center gap-3 border-[var(--border)] border-b bg-[var(--surface-1)] px-3 py-2 text-[var(--text-tertiary)] text-caption'>
               <span className='w-[180px]'>Request ID</span>
               <span className='w-[80px]'>Model</span>
               <span className='w-[80px] text-right'>Duration</span>
@@ -352,9 +337,9 @@ function OverviewTab({
                 }) => (
                   <div
                     key={r.request_id}
-                    className='flex items-center gap-3 border-[var(--border-secondary)] border-b px-3 py-1.5 text-small last:border-b-0'
+                    className='flex items-center gap-3 border-[var(--border)] border-b px-3 py-1.5 text-small last:border-b-0'
                   >
-                    <span className='w-[180px] truncate font-mono text-[var(--text-primary)] text-xs'>
+                    <span className='w-[180px] truncate font-mono text-[var(--text-primary)] text-caption'>
                       {r.request_id ?? '—'}
                     </span>
                     <span className='w-[80px] truncate text-[var(--text-secondary)] text-caption'>
@@ -452,7 +437,7 @@ function LicensesTab({ environment }: { environment: MothershipEnv }) {
       </div>
 
       {generatedKey && (
-        <div className='rounded-md border border-[var(--border-secondary)] bg-[var(--surface-hover)] p-3'>
+        <div className='rounded-md border border-[var(--border)] bg-[var(--surface-hover)] p-3'>
           <p className='mb-1 text-[var(--text-secondary)] text-caption'>
             License key (only shown once):
           </p>
@@ -479,7 +464,7 @@ function LicensesTab({ environment }: { environment: MothershipEnv }) {
 
       {data?.licenses && (
         <div className='flex flex-col gap-0.5'>
-          <div className='flex items-center gap-3 border-[var(--border-secondary)] border-b px-3 py-2 text-[var(--text-tertiary)] text-caption'>
+          <div className='flex items-center gap-3 border-[var(--border)] border-b px-3 py-2 text-[var(--text-tertiary)] text-caption'>
             <span className='flex-1'>Name</span>
             <span className='w-[100px] text-right'>Validations</span>
             <span className='w-[140px] text-right'>Expiration</span>
@@ -498,7 +483,7 @@ function LicensesTab({ environment }: { environment: MothershipEnv }) {
             }) => (
               <div
                 key={lic.id}
-                className='flex items-center gap-3 border-[var(--border-secondary)] border-b px-3 py-2 text-small last:border-b-0'
+                className='flex items-center gap-3 border-[var(--border)] border-b px-3 py-2 text-small last:border-b-0'
               >
                 <span className='flex-1 text-[var(--text-primary)]'>{lic.name}</span>
                 <span className='w-[100px] text-right text-[var(--text-secondary)]'>
@@ -529,7 +514,7 @@ function StatCard({
   loading?: boolean
 }) {
   return (
-    <div className='rounded-md border border-[var(--border-secondary)] p-3'>
+    <div className='rounded-md border border-[var(--border)] p-3'>
       <p className='text-[var(--text-tertiary)] text-caption'>{label}</p>
       {loading ? (
         <Skeleton className='mt-1 h-[24px] w-[80px] rounded-sm' />
diff --git a/packages/emcn/src/components/chip-modal/chip-modal.tsx b/packages/emcn/src/components/chip-modal/chip-modal.tsx
index e70d99f15e7..b722de672a2 100644
--- a/packages/emcn/src/components/chip-modal/chip-modal.tsx
+++ b/packages/emcn/src/components/chip-modal/chip-modal.tsx
@@ -237,6 +237,10 @@ export interface ChipModalTabsProps {
  * Reusing `ChipSwitch` keeps every tabbed modal visually identical to the
  * segmented toggles elsewhere in the app (e.g. the billing-period switch).
  *
+ * Pinned to `w-fit` so the pill always hugs its tabs: dropped directly into a
+ * flex column the `inline-flex` trough is otherwise blockified and stretched
+ * full-width by `align-items: stretch`. A caller-supplied width class still wins.
+ *
  * @example
  * ```tsx
  * <ChipModalBody>
@@ -262,7 +266,7 @@ function ChipModalTabs({
       onChange={onChange}
       aria-label={ariaLabel}
       options={tabs.map((tab) => ({ value: tab.value, label: tab.label, icon: tab.icon }))}
-      className={className}
+      className={cn('w-fit', className)}
     />
   )
 }