fix(data-table): prevent component cell clipping (#5536)

Merge pull request #5536 from QuantumNous/fix/data-table-component-cells

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

@@ -57,17 +57,22 @@ function DataTableRowInner<TData>({
       className={className}
       className={className}
       {...rowProps}
       {...rowProps}
     >
     >
-      {row.getVisibleCells().map((cell) => (
-        <TableCell
-          key={cell.id}
-          className={cn(
-            'max-w-full min-w-0 overflow-hidden',
-            getColumnClassName?.(cell.column.id, 'cell')
-          )}
-        >
-          {renderCellContent(cell)}
-        </TableCell>
-      ))}
+      {row.getVisibleCells().map((cell) => {
+        const renderedCell = renderCellContent(cell)
+
+        return (
+          <TableCell
+            key={cell.id}
+            className={cn(
+              'max-w-full min-w-0',
+              renderedCell.isPrimitive && 'overflow-hidden',
+              getColumnClassName?.(cell.column.id, 'cell')
+            )}
+          >
+            {renderedCell.content}
+          </TableCell>
+        )
+      })}
     </TableRow>
     </TableRow>
   )
   )
 }
 }
@@ -100,9 +105,16 @@ function renderCellContent<TData>(cell: Cell<TData, unknown>) {
   const content = flexRender(cell.column.columnDef.cell, cell.getContext())
   const content = flexRender(cell.column.columnDef.cell, cell.getContext())
   const textContent = getPrimitiveTextContent(content)
   const textContent = getPrimitiveTextContent(content)
 
 
-  if (!textContent) return content
+  if (!textContent) {
+    return { content, isPrimitive: false }
+  }
 
 
-  return <TruncatedCell tooltipContent={textContent}>{content}</TruncatedCell>
+  return {
+    content: (
+      <TruncatedCell tooltipContent={textContent}>{content}</TruncatedCell>
+    ),
+    isPrimitive: true,
+  }
 }
 }
 
 
 function getPrimitiveTextContent(content: React.ReactNode): string | null {
 function getPrimitiveTextContent(content: React.ReactNode): string | null {
@@ -110,13 +122,5 @@ function getPrimitiveTextContent(content: React.ReactNode): string | null {
     return String(content)
     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
   return null
 }
 }

web/default/src/components/data-table/core/table-sizing.ts

@@ -26,5 +26,9 @@ export function getTableSizeStyle<TData>(
     .getVisibleLeafColumns()
     .getVisibleLeafColumns()
     .reduce((total, column) => total + column.getSize(), 0)
     .reduce((total, column) => total + column.getSize(), 0)
 
 
-  return { minWidth: width, tableLayout: 'fixed', width: '100%' }
+  return {
+    minWidth: `max(100%, ${width}px)`,
+    tableLayout: 'auto',
+    width: 'max-content',
+  }
 }
 }

web/default/src/features/usage-logs/components/model-badge.tsx

@@ -101,12 +101,12 @@ function ModelBadgeContent(props: ModelBadgeProps) {
       showDot={!provider}
       showDot={!provider}
       autoColor={provider ? undefined : props.modelName}
       autoColor={provider ? undefined : props.modelName}
       className={cn(
       className={cn(
-        'border-border/60 bg-muted/30 h-6 max-w-full gap-1.5 rounded-md border px-2 [font-family:var(--font-body)]',
+        'border-border/60 bg-muted/30 h-6 max-w-none gap-1.5 rounded-md border px-2 [font-family:var(--font-body)]',
         provider && 'text-foreground',
         provider && 'text-foreground',
         props.className
         props.className
       )}
       )}
     >
     >
-      <span className='flex max-w-full min-w-0 items-center gap-1.5'>
+      <span className='flex max-w-none items-center gap-1.5'>
         {provider && (
         {provider && (
           <span
           <span
             className='flex size-3.5 shrink-0 items-center justify-center'
             className='flex size-3.5 shrink-0 items-center justify-center'
@@ -116,7 +116,7 @@ function ModelBadgeContent(props: ModelBadgeProps) {
             {getLobeIcon(provider.icon, 14)}
             {getLobeIcon(provider.icon, 14)}
           </span>
           </span>
         )}
         )}
-        <span className='truncate'>{props.modelName}</span>
+        <span className='whitespace-nowrap'>{props.modelName}</span>
       </span>
       </span>
     </StatusBadge>
     </StatusBadge>
   )
   )