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