From 1b1b23d1d0fdf051ec25241d65357ded60013f5d Mon Sep 17 00:00:00 2001
From: CaIon <i@caion.me>
Date: Sat, 11 Jul 2026 15:04:12 +0800
Subject: [PATCH] revert: restore StatusBadge horizontal padding

Revert 6869cd94b (perf(web): align table badge spacing).
Restores px padding on status badges so usage-log timing/duration
pills are not flush against the edges.
---
 .../components/data-table/core/badge-cell.tsx |  2 +-
 .../data-table/core/badge-list-cell.tsx       |  3 +-
 .../data-table/layout/card-row-content.tsx    |  9 +++--
 web/default/src/components/provider-badge.tsx |  2 +-
 web/default/src/components/status-badge.tsx   |  6 +--
 .../channels/components/channel-card.tsx      |  2 +-
 .../channels/components/channels-columns.tsx  | 21 +++++++---
 .../keys/components/api-keys-cells.tsx        | 39 +++++++++++--------
 .../keys/components/api-keys-columns.tsx      |  8 +++-
 .../models/components/deployments-columns.tsx |  4 +-
 .../models/components/models-columns.tsx      | 31 ++++++++-------
 .../pricing/components/pricing-columns.tsx    |  1 +
 .../components/redemptions-columns.tsx        | 10 +++--
 .../components/subscriptions-columns.tsx      |  4 +-
 .../models/model-ratio-table-columns.tsx      |  1 +
 .../columns/drawing-logs-columns.tsx          |  2 +
 .../components/columns/task-logs-columns.tsx  |  1 +
 .../users/components/users-columns.tsx        |  3 +-
 18 files changed, 96 insertions(+), 53 deletions(-)

diff --git a/web/default/src/components/data-table/core/badge-cell.tsx b/web/default/src/components/data-table/core/badge-cell.tsx
index 660baa6f..5de4c4bd 100644
--- a/web/default/src/components/data-table/core/badge-cell.tsx
+++ b/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(
-        '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',
+        '-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',
         className
       )}
       {...props}
diff --git a/web/default/src/components/data-table/core/badge-list-cell.tsx b/web/default/src/components/data-table/core/badge-list-cell.tsx
index 525a01e6..4609c9f0 100644
--- a/web/default/src/components/data-table/core/badge-list-cell.tsx
+++ b/web/default/src/components/data-table/core/badge-list-cell.tsx
@@ -35,6 +35,7 @@ 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,
@@ -50,7 +51,7 @@ export function BadgeListCell({
   return (
     <TooltipProvider>
       <Tooltip>
-        <TooltipTrigger render={<div className='max-w-full' />}>
+        <TooltipTrigger render={<div className='-ml-1.5 max-w-full' />}>
           <StatusBadgeList
             items={items}
             max={max}
diff --git a/web/default/src/components/data-table/layout/card-row-content.tsx b/web/default/src/components/data-table/layout/card-row-content.tsx
index 59af3ce5..aadaf746 100644
--- a/web/default/src/components/data-table/layout/card-row-content.tsx
+++ b/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'>
+                <div className='min-w-0 overflow-hidden text-xs [&_:is([data-slot=badge-cell],[data-slot=provider-badge],[data-slot=status-badge])]:ml-0'>
                   <StatusBadgeTypeContext.Provider value='text'>
                     {renderCellContent(cell) ?? '-'}
                   </StatusBadgeTypeContext.Provider>
@@ -164,7 +164,10 @@ function FallbackContent<TData>({ row }: { row: Row<TData> }) {
 
         if (!label) {
           return (
-            <div key={cell.id} className='flex justify-end overflow-hidden'>
+            <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'
+            >
               <StatusBadgeTypeContext.Provider value='text'>
                 {renderCellContent(cell)}
               </StatusBadgeTypeContext.Provider>
@@ -180,7 +183,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'>
+            <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'>
               <StatusBadgeTypeContext.Provider value='text'>
                 {renderCellContent(cell) ?? '-'}
               </StatusBadgeTypeContext.Provider>
diff --git a/web/default/src/components/provider-badge.tsx b/web/default/src/components/provider-badge.tsx
index 09b0290d..0f0d659c 100644
--- a/web/default/src/components/provider-badge.tsx
+++ b/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='min-w-0 shrink overflow-hidden'
+        className={cn('min-w-0 shrink overflow-hidden', !icon && 'pl-0')}
         {...badgeProps}
       />
     </div>
diff --git a/web/default/src/components/status-badge.tsx b/web/default/src/components/status-badge.tsx
index fd2e90f1..61571d69 100644
--- a/web/default/src/components/status-badge.tsx
+++ b/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 text-sm leading-none',
-  md: 'h-5 gap-1 text-sm leading-none',
-  lg: 'h-6 gap-1.5 text-sm leading-none',
+  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',
 } as const
 
 const textSizeMap = {
diff --git a/web/default/src/features/channels/components/channel-card.tsx b/web/default/src/features/channels/components/channel-card.tsx
index 7198b5e2..1dabb1c6 100644
--- a/web/default/src/features/channels/components/channel-card.tsx
+++ b/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='flex flex-wrap gap-1'>
+            <div className='-ml-1.5 flex flex-wrap gap-1'>
               {groups.map((g) => (
                 <GroupBadge
                   key={g}
diff --git a/web/default/src/features/channels/components/channels-columns.tsx b/web/default/src/features/channels/components/channels-columns.tsx
index 12c03cc0..4fcc8c02 100644
--- a/web/default/src/features/channels/components/channels-columns.tsx
+++ b/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='cursor-help'
+                className='-ml-1.5 cursor-help'
               />
             }
           />
@@ -435,7 +435,7 @@ function BalanceCell({ channel }: { channel: Channel }) {
 
   return (
     <TooltipProvider>
-      <div className='flex items-center gap-1'>
+      <div className='-ml-1.5 flex items-center gap-1'>
         <Tooltip>
           <TooltipTrigger
             render={
@@ -703,6 +703,7 @@ export function useChannelsColumns(
                 variant='blue'
                 size='sm'
                 copyable={false}
+                className='-ml-1.5'
               />
             )
           }
@@ -845,6 +846,7 @@ export function useChannelsColumns(
                   variant='success'
                   size='sm'
                   copyable={false}
+                  className='-ml-1.5'
                 />
               )
             } else {
@@ -854,6 +856,7 @@ export function useChannelsColumns(
                   variant='neutral'
                   size='sm'
                   copyable={false}
+                  className='-ml-1.5'
                 />
               )
             }
@@ -1022,7 +1025,14 @@ export function useChannelsColumns(
             return <span className='text-muted-foreground text-xs'>-</span>
           }
 
-          return <StatusBadge label={tag} autoColor={tag} size='sm' />
+          return (
+            <StatusBadge
+              label={tag}
+              autoColor={tag}
+              size='sm'
+              className='-ml-1.5'
+            />
+          )
         },
         size: 120,
         enableSorting: false,
@@ -1070,6 +1080,7 @@ export function useChannelsColumns(
               variant={config.variant}
               size='sm'
               copyable={false}
+              className='-ml-1.5'
             />
           )
         },
@@ -1103,7 +1114,7 @@ export function useChannelsColumns(
                       variant='neutral'
                       size='sm'
                       copyable={false}
-                      className='cursor-pointer'
+                      className='-ml-1.5 cursor-pointer'
                     />
                   }
                 />
diff --git a/web/default/src/features/keys/components/api-keys-cells.tsx b/web/default/src/features/keys/components/api-keys-cells.tsx
index 9a6827b5..4195cb5d 100644
--- a/web/default/src/features/keys/components/api-keys-cells.tsx
+++ b/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,19 +54,6 @@ 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) => {
@@ -148,9 +135,21 @@ export function ApiKeyCell({ apiKey }: { apiKey: ApiKey }) {
             />
           }
         >
-          {copyIcon}
+          {isLoading ? (
+            <Loader2 className='size-3.5 animate-spin' />
+          ) : isCopied ? (
+            <Check className='size-3.5 text-green-600' />
+          ) : (
+            <Copy className='size-3.5' />
+          )}
         </TooltipTrigger>
-        <TooltipContent>{copyTooltip}</TooltipContent>
+        <TooltipContent>
+          {isLoading
+            ? t('Loading...')
+            : isCopied
+              ? t('Copied!')
+              : t('Copy API key')}
+        </TooltipContent>
       </Tooltip>
     </div>
   )
@@ -161,7 +160,12 @@ export function ModelLimitsCell({ apiKey }: { apiKey: ApiKey }) {
 
   if (!apiKey.model_limits_enabled || !apiKey.model_limits) {
     return (
-      <StatusBadge label={t('Unlimited')} variant='neutral' copyable={false} />
+      <StatusBadge
+        label={t('Unlimited')}
+        variant='neutral'
+        copyable={false}
+        className='-ml-1.5'
+      />
     )
   }
 
@@ -199,6 +203,7 @@ export function IpRestrictionsCell({ apiKey }: { apiKey: ApiKey }) {
         label={t('No restriction')}
         variant='neutral'
         copyable={false}
+        className='-ml-1.5'
       />
     )
   }
diff --git a/web/default/src/features/keys/components/api-keys-columns.tsx b/web/default/src/features/keys/components/api-keys-columns.tsx
index 8ae642b8..6c553873 100644
--- a/web/default/src/features/keys/components/api-keys-columns.tsx
+++ b/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,6 +116,7 @@ export function useApiKeysColumns(): ColumnDef<ApiKey>[] {
             label={t(statusConfig.label)}
             variant={statusConfig.variant}
             copyable={false}
+            className='-ml-1.5'
           />
         )
       },
@@ -143,6 +144,7 @@ export function useApiKeysColumns(): ColumnDef<ApiKey>[] {
               label={t('Unlimited')}
               variant='neutral'
               copyable={false}
+              className='-ml-1.5'
             />
           )
         }
@@ -222,6 +224,7 @@ export function useApiKeysColumns(): ColumnDef<ApiKey>[] {
         }
         return (
           <TruncatedCell
+            className='-ml-1.5'
             tooltipContent={group || '-'}
             tooltipClassName='break-all'
           >
@@ -289,6 +292,7 @@ export function useApiKeysColumns(): ColumnDef<ApiKey>[] {
               label={t('Never')}
               variant='neutral'
               copyable={false}
+              className='-ml-1.5'
             />
           )
         }
diff --git a/web/default/src/features/models/components/deployments-columns.tsx b/web/default/src/features/models/components/deployments-columns.tsx
index c5612629..9209a73d 100644
--- a/web/default/src/features/models/components/deployments-columns.tsx
+++ b/web/default/src/features/models/components/deployments-columns.tsx
@@ -74,7 +74,7 @@ export function useDeploymentsColumns(opts: {
             variant='neutral'
             copyText={name}
             size='sm'
-            className='font-mono'
+            className='-ml-1.5 font-mono'
           />
         )
       },
@@ -98,6 +98,7 @@ export function useDeploymentsColumns(opts: {
             variant={config.variant}
             size='sm'
             copyable={false}
+            className='-ml-1.5'
           />
         )
       },
@@ -129,6 +130,7 @@ export function useDeploymentsColumns(opts: {
             autoColor={String(provider)}
             size='sm'
             copyable={false}
+            className='-ml-1.5'
           />
         )
       },
diff --git a/web/default/src/features/models/components/models-columns.tsx b/web/default/src/features/models/components/models-columns.tsx
index b51619ae..61afe555 100644
--- a/web/default/src/features/models/components/models-columns.tsx
+++ b/web/default/src/features/models/components/models-columns.tsx
@@ -16,7 +16,7 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 For commercial licensing, please contact support@quantumnous.com
 */
-import type { ColumnDef } from '@tanstack/react-table'
+import { type ColumnDef } from '@tanstack/react-table'
 import { useTranslation } from 'react-i18next'
 
 import { BadgeCell, BadgeListCell } from '@/components/data-table'
@@ -139,7 +139,7 @@ export function useModelsColumns(vendors: Vendor[] = []): ColumnDef<Model>[] {
             variant='neutral'
             copyText={name}
             size='sm'
-            className='font-mono'
+            className='-ml-1.5 font-mono'
           />
         )
       },
@@ -172,6 +172,7 @@ export function useModelsColumns(vendors: Vendor[] = []): ColumnDef<Model>[] {
                 | 'info'
             }
             size='sm'
+            className='-ml-1.5'
           />
         )
 
@@ -181,14 +182,16 @@ export function useModelsColumns(vendors: Vendor[] = []): ColumnDef<Model>[] {
           model.matched_models &&
           model.matched_models.length > 0
         ) {
-          const matchedBadges = model.matched_models.map((m) => (
-            <StatusBadge key={m} label={m} autoColor={m} size='sm' />
+          const matchedBadges = model.matched_models.map((m, idx) => (
+            <StatusBadge key={idx} label={m} autoColor={m} size='sm' />
           ))
 
           return (
             <TooltipProvider>
               <Tooltip>
-                <TooltipTrigger render={<div />}>{badge}</TooltipTrigger>
+                <TooltipTrigger render={<div className='-ml-1.5' />}>
+                  {badge}
+                </TooltipTrigger>
                 <TooltipContent
                   side='top'
                   className='border-border bg-popover max-h-48 max-w-[320px] overflow-y-auto p-2'
@@ -222,6 +225,7 @@ export function useModelsColumns(vendors: Vendor[] = []): ColumnDef<Model>[] {
             variant={config.variant}
             size='sm'
             copyable={false}
+            className='-ml-1.5'
           />
         )
       },
@@ -289,8 +293,8 @@ export function useModelsColumns(vendors: Vendor[] = []): ColumnDef<Model>[] {
         const tagArray = parseModelTags(tags)
         return (
           <BadgeListCell
-            items={tagArray.map((tag) => (
-              <StatusBadge key={tag} label={tag} autoColor={tag} size='sm' />
+            items={tagArray.map((tag, idx) => (
+              <StatusBadge key={idx} label={tag} autoColor={tag} size='sm' />
             ))}
           />
         )
@@ -309,8 +313,8 @@ export function useModelsColumns(vendors: Vendor[] = []): ColumnDef<Model>[] {
         const endpointArray = formatEndpointsDisplay(endpoints)
         return (
           <BadgeListCell
-            items={endpointArray.map((ep) => (
-              <StatusBadge key={ep} label={ep} autoColor={ep} size='sm' />
+            items={endpointArray.map((ep, idx) => (
+              <StatusBadge key={idx} label={ep} autoColor={ep} size='sm' />
             ))}
           />
         )
@@ -333,9 +337,9 @@ export function useModelsColumns(vendors: Vendor[] = []): ColumnDef<Model>[] {
         }>
         return (
           <BadgeListCell
-            items={(channels ?? []).map((c) => (
+            items={(channels ?? []).map((c, idx) => (
               <StatusBadge
-                key={`${c.id}-${c.name}-${c.type ?? ''}`}
+                key={idx}
                 label={`${c.name} (${c.type})`}
                 autoColor={c.name}
                 size='sm'
@@ -376,11 +380,11 @@ export function useModelsColumns(vendors: Vendor[] = []): ColumnDef<Model>[] {
         const quotaTypes = row.getValue('quota_types') as number[]
         return (
           <BadgeListCell
-            items={(quotaTypes ?? []).map((qt) => {
+            items={(quotaTypes ?? []).map((qt, idx) => {
               const config = QUOTA_TYPE_CONFIG[qt]
               return (
                 <StatusBadge
-                  key={qt}
+                  key={idx}
                   label={config?.label || String(qt)}
                   variant={
                     (config?.color === 'error' ? 'danger' : config?.color) as
@@ -414,6 +418,7 @@ export function useModelsColumns(vendors: Vendor[] = []): ColumnDef<Model>[] {
             variant={syncOfficial === 1 ? 'success' : 'warning'}
             size='sm'
             copyable={false}
+            className='-ml-1.5'
           />
         )
       },
diff --git a/web/default/src/features/pricing/components/pricing-columns.tsx b/web/default/src/features/pricing/components/pricing-columns.tsx
index e288849d..b298e6d9 100644
--- a/web/default/src/features/pricing/components/pricing-columns.tsx
+++ b/web/default/src/features/pricing/components/pricing-columns.tsx
@@ -104,6 +104,7 @@ export function usePricingColumns(
             label={isTokenBased ? t('Token') : t('Request')}
             variant={isTokenBased ? 'info' : 'neutral'}
             copyable={false}
+            className='-ml-1.5'
           />
         )
       },
diff --git a/web/default/src/features/redemption-codes/components/redemptions-columns.tsx b/web/default/src/features/redemption-codes/components/redemptions-columns.tsx
index d99e0525..73da30b2 100644
--- a/web/default/src/features/redemption-codes/components/redemptions-columns.tsx
+++ b/web/default/src/features/redemption-codes/components/redemptions-columns.tsx
@@ -16,7 +16,7 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 For commercial licensing, please contact support@quantumnous.com
 */
-import type { ColumnDef } from '@tanstack/react-table'
+import { type ColumnDef } from '@tanstack/react-table'
 import { useTranslation } from 'react-i18next'
 
 import { MaskedValueDisplay } from '@/components/masked-value-display'
@@ -32,7 +32,7 @@ import { formatQuota, formatTimestampToDate } from '@/lib/format'
 
 import { REDEMPTION_FILTER_EXPIRED, REDEMPTION_STATUSES } from '../constants'
 import { isRedemptionExpired, isTimestampExpired } from '../lib'
-import type { Redemption } from '../types'
+import { type Redemption } from '../types'
 import { DataTableRowActions } from './data-table-row-actions'
 
 export function useRedemptionsColumns(): ColumnDef<Redemption>[] {
@@ -96,6 +96,7 @@ export function useRedemptionsColumns(): ColumnDef<Redemption>[] {
               label={t('Expired')}
               variant='warning'
               copyable={false}
+              className='-ml-1.5'
             />
           )
         }
@@ -111,6 +112,7 @@ export function useRedemptionsColumns(): ColumnDef<Redemption>[] {
             label={t(statusConfig.labelKey)}
             variant={statusConfig.variant}
             copyable={false}
+            className='-ml-1.5'
           />
         )
       },
@@ -162,6 +164,7 @@ export function useRedemptionsColumns(): ColumnDef<Redemption>[] {
             label={formatQuota(quota)}
             variant='neutral'
             copyable={false}
+            className='-ml-1.5'
           />
         )
       },
@@ -192,6 +195,7 @@ export function useRedemptionsColumns(): ColumnDef<Redemption>[] {
               label={t('Never')}
               variant='neutral'
               copyable={false}
+              className='-ml-1.5'
             />
           )
         }
@@ -229,7 +233,7 @@ export function useRedemptionsColumns(): ColumnDef<Redemption>[] {
                   className='cursor-help'
                 />
               }
-            />
+            ></TooltipTrigger>
             <TooltipContent>
               <div className='space-y-1 text-xs'>
                 <div>
diff --git a/web/default/src/features/subscriptions/components/subscriptions-columns.tsx b/web/default/src/features/subscriptions/components/subscriptions-columns.tsx
index a9f5a231..a23148ba 100644
--- a/web/default/src/features/subscriptions/components/subscriptions-columns.tsx
+++ b/web/default/src/features/subscriptions/components/subscriptions-columns.tsx
@@ -16,7 +16,7 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 For commercial licensing, please contact support@quantumnous.com
 */
-import type { ColumnDef } from '@tanstack/react-table'
+import { type ColumnDef } from '@tanstack/react-table'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 
@@ -118,12 +118,14 @@ export function useSubscriptionsColumns(): ColumnDef<PlanRecord>[] {
               label={t('Enable')}
               variant='success'
               copyable={false}
+              className='-ml-1.5'
             />
           ) : (
             <StatusBadge
               label={t('Disable')}
               variant='neutral'
               copyable={false}
+              className='-ml-1.5'
             />
           ),
         size: 80,
diff --git a/web/default/src/features/system-settings/models/model-ratio-table-columns.tsx b/web/default/src/features/system-settings/models/model-ratio-table-columns.tsx
index 81333f56..df4aa9dc 100644
--- a/web/default/src/features/system-settings/models/model-ratio-table-columns.tsx
+++ b/web/default/src/features/system-settings/models/model-ratio-table-columns.tsx
@@ -113,6 +113,7 @@ export function buildModelRatioColumns({
           variant={getModeVariant(row.original.billingMode)}
           copyable={false}
           showDot={false}
+          className='-ml-1.5 px-0'
         />
       ),
       filterFn: (row, id, value) =>
diff --git a/web/default/src/features/usage-logs/components/columns/drawing-logs-columns.tsx b/web/default/src/features/usage-logs/components/columns/drawing-logs-columns.tsx
index 6a23ea14..2b108513 100644
--- a/web/default/src/features/usage-logs/components/columns/drawing-logs-columns.tsx
+++ b/web/default/src/features/usage-logs/components/columns/drawing-logs-columns.tsx
@@ -129,6 +129,7 @@ export function useDrawingLogsColumns(
           icon={getDrawingTypeIcon(action)}
           size='sm'
           copyable={false}
+          className='-ml-1.5'
         />
       )
     },
@@ -180,6 +181,7 @@ export function useDrawingLogsColumns(
             variant={mjSubmitResultMapper.getVariant(String(code))}
             size='sm'
             copyable={false}
+            className='-ml-1.5'
           />
         )
       },
diff --git a/web/default/src/features/usage-logs/components/columns/task-logs-columns.tsx b/web/default/src/features/usage-logs/components/columns/task-logs-columns.tsx
index 95520ec0..24836e62 100644
--- a/web/default/src/features/usage-logs/components/columns/task-logs-columns.tsx
+++ b/web/default/src/features/usage-logs/components/columns/task-logs-columns.tsx
@@ -207,6 +207,7 @@ export function useTaskLogsColumns(isAdmin: boolean): ColumnDef<TaskLog>[] {
             variant={taskStatusMapper.getVariant(status)}
             size='sm'
             copyable={false}
+            className='-ml-1.5'
           />
         )
       },
diff --git a/web/default/src/features/users/components/users-columns.tsx b/web/default/src/features/users/components/users-columns.tsx
index 986adcfc..964132e5 100644
--- a/web/default/src/features/users/components/users-columns.tsx
+++ b/web/default/src/features/users/components/users-columns.tsx
@@ -145,7 +145,7 @@ export function useUsersColumns(): ColumnDef<User>[] {
 
         return (
           <Tooltip>
-            <TooltipTrigger render={<div className='cursor-help' />}>
+            <TooltipTrigger render={<div className='-ml-1.5 cursor-help' />}>
               <StatusBadge
                 label={t(statusConfig.labelKey)}
                 variant={statusConfig.variant}
@@ -184,6 +184,7 @@ export function useUsersColumns(): ColumnDef<User>[] {
               label={t('No Quota')}
               variant='neutral'
               copyable={false}
+              className='-ml-1.5'
             />
           )
         }