perf(model-pricing): optimize upstream price sync tables

web/default/src/components/data-table/core/badge-cell.tsx

@@ -27,7 +27,7 @@ export function BadgeCell({ className, ...props }: BadgeCellProps) {
     <div
       data-slot='badge-cell'
       className={cn(
-        '-ml-1.5 flex max-w-full min-w-0 items-center gap-1 overflow-hidden [&_[data-slot=status-badge]]:max-w-full [&_[data-slot=status-badge]]:min-w-0',
+        'flex max-w-full min-w-0 items-center gap-1 overflow-hidden [&_[data-slot=status-badge]]:max-w-full [&_[data-slot=status-badge]]:min-w-0',
         className
       )}
       {...props}

web/default/src/components/data-table/core/badge-list-cell.tsx

@@ -35,7 +35,6 @@ interface BadgeListCellProps {
 /**
  * Table cell renderer for a list of badges with overflow tooltip.
  * Displays up to `max` badges inline; remaining items appear in a tooltip.
- * Applies -ml-1.5 to compensate for badge px-1.5 and align with column header.
  */
 export function BadgeListCell({
   items,
@@ -51,7 +50,7 @@ export function BadgeListCell({
   return (
     <TooltipProvider>
       <Tooltip>
-        <TooltipTrigger render={<div className='-ml-1.5 max-w-full' />}>
+        <TooltipTrigger render={<div className='max-w-full' />}>
           <StatusBadgeList
             items={items}
             max={max}

web/default/src/components/data-table/layout/card-row-content.tsx

@@ -114,7 +114,7 @@ function CompactContent<TData>({ row }: { row: Row<TData> }) {
                     {label}
                   </div>
                 )}
-                <div className='min-w-0 overflow-hidden text-xs [&_:is([data-slot=badge-cell],[data-slot=provider-badge],[data-slot=status-badge])]:ml-0'>
+                <div className='min-w-0 overflow-hidden text-xs'>
                   <StatusBadgeTypeContext.Provider value='text'>
                     {renderCellContent(cell) ?? '-'}
                   </StatusBadgeTypeContext.Provider>
@@ -164,10 +164,7 @@ function FallbackContent<TData>({ row }: { row: Row<TData> }) {
 
         if (!label) {
           return (
-            <div
-              key={cell.id}
-              className='flex justify-end overflow-hidden [&_:is([data-slot=badge-cell],[data-slot=provider-badge],[data-slot=status-badge])]:ml-0'
-            >
+            <div key={cell.id} className='flex justify-end overflow-hidden'>
               <StatusBadgeTypeContext.Provider value='text'>
                 {renderCellContent(cell)}
               </StatusBadgeTypeContext.Provider>
@@ -183,7 +180,7 @@ function FallbackContent<TData>({ row }: { row: Row<TData> }) {
             <span className='text-muted-foreground shrink-0 text-[10px] font-medium select-none'>
               {label}
             </span>
-            <div className='flex min-w-0 flex-1 items-center justify-end overflow-hidden text-xs [&_:is([data-slot=badge-cell],[data-slot=provider-badge],[data-slot=status-badge])]:ml-0'>
+            <div className='flex min-w-0 flex-1 items-center justify-end overflow-hidden text-xs'>
               <StatusBadgeTypeContext.Provider value='text'>
                 {renderCellContent(cell) ?? '-'}
               </StatusBadgeTypeContext.Provider>

web/default/src/components/provider-badge.tsx

@@ -50,7 +50,7 @@ export function ProviderBadge({
         autoColor={colorText ? label : undefined}
         variant={colorText ? undefined : 'neutral'}
         size='sm'
-        className={cn('min-w-0 shrink overflow-hidden', !icon && 'pl-0')}
+        className='min-w-0 shrink overflow-hidden'
         {...badgeProps}
       />
     </div>

web/default/src/components/status-badge.tsx

@@ -87,9 +87,9 @@ export const StatusBadgeTypeContext =
   React.createContext<StatusBadgeType>('badge')
 
 const sizeMap = {
-  sm: 'h-5 gap-1 px-1.5 text-sm leading-none',
-  md: 'h-5 gap-1 px-1.5 text-sm leading-none',
-  lg: 'h-6 gap-1.5 px-2 text-sm leading-none',
+  sm: 'h-5 gap-1 text-sm leading-none',
+  md: 'h-5 gap-1 text-sm leading-none',
+  lg: 'h-6 gap-1.5 text-sm leading-none',
 } as const
 
 const textSizeMap = {

web/default/src/components/ui/input.tsx

@@ -27,7 +27,7 @@ function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
       type={type}
       data-slot='input'
       className={cn(
-        'border-input file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 disabled:bg-input/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 h-8 w-full min-w-0 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-3 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-sm',
+        'border-input file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 disabled:bg-input/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 h-8 w-full min-w-0 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-3 focus-visible:ring-inset disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 aria-invalid:ring-inset md:text-sm',
         className
       )}
       {...props}

web/default/src/features/channels/components/channel-card.tsx

@@ -159,7 +159,7 @@ function ChannelCardComponent({
         {/* Last row: groups span the full width, showing every group (no label) */}
         <div className='min-w-0'>
           {groups.length > 0 ? (
-            <div className='-ml-1.5 flex flex-wrap gap-1'>
+            <div className='flex flex-wrap gap-1'>
               {groups.map((g) => (
                 <GroupBadge
                   key={g}

web/default/src/features/channels/components/channels-columns.tsx

@@ -46,12 +46,12 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from '@/components/ui/tooltip'
+import { toIntlLocale } from '@/i18n/languages'
 import {
   formatCurrencyFromUSD,
   formatQuotaWithCurrency,
   getCurrencyLabel,
 } from '@/lib/currency'
-import { toIntlLocale } from '@/i18n/languages'
 import { formatTimestampToDate } from '@/lib/format'
 import { truncateText } from '@/lib/utils'
 
@@ -372,7 +372,7 @@ function BalanceCell({ channel }: { channel: Channel }) {
                 size='sm'
                 copyable={false}
                 showDot={false}
-                className='-ml-1.5 cursor-help'
+                className='cursor-help'
               />
             }
           />
@@ -435,7 +435,7 @@ function BalanceCell({ channel }: { channel: Channel }) {
 
   return (
     <TooltipProvider>
-      <div className='-ml-1.5 flex items-center gap-1'>
+      <div className='flex items-center gap-1'>
         <Tooltip>
           <TooltipTrigger
             render={
@@ -703,7 +703,6 @@ export function useChannelsColumns(
                 variant='blue'
                 size='sm'
                 copyable={false}
-                className='-ml-1.5'
               />
             )
           }
@@ -846,7 +845,6 @@ export function useChannelsColumns(
                   variant='success'
                   size='sm'
                   copyable={false}
-                  className='-ml-1.5'
                 />
               )
             } else {
@@ -856,7 +854,6 @@ export function useChannelsColumns(
                   variant='neutral'
                   size='sm'
                   copyable={false}
-                  className='-ml-1.5'
                 />
               )
             }
@@ -1025,14 +1022,7 @@ export function useChannelsColumns(
             return <span className='text-muted-foreground text-xs'>-</span>
           }
 
-          return (
-            <StatusBadge
-              label={tag}
-              autoColor={tag}
-              size='sm'
-              className='-ml-1.5'
-            />
-          )
+          return <StatusBadge label={tag} autoColor={tag} size='sm' />
         },
         size: 120,
         enableSorting: false,
@@ -1080,7 +1070,6 @@ export function useChannelsColumns(
               variant={config.variant}
               size='sm'
               copyable={false}
-              className='-ml-1.5'
             />
           )
         },
@@ -1114,7 +1103,7 @@ export function useChannelsColumns(
                       variant='neutral'
                       size='sm'
                       copyable={false}
-                      className='-ml-1.5 cursor-pointer'
+                      className='cursor-pointer'
                     />
                   }
                 />

web/default/src/features/keys/components/api-keys-cells.tsx

@@ -36,7 +36,7 @@ import {
 } from '@/components/ui/tooltip'
 import { copyToClipboard } from '@/lib/copy-to-clipboard'
 
-import { type ApiKey } from '../types'
+import type { ApiKey } from '../types'
 import { useApiKeys } from './api-keys-provider'
 
 export function ApiKeyCell({ apiKey }: { apiKey: ApiKey }) {
@@ -54,6 +54,19 @@ export function ApiKeyCell({ apiKey }: { apiKey: ApiKey }) {
   const resolvedFullKey = resolvedKeys[apiKey.id]
   const isCopied = copiedKeyId === apiKey.id
   const maskedKey = `sk-${apiKey.key}`
+  let copyIcon = <Copy className='size-3.5' />
+  if (isLoading) {
+    copyIcon = <Loader2 className='size-3.5 animate-spin' />
+  } else if (isCopied) {
+    copyIcon = <Check className='size-3.5 text-green-600' />
+  }
+
+  let copyTooltip = t('Copy API key')
+  if (isLoading) {
+    copyTooltip = t('Loading...')
+  } else if (isCopied) {
+    copyTooltip = t('Copied!')
+  }
 
   const handlePopoverOpen = useCallback(
     (open: boolean) => {
@@ -135,21 +148,9 @@ export function ApiKeyCell({ apiKey }: { apiKey: ApiKey }) {
             />
           }
         >
-          {isLoading ? (
-            <Loader2 className='size-3.5 animate-spin' />
-          ) : isCopied ? (
-            <Check className='size-3.5 text-green-600' />
-          ) : (
-            <Copy className='size-3.5' />
-          )}
+          {copyIcon}
         </TooltipTrigger>
-        <TooltipContent>
-          {isLoading
-            ? t('Loading...')
-            : isCopied
-              ? t('Copied!')
-              : t('Copy API key')}
-        </TooltipContent>
+        <TooltipContent>{copyTooltip}</TooltipContent>
       </Tooltip>
     </div>
   )
@@ -160,12 +161,7 @@ export function ModelLimitsCell({ apiKey }: { apiKey: ApiKey }) {
 
   if (!apiKey.model_limits_enabled || !apiKey.model_limits) {
     return (
-      <StatusBadge
-        label={t('Unlimited')}
-        variant='neutral'
-        copyable={false}
-        className='-ml-1.5'
-      />
+      <StatusBadge label={t('Unlimited')} variant='neutral' copyable={false} />
     )
   }
 
@@ -203,7 +199,6 @@ export function IpRestrictionsCell({ apiKey }: { apiKey: ApiKey }) {
         label={t('No restriction')}
         variant='neutral'
         copyable={false}
-        className='-ml-1.5'
       />
     )
   }

web/default/src/features/keys/components/api-keys-columns.tsx

@@ -17,7 +17,7 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 import { useQuery } from '@tanstack/react-query'
-import { type ColumnDef } from '@tanstack/react-table'
+import type { ColumnDef } from '@tanstack/react-table'
 import { useTranslation } from 'react-i18next'
 
 import { BadgeCell, TruncatedCell } from '@/components/data-table'
@@ -35,7 +35,7 @@ import { formatQuota, formatTimestampToDate } from '@/lib/format'
 import { cn } from '@/lib/utils'
 
 import { API_KEY_STATUSES } from '../constants'
-import { type ApiKey } from '../types'
+import type { ApiKey } from '../types'
 import {
   ApiKeyCell,
   ModelLimitsCell,
@@ -116,7 +116,6 @@ export function useApiKeysColumns(): ColumnDef<ApiKey>[] {
             label={t(statusConfig.label)}
             variant={statusConfig.variant}
             copyable={false}
-            className='-ml-1.5'
           />
         )
       },
@@ -144,7 +143,6 @@ export function useApiKeysColumns(): ColumnDef<ApiKey>[] {
               label={t('Unlimited')}
               variant='neutral'
               copyable={false}
-              className='-ml-1.5'
             />
           )
         }
@@ -224,7 +222,6 @@ export function useApiKeysColumns(): ColumnDef<ApiKey>[] {
         }
         return (
           <TruncatedCell
-            className='-ml-1.5'
             tooltipContent={group || '-'}
             tooltipClassName='break-all'
           >
@@ -292,7 +289,6 @@ export function useApiKeysColumns(): ColumnDef<ApiKey>[] {
               label={t('Never')}
               variant='neutral'
               copyable={false}
-              className='-ml-1.5'
             />
           )
         }

web/default/src/features/models/components/deployments-columns.tsx

@@ -74,7 +74,7 @@ export function useDeploymentsColumns(opts: {
             variant='neutral'
             copyText={name}
             size='sm'
-            className='-ml-1.5 font-mono'
+            className='font-mono'
           />
         )
       },
@@ -98,7 +98,6 @@ export function useDeploymentsColumns(opts: {
             variant={config.variant}
             size='sm'
             copyable={false}
-            className='-ml-1.5'
           />
         )
       },
@@ -130,7 +129,6 @@ export function useDeploymentsColumns(opts: {
             autoColor={String(provider)}
             size='sm'
             copyable={false}
-            className='-ml-1.5'
           />
         )
       },