fix(web): prevent list cell text and badge overflow (#5510)

* fix(ui): prevent table cell text overflow

- add default truncation with hover details for text cells in shared and static data tables to prevent content from spilling into adjacent columns.
- adjust API key group, model, and IP restriction columns to fix badge overlap and left alignment drift.
- reuse a shared truncated cell component and add width constraints for composite badge cells.

* fix(table): prevent badge content from overflowing columns

- make table text and badge cells shrink within constrained columns so long values truncate instead of bleeding into adjacent cells.
- add a shared BadgeCell wrapper to keep badge alignment consistent across API keys and other list pages.
- update affected list views to use constrained wrappers for group, provider, pricing, OAuth, and API info values.

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

+/*
+Copyright (C) 2023-2026 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+
+type BadgeCellProps = React.HTMLAttributes<HTMLDivElement>
+
+export function BadgeCell({ className, ...props }: BadgeCellProps) {
+  return (
+    <div
+      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',
+        className
+      )}
+      {...props}
+    />
+  )
+}

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

@@ -17,13 +17,13 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 import * as React from 'react'
-import { StatusBadgeList } from '@/components/status-badge'
 import {
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
 } from '@/components/ui/tooltip'
+import { StatusBadgeList } from '@/components/status-badge'
 
 interface BadgeListCellProps {
   items: React.ReactNode[]
@@ -50,7 +50,7 @@ export function BadgeListCell({
   return (
     <TooltipProvider>
       <Tooltip>
-        <TooltipTrigger render={<div className='-ml-1.5' />}>
+        <TooltipTrigger render={<div className='-ml-1.5 max-w-full' />}>
           <StatusBadgeList
             items={items}
             max={max}

web/default/src/components/data-table/core/data-table-row.tsx

@@ -17,8 +17,10 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 import * as React from 'react'
-import { flexRender, type Row } from '@tanstack/react-table'
+import { flexRender, type Cell, type Row } from '@tanstack/react-table'
+import { cn } from '@/lib/utils'
 import { TableCell, TableRow } from '@/components/ui/table'
+import { TruncatedCell } from './truncated-cell'
 import type { DataTableColumnClassName } from './types'
 
 type DataTableRowProps<TData> = {
@@ -42,9 +44,12 @@ function DataTableRowInner<TData>({
       {row.getVisibleCells().map((cell) => (
         <TableCell
           key={cell.id}
-          className={getColumnClassName?.(cell.column.id, 'cell')}
+          className={cn(
+            'max-w-full min-w-0 overflow-hidden',
+            getColumnClassName?.(cell.column.id, 'cell')
+          )}
         >
-          {flexRender(cell.column.columnDef.cell, cell.getContext())}
+          {renderCellContent(cell)}
         </TableCell>
       ))}
     </TableRow>
@@ -61,3 +66,28 @@ export const DataTableRow = React.memo(DataTableRowInner, (prev, next) => {
     prev.row.getIsSelected() === next.row.getIsSelected()
   )
 }) as typeof DataTableRowInner
+
+function renderCellContent<TData>(cell: Cell<TData, unknown>) {
+  const content = flexRender(cell.column.columnDef.cell, cell.getContext())
+  const textContent = getPrimitiveTextContent(content)
+
+  if (!textContent) return content
+
+  return <TruncatedCell tooltipContent={textContent}>{content}</TruncatedCell>
+}
+
+function getPrimitiveTextContent(content: React.ReactNode): string | null {
+  if (typeof content === 'string' || typeof content === 'number') {
+    return String(content)
+  }
+
+  if (
+    React.isValidElement<{ children?: React.ReactNode }>(content) &&
+    (typeof content.props.children === 'string' ||
+      typeof content.props.children === 'number')
+  ) {
+    return String(content.props.children)
+  }
+
+  return null
+}

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

+/*
+Copyright (C) 2023-2026 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip'
+
+type TruncatedCellProps = {
+  children: React.ReactNode
+  cellClassName?: string
+  className?: string
+  contentClassName?: string
+  side?: 'top' | 'bottom' | 'left' | 'right'
+  tooltipClassName?: string
+  tooltipContent?: React.ReactNode
+}
+
+export function TruncatedCell({
+  children,
+  cellClassName,
+  className,
+  contentClassName,
+  side = 'top',
+  tooltipClassName,
+  tooltipContent,
+}: TruncatedCellProps) {
+  const content = tooltipContent ?? getTextContent(children)
+
+  if (!content) {
+    return (
+      <div
+        className={cn(
+          'block max-w-full min-w-0 truncate',
+          cellClassName,
+          className
+        )}
+      >
+        {children}
+      </div>
+    )
+  }
+
+  return (
+    <Tooltip>
+      <TooltipTrigger
+        render={
+          <div
+            className={cn(
+              'block max-w-full min-w-0 truncate',
+              cellClassName,
+              className
+            )}
+          />
+        }
+      >
+        <div className={cn('truncate', contentClassName)}>{children}</div>
+      </TooltipTrigger>
+      <TooltipContent
+        side={side}
+        className={cn('max-w-xs break-all', tooltipClassName)}
+      >
+        {content}
+      </TooltipContent>
+    </Tooltip>
+  )
+}
+
+function getTextContent(node: React.ReactNode): string {
+  if (typeof node === 'string' || typeof node === 'number') return String(node)
+  if (Array.isArray(node)) return node.map(getTextContent).join('')
+  return ''
+}

web/default/src/components/data-table/index.ts

@@ -18,7 +18,9 @@ For commercial licensing, please contact support@quantumnous.com
 */
 export { DataTablePagination } from './core/pagination'
 export { DataTableColumnHeader } from './core/column-header'
+export { BadgeCell } from './core/badge-cell'
 export { BadgeListCell } from './core/badge-list-cell'
+export { TruncatedCell } from './core/truncated-cell'
 export { DataTableViewOptions } from './toolbar/view-options'
 export { DataTableToolbar } from './toolbar/toolbar'
 export { DataTableBulkActions } from './toolbar/bulk-actions'

web/default/src/components/data-table/static/static-data-table.tsx

@@ -26,6 +26,7 @@ import {
   TableHeader,
   TableRow,
 } from '@/components/ui/table'
+import { TruncatedCell } from '../core/truncated-cell'
 import { staticDataTableClassNames } from './static-data-table-classnames'
 
 type StaticDataTableBaseProps = {
@@ -163,15 +164,47 @@ function StaticDataTableRow<TData>({
       {columns.map((column) => (
         <TableCell
           key={column.id}
-          className={getStaticCellClassName(column, row, index)}
+          className={cn(
+            'max-w-full min-w-0 overflow-hidden',
+            getStaticCellClassName(column, row, index)
+          )}
         >
-          {column.cell?.(row, index)}
+          {renderStaticCellContent(column, row, index)}
         </TableCell>
       ))}
     </TableRow>
   )
 }
 
+function renderStaticCellContent<TData>(
+  column: StaticDataTableColumn<TData>,
+  row: TData,
+  index: number
+) {
+  const content = column.cell?.(row, index)
+  const textContent = getPrimitiveTextContent(content)
+
+  if (!textContent) return content
+
+  return <TruncatedCell tooltipContent={textContent}>{content}</TruncatedCell>
+}
+
+function getPrimitiveTextContent(content: React.ReactNode): string | null {
+  if (typeof content === 'string' || typeof content === 'number') {
+    return String(content)
+  }
+
+  if (
+    React.isValidElement<{ children?: React.ReactNode }>(content) &&
+    (typeof content.props.children === 'string' ||
+      typeof content.props.children === 'number')
+  ) {
+    return String(content.props.children)
+  }
+
+  return null
+}
+
 function getStaticCellClassName<TData>(
   column: StaticDataTableColumn<TData>,
   row: TData,

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

@@ -60,6 +60,7 @@ export function GroupBadge(props: GroupBadgeProps) {
     ratio,
     copyable = false,
     showDot,
+    className,
     ...badgeProps
   } = props
   const groupName = group?.trim()
@@ -82,6 +83,7 @@ export function GroupBadge(props: GroupBadgeProps) {
       showDot={showDot ?? (isSpecialGroup ? false : undefined)}
       variant={isSpecialGroup ? 'neutral' : undefined}
       autoColor={isSpecialGroup ? undefined : groupName}
+      className={cn('min-w-0 shrink overflow-hidden', className)}
     />
   )
 
@@ -90,11 +92,11 @@ export function GroupBadge(props: GroupBadgeProps) {
   }
 
   return (
-    <span className='inline-flex items-center gap-2 text-xs'>
-      {badge}
+    <span className='inline-flex max-w-full min-w-0 items-center gap-2 text-xs'>
+      <span className='max-w-full min-w-0 overflow-hidden'>{badge}</span>
       <span
         className={cn(
-          'inline-flex h-5 items-center rounded-full px-1.5 font-mono text-xs leading-none font-medium tabular-nums',
+          'inline-flex h-5 shrink-0 items-center rounded-full px-1.5 font-mono text-xs leading-none font-medium tabular-nums',
           getGroupRatioClassName(ratio)
         )}
       >

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

@@ -22,6 +22,7 @@ import { type LucideIcon } from 'lucide-react'
 import { stringToColor } from '@/lib/colors'
 import { cn } from '@/lib/utils'
 import { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard'
+
 export const dotColorMap = {
   success: 'bg-success',
   warning: 'bg-warning',
@@ -81,7 +82,8 @@ export type StatusBadgeType = 'badge' | 'text' | 'underline'
 
 /** Context that lets ancestor components (e.g. MobileCardList field area)
  *  override the badge type without modifying every call site. */
-export const StatusBadgeTypeContext = React.createContext<StatusBadgeType>('badge')
+export const StatusBadgeTypeContext =
+  React.createContext<StatusBadgeType>('badge')
 
 const sizeMap = {
   sm: 'h-5 gap-1 px-1.5 text-xs leading-none',
@@ -153,15 +155,21 @@ export function StatusBadge({
     ) : null)
 
   const isBadge = type === 'badge'
+  const title = copyable
+    ? `Click to copy: ${copyText || label || ''}`
+    : label || undefined
 
   return (
     <span
       data-slot='status-badge'
       className={cn(
-        'inline-flex w-fit max-w-full shrink-0 items-center font-medium tracking-normal whitespace-nowrap transition-colors',
+        'inline-flex w-fit max-w-full min-w-0 shrink items-center font-medium tracking-normal whitespace-nowrap transition-colors',
         isBadge
           ? cn('rounded-4xl', sizeMap[size ?? 'sm'])
-          : cn(textSizeMap[size ?? 'sm'], type === 'underline' && 'border-b border-current pb-px'),
+          : cn(
+              textSizeMap[size ?? 'sm'],
+              type === 'underline' && 'border-b border-current pb-px'
+            ),
         textColorMap[computedVariant],
         pulse && 'animate-pulse',
         copyable &&
@@ -169,7 +177,7 @@ export function StatusBadge({
         className
       )}
       onClick={handleClick}
-      title={copyable ? `Click to copy: ${copyText || label || ''}` : undefined}
+      title={title}
       {...props}
     >
       {showDot && (
@@ -221,7 +229,7 @@ export function StatusBadgeList<T>(props: StatusBadgeListProps<T>) {
   return (
     <div
       className={cn(
-        'flex max-w-full items-center gap-1 overflow-hidden',
+        'flex max-w-full min-w-0 items-center gap-1 overflow-hidden',
         className
       )}
       {...domProps}

web/default/src/components/truncated-text.tsx

 import { cn } from '@/lib/utils'
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from '@/components/ui/tooltip'
+import { TruncatedCell } from '@/components/data-table'
 
 interface TruncatedTextProps {
   text: string
@@ -20,19 +15,8 @@ export function TruncatedText({
   side = 'top',
 }: TruncatedTextProps) {
   return (
-    <TooltipProvider delay={300}>
-      <Tooltip>
-        <TooltipTrigger
-          render={
-            <span className={cn('block truncate', maxWidth, className)} />
-          }
-        >
-          {text}
-        </TooltipTrigger>
-        <TooltipContent side={side} className='max-w-xs break-all'>
-          {text}
-        </TooltipContent>
-      </Tooltip>
-    </TooltipProvider>
+    <TruncatedCell className={cn(maxWidth, className)} side={side}>
+      {text}
+    </TruncatedCell>
   )
 }

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

@@ -32,6 +32,7 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from '@/components/ui/tooltip'
+import { BadgeCell } from '@/components/data-table'
 import { StatusBadge } from '@/components/status-badge'
 import { type ApiKey } from '../types'
 import { useApiKeys } from './api-keys-provider'
@@ -157,7 +158,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'
+      />
     )
   }
 
@@ -165,7 +171,7 @@ export function ModelLimitsCell({ apiKey }: { apiKey: ApiKey }) {
 
   return (
     <Tooltip>
-      <TooltipTrigger render={<span />}>
+      <TooltipTrigger render={<BadgeCell />}>
         <StatusBadge
           label={t('{{count}} model(s)', { count: models.length })}
           variant='neutral'
@@ -195,6 +201,7 @@ export function IpRestrictionsCell({ apiKey }: { apiKey: ApiKey }) {
         label={t('No restriction')}
         variant='neutral'
         copyable={false}
+        className='-ml-1.5'
       />
     )
   }
@@ -206,7 +213,7 @@ export function IpRestrictionsCell({ apiKey }: { apiKey: ApiKey }) {
 
   return (
     <Tooltip>
-      <TooltipTrigger render={<span />}>
+      <TooltipTrigger render={<BadgeCell />}>
         <StatusBadge
           label={t('{{count}} IP(s)', { count: ips.length })}
           variant='neutral'

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

@@ -29,6 +29,7 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from '@/components/ui/tooltip'
+import { BadgeCell, TruncatedCell } from '@/components/data-table'
 import { GroupBadge } from '@/components/group-badge'
 import { StatusBadge } from '@/components/status-badge'
 import { API_KEY_STATUSES } from '../constants'
@@ -97,9 +98,7 @@ export function useApiKeysColumns(): ColumnDef<ApiKey>[] {
       accessorKey: 'name',
       header: t('Name'),
       cell: ({ row }) => (
-        <div className='max-w-[200px] truncate font-medium'>
-          {row.getValue('name')}
-        </div>
+        <span className='font-medium'>{row.getValue('name')}</span>
       ),
       size: 180,
       meta: { mobileTitle: true },
@@ -200,9 +199,7 @@ export function useApiKeysColumns(): ColumnDef<ApiKey>[] {
           return (
             <Tooltip>
               <TooltipTrigger
-                render={
-                  <span className='inline-flex items-center gap-1.5 text-xs' />
-                }
+                render={<BadgeCell className='gap-1.5 text-xs' />}
               >
                 <GroupBadge group='auto' />
                 {apiKey.cross_group_retry && (
@@ -223,7 +220,15 @@ export function useApiKeysColumns(): ColumnDef<ApiKey>[] {
             </Tooltip>
           )
         }
-        return <GroupBadge group={group} ratio={ratio} />
+        return (
+          <TruncatedCell
+            className='-ml-1.5'
+            tooltipContent={group || '-'}
+            tooltipClassName='break-all'
+          >
+            <GroupBadge group={group} ratio={ratio} />
+          </TruncatedCell>
+        )
       },
       size: 160,
       meta: { mobileHidden: true },

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

@@ -197,7 +197,7 @@ export function useDeploymentsColumns(opts: {
         if (!hardware)
           return <span className='text-muted-foreground text-xs'>-</span>
         return (
-          <div className='flex flex-wrap items-center gap-2'>
+          <div className='flex max-w-full min-w-0 flex-nowrap items-center gap-2 overflow-hidden'>
             <StatusBadge
               label={String(hardware)}
               variant='neutral'

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

@@ -27,7 +27,7 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from '@/components/ui/tooltip'
-import { BadgeListCell } from '@/components/data-table'
+import { BadgeCell, BadgeListCell } from '@/components/data-table'
 import { GroupBadge } from '@/components/group-badge'
 import { ProviderBadge } from '@/components/provider-badge'
 import { StatusBadge } from '@/components/status-badge'
@@ -187,7 +187,9 @@ export function useModelsColumns(vendors: Vendor[] = []): ColumnDef<Model>[] {
           return (
             <TooltipProvider>
               <Tooltip>
-                <TooltipTrigger render={<div className='-ml-1.5' />}>{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'
@@ -248,7 +250,11 @@ export function useModelsColumns(vendors: Vendor[] = []): ColumnDef<Model>[] {
           return <span className='text-muted-foreground text-xs'>-</span>
         }
 
-        return <ProviderBadge iconKey={vendor.icon} label={vendor.name} />
+        return (
+          <BadgeCell>
+            <ProviderBadge iconKey={vendor.icon} label={vendor.name} />
+          </BadgeCell>
+        )
       },
       filterFn: (row, id, value) => {
         if (!value || value.length === 0 || value.includes('all')) return true

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

@@ -19,7 +19,11 @@ For commercial licensing, please contact support@quantumnous.com
 import { type ColumnDef } from '@tanstack/react-table'
 import { useTranslation } from 'react-i18next'
 import { getLobeIcon } from '@/lib/lobe-icon'
-import { DataTableColumnHeader, BadgeListCell } from '@/components/data-table'
+import {
+  BadgeCell,
+  BadgeListCell,
+  DataTableColumnHeader,
+} from '@/components/data-table'
 import { GroupBadge } from '@/components/group-badge'
 import { StatusBadge } from '@/components/status-badge'
 import { DEFAULT_TOKEN_UNIT, QUOTA_TYPE_VALUES } from '../constants'
@@ -74,7 +78,7 @@ export function usePricingColumns(
         const modelIcon = modelIconKey ? getLobeIcon(modelIconKey, 14) : null
 
         return (
-          <div className='flex min-w-[200px] items-center gap-2'>
+          <div className='flex max-w-full min-w-0 items-center gap-2'>
             {modelIcon}
             <span className='truncate font-mono text-sm font-medium'>
               {model.model_name}
@@ -124,7 +128,7 @@ export function usePricingColumns(
         if (dynamicSummary) {
           if (dynamicSummary.isSpecialExpression) {
             return (
-              <div className='max-w-[320px] min-w-[200px]'>
+              <div className='max-w-full min-w-0'>
                 <div className='text-xs font-medium text-amber-700 dark:text-amber-300'>
                   {t('Special billing expression')}
                 </div>
@@ -148,7 +152,7 @@ export function usePricingColumns(
           }
 
           return (
-            <div className='min-w-[180px]'>
+            <div className='max-w-full min-w-0'>
               <span className='font-mono text-sm tabular-nums'>
                 {primaryEntries.map((entry, index) => (
                   <span key={entry.key}>
@@ -195,7 +199,7 @@ export function usePricingColumns(
           )
 
           return (
-            <div className='min-w-[160px]'>
+            <div className='max-w-full min-w-0'>
               <span className='font-mono text-sm tabular-nums'>
                 {inputPrice}
                 <span className='text-muted-foreground/40 mx-1'>/</span>
@@ -218,7 +222,7 @@ export function usePricingColumns(
         )
 
         return (
-          <div className='min-w-[100px]'>
+          <div className='max-w-full min-w-0'>
             <span className='font-mono text-sm tabular-nums'>{price}</span>
             <div className='text-muted-foreground/50 text-[10px]'>
               / {t('request')}
@@ -261,7 +265,7 @@ export function usePricingColumns(
           }
 
           return (
-            <div className='min-w-[80px]'>
+            <div className='max-w-full min-w-0'>
               <span className='font-mono text-sm tabular-nums'>
                 {stripTrailingZeros(cacheEntry.formatted)}
               </span>
@@ -290,7 +294,7 @@ export function usePricingColumns(
         )
 
         return (
-          <div className='min-w-[80px]'>
+          <div className='max-w-full min-w-0'>
             <span className='font-mono text-sm tabular-nums'>
               {cachedPrice}
             </span>
@@ -317,7 +321,7 @@ export function usePricingColumns(
           ? getLobeIcon(model.vendor_icon, 12)
           : null
         return (
-          <span className='flex items-center gap-1.5'>
+          <BadgeCell className='gap-1.5'>
             {vendorIcon}
             <StatusBadge
               label={model.vendor_name}
@@ -325,7 +329,7 @@ export function usePricingColumns(
               size='sm'
               copyable={false}
             />
-          </span>
+          </BadgeCell>
         )
       },
       size: 130,

web/default/src/features/redemption-codes/components/redemptions-columns.tsx

@@ -74,13 +74,9 @@ export function useRedemptionsColumns(): ColumnDef<Redemption>[] {
       accessorKey: 'name',
       header: t('Name'),
       meta: { mobileTitle: true },
-      cell: ({ row }) => {
-        return (
-          <div className='max-w-[150px] truncate font-medium'>
-            {row.getValue('name')}
-          </div>
-        )
-      },
+      cell: ({ row }) => (
+        <span className='font-medium'>{row.getValue('name')}</span>
+      ),
       size: 180,
     },
     {

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

@@ -20,6 +20,7 @@ import { useMemo } from 'react'
 import { type ColumnDef } from '@tanstack/react-table'
 import { useTranslation } from 'react-i18next'
 import { formatQuota } from '@/lib/format'
+import { BadgeCell } from '@/components/data-table'
 import { GroupBadge } from '@/components/group-badge'
 import { StatusBadge } from '@/components/status-badge'
 import { TableId } from '@/components/table-id'
@@ -48,7 +49,7 @@ export function useSubscriptionsColumns(): ColumnDef<PlanRecord>[] {
         cell: ({ row }) => {
           const plan = row.original.plan
           return (
-            <div className='max-w-[200px]'>
+            <div className='max-w-full min-w-0'>
               <div className='truncate font-medium'>{plan.title}</div>
               {plan.subtitle && (
                 <div className='text-muted-foreground truncate text-xs'>
@@ -134,7 +135,7 @@ export function useSubscriptionsColumns(): ColumnDef<PlanRecord>[] {
         cell: ({ row }) => {
           const plan = row.original.plan
           return (
-            <div className='flex gap-1'>
+            <BadgeCell>
               {plan.stripe_price_id && (
                 <StatusBadge
                   label='Stripe'
@@ -152,7 +153,7 @@ export function useSubscriptionsColumns(): ColumnDef<PlanRecord>[] {
                   copyable={false}
                 />
               )}
-            </div>
+            </BadgeCell>
           )
         },
         size: 140,
@@ -182,7 +183,11 @@ export function useSubscriptionsColumns(): ColumnDef<PlanRecord>[] {
               <span className='text-muted-foreground'>{t('No Upgrade')}</span>
             )
           }
-          return <GroupBadge group={group} />
+          return (
+            <BadgeCell>
+              <GroupBadge group={group} />
+            </BadgeCell>
+          )
         },
         size: 120,
       },

web/default/src/features/system-settings/auth/custom-oauth/components/provider-table.tsx

@@ -21,7 +21,7 @@ import { Pencil, Trash2, Plus } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import { Button } from '@/components/ui/button'
 import { ConfirmDialog } from '@/components/confirm-dialog'
-import { StaticDataTable } from '@/components/data-table'
+import { BadgeCell, StaticDataTable } from '@/components/data-table'
 import { StatusBadge } from '@/components/status-badge'
 import { useDeleteProvider } from '../hooks/use-custom-oauth-mutations'
 import type { CustomOAuthProvider } from '../types'
@@ -83,28 +83,33 @@ export function ProviderTable(props: ProviderTableProps) {
             id: 'slug',
             header: t('Slug'),
             cell: (provider) => (
-              <StatusBadge
-                label={provider.slug}
-                variant='neutral'
-                copyable={false}
-              />
+              <BadgeCell>
+                <StatusBadge
+                  label={provider.slug}
+                  variant='neutral'
+                  copyable={false}
+                />
+              </BadgeCell>
             ),
           },
           {
             id: 'status',
             header: t('Status'),
             cell: (provider) => (
-              <StatusBadge
-                label={provider.enabled ? t('Enabled') : t('Disabled')}
-                variant={provider.enabled ? 'success' : 'neutral'}
-                copyable={false}
-              />
+              <BadgeCell>
+                <StatusBadge
+                  label={provider.enabled ? t('Enabled') : t('Disabled')}
+                  variant={provider.enabled ? 'success' : 'neutral'}
+                  copyable={false}
+                />
+              </BadgeCell>
             ),
           },
           {
             id: 'client-id',
             header: t('Client ID'),
-            cellClassName: 'text-muted-foreground max-w-[120px] truncate font-mono',
+            cellClassName:
+              'text-muted-foreground max-w-[120px] truncate font-mono',
             cell: (provider) => provider.client_id,
           },
           {

web/default/src/features/system-settings/content/api-info-section.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 { useEffect, useState } from 'react'
+import { useMemo, useState } from 'react'
 import * as z from 'zod'
 import { useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
@@ -54,7 +54,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select'
-import { StaticDataTable } from '@/components/data-table'
+import { BadgeCell, StaticDataTable } from '@/components/data-table'
 import { Dialog } from '@/components/dialog'
 import { StatusBadge } from '@/components/status-badge'
 import { SettingsSwitchField } from '../components/settings-form-layout'
@@ -103,18 +103,37 @@ const colorOptions = [
   { value: 'slate', label: 'Slate' },
 ]
 
+function parseApiInfoList(data: string): ApiInfo[] {
+  try {
+    const parsed = JSON.parse(data || '[]')
+    if (!Array.isArray(parsed)) return []
+
+    return parsed.map((item, idx) => ({
+      ...item,
+      id: item.id || idx + 1,
+    }))
+  } catch {
+    return []
+  }
+}
+
 export function ApiInfoSection({ enabled, data }: ApiInfoSectionProps) {
   const { t } = useTranslation()
   const updateOption = useUpdateOption()
   const apiInfoSchema = createApiInfoSchema(t)
-  const [apiInfoList, setApiInfoList] = useState<ApiInfo[]>([])
-  const [isEnabled, setIsEnabled] = useState(enabled)
-  const [hasChanges, setHasChanges] = useState(false)
+  const parsedApiInfoList = useMemo(() => parseApiInfoList(data), [data])
+  const [draftApiInfoList, setDraftApiInfoList] = useState<ApiInfo[] | null>(
+    null
+  )
+  const [isEnabledDraft, setIsEnabledDraft] = useState<boolean | null>(null)
   const [selectedIds, setSelectedIds] = useState<number[]>([])
   const [showDialog, setShowDialog] = useState(false)
   const [showDeleteDialog, setShowDeleteDialog] = useState(false)
   const [editingApiInfo, setEditingApiInfo] = useState<ApiInfo | null>(null)
   const [deleteTarget, setDeleteTarget] = useState<'single' | 'batch'>('single')
+  const apiInfoList = draftApiInfoList ?? parsedApiInfoList
+  const isEnabled = isEnabledDraft ?? enabled
+  const hasChanges = draftApiInfoList !== null
 
   const form = useForm<ApiInfoFormValues>({
     resolver: zodResolver(apiInfoSchema),
@@ -126,33 +145,13 @@ export function ApiInfoSection({ enabled, data }: ApiInfoSectionProps) {
     },
   })
 
-  useEffect(() => {
-    try {
-      const parsed = JSON.parse(data || '[]')
-      if (Array.isArray(parsed)) {
-        setApiInfoList(
-          parsed.map((item, idx) => ({
-            ...item,
-            id: item.id || idx + 1,
-          }))
-        )
-      }
-    } catch {
-      setApiInfoList([])
-    }
-  }, [data])
-
-  useEffect(() => {
-    setIsEnabled(enabled)
-  }, [enabled])
-
   const handleToggleEnabled = async (checked: boolean) => {
     try {
       await updateOption.mutateAsync({
         key: 'console_setting.api_info_enabled',
         value: checked,
       })
-      setIsEnabled(checked)
+      setIsEnabledDraft(checked)
       toast.success(t('Setting saved'))
     } catch {
       toast.error(t('Failed to update setting'))
@@ -198,17 +197,15 @@ export function ApiInfoSection({ enabled, data }: ApiInfoSectionProps) {
 
   const confirmDelete = () => {
     if (deleteTarget === 'single' && editingApiInfo) {
-      setApiInfoList((prev) =>
-        prev.filter((item) => item.id !== editingApiInfo.id)
+      setDraftApiInfoList(
+        apiInfoList.filter((item) => item.id !== editingApiInfo.id)
       )
-      setHasChanges(true)
       toast.success(t('API info deleted. Click "Save Settings" to apply.'))
     } else if (deleteTarget === 'batch') {
-      setApiInfoList((prev) =>
-        prev.filter((item) => !selectedIds.includes(item.id))
+      setDraftApiInfoList(
+        apiInfoList.filter((item) => !selectedIds.includes(item.id))
       )
       setSelectedIds([])
-      setHasChanges(true)
       toast.success(
         t('{{count}} API entries deleted. Click "Save Settings" to apply.', {
           count: selectedIds.length,
@@ -221,18 +218,17 @@ export function ApiInfoSection({ enabled, data }: ApiInfoSectionProps) {
 
   const handleSubmitForm = (values: ApiInfoFormValues) => {
     if (editingApiInfo) {
-      setApiInfoList((prev) =>
-        prev.map((item) =>
+      setDraftApiInfoList(
+        apiInfoList.map((item) =>
           item.id === editingApiInfo.id ? { ...item, ...values } : item
         )
       )
       toast.success(t('API info updated. Click "Save Settings" to apply.'))
     } else {
       const newId = Math.max(...apiInfoList.map((item) => item.id), 0) + 1
-      setApiInfoList((prev) => [...prev, { id: newId, ...values }])
+      setDraftApiInfoList([...apiInfoList, { id: newId, ...values }])
       toast.success(t('API info added. Click "Save Settings" to apply.'))
     }
-    setHasChanges(true)
     setShowDialog(false)
   }
 
@@ -243,7 +239,7 @@ export function ApiInfoSection({ enabled, data }: ApiInfoSectionProps) {
         value: JSON.stringify(apiInfoList),
       })
       if (result.success) {
-        setHasChanges(false)
+        setDraftApiInfoList(null)
       }
     } catch {
       toast.error(t('Failed to save API info'))
@@ -330,22 +326,26 @@ export function ApiInfoSection({ enabled, data }: ApiInfoSectionProps) {
               header: t('URL'),
               cellClassName: 'max-w-xs truncate font-mono text-sm',
               cell: (apiInfo) => (
-                <StatusBadge
-                  label={apiInfo.url}
-                  variant='neutral'
-                  copyable={false}
-                />
+                <BadgeCell>
+                  <StatusBadge
+                    label={apiInfo.url}
+                    variant='neutral'
+                    copyable={false}
+                  />
+                </BadgeCell>
               ),
             },
             {
               id: 'route',
               header: t('Route'),
               cell: (apiInfo) => (
-                <StatusBadge
-                  label={apiInfo.route}
-                  variant='neutral'
-                  copyable={false}
-                />
+                <BadgeCell>
+                  <StatusBadge
+                    label={apiInfo.route}
+                    variant='neutral'
+                    copyable={false}
+                  />
+                </BadgeCell>
               ),
             },
             {

web/default/src/features/system-settings/models/upstream-ratio-sync-columns.tsx

@@ -27,6 +27,7 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from '@/components/ui/tooltip'
+import { BadgeCell } from '@/components/data-table'
 import { StatusBadge } from '@/components/status-badge'
 import type { RatioType } from '../types'
 import {
@@ -63,8 +64,8 @@ export function useUpstreamRatioSyncColumns(
         cell: ({ row }) => {
           const model = row.original.model
           return (
-            <div className='flex min-w-[180px] items-center gap-2'>
-              <span className='font-medium'>{model}</span>
+            <div className='flex max-w-full min-w-0 items-center gap-2'>
+              <span className='truncate font-medium'>{model}</span>
               {row.original.billingConflict && (
                 <TooltipProvider>
                   <Tooltip>
@@ -94,14 +95,11 @@ export function useUpstreamRatioSyncColumns(
             ratioTypeFilter
           )
           return (
-            <div className='flex min-w-[260px] flex-col gap-2'>
+            <div className='flex max-w-full min-w-0 flex-col gap-2'>
               {fields.map((ratioType) => {
                 const current = row.original.ratioTypes[ratioType]?.current
                 return (
-                  <div
-                    key={ratioType}
-                    className='flex min-w-0 flex-wrap items-center gap-2'
-                  >
+                  <BadgeCell key={ratioType} className='ml-0 flex-wrap gap-2'>
                     <StatusBadge
                       label={getSyncFieldLabel(ratioType, t)}
                       autoColor={ratioType}
@@ -136,7 +134,7 @@ export function useUpstreamRatioSyncColumns(
                         </Tooltip>
                       </TooltipProvider>
                     )}
-                  </div>
+                  </BadgeCell>
                 )
               })}
             </div>
@@ -215,7 +213,7 @@ export function useUpstreamRatioSyncColumns(
           )
 
           return (
-            <div className='flex min-w-[280px] flex-col gap-2'>
+            <div className='flex max-w-full min-w-0 flex-col gap-2'>
               {fields.map((ratioType) => {
                 const diff = row.original.ratioTypes[ratioType]
                 const upstreamVal = diff?.upstreams?.[upstreamName]

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

@@ -27,6 +27,7 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from '@/components/ui/tooltip'
+import { BadgeCell } from '@/components/data-table'
 import { GroupBadge } from '@/components/group-badge'
 import { LongText } from '@/components/long-text'
 import { StatusBadge } from '@/components/status-badge'
@@ -227,7 +228,11 @@ export function useUsersColumns(): ColumnDef<User>[] {
       header: t('Group'),
       cell: ({ row }) => {
         const group = row.getValue('group') as string
-        return <GroupBadge group={group} />
+        return (
+          <BadgeCell>
+            <GroupBadge group={group} />
+          </BadgeCell>
+        )
       },
       filterFn: (row, id, value) => {
         const group = String(row.getValue(id) || t('User Group')).toLowerCase()
@@ -272,7 +277,7 @@ export function useUsersColumns(): ColumnDef<User>[] {
         const inviterId = user.inviter_id || 0
 
         return (
-          <div className='flex min-w-[220px] flex-wrap items-center gap-1'>
+          <div className='flex max-w-full min-w-0 flex-wrap items-center gap-1 overflow-hidden'>
             <Tooltip>
               <TooltipTrigger
                 render={