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