work on data-table

apps/web-app/src/components/ui/DataTable/DataTable.tsx

@@ -10,9 +10,56 @@ import {
   SortingState,
   useReactTable,
 } from '@tanstack/react-table';
-import { useState } from 'react';
+import { useState, useRef, useEffect } from 'react';
 import { TableVirtuoso } from 'react-virtuoso';
 
+// Tooltip wrapper for cells that might overflow
+function CellWithTooltip({ children, className }: { children: React.ReactNode; className?: string }) {
+  const [showTooltip, setShowTooltip] = useState(false);
+  const [tooltipContent, setTooltipContent] = useState('');
+  const cellRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const element = cellRef.current;
+    if (element) {
+      // Check if content is overflowing
+      const isOverflowing = element.scrollWidth > element.clientWidth;
+      if (isOverflowing) {
+        setTooltipContent(element.textContent || '');
+      }
+    }
+  }, [children]);
+
+  const handleMouseEnter = () => {
+    const element = cellRef.current;
+    if (element && element.scrollWidth > element.clientWidth) {
+      setShowTooltip(true);
+    }
+  };
+
+  const handleMouseLeave = () => {
+    setShowTooltip(false);
+  };
+
+  return (
+    <div className="relative">
+      <div
+        ref={cellRef}
+        className={className}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+      >
+        {children}
+      </div>
+      {showTooltip && tooltipContent && (
+        <div className="absolute z-50 px-2 py-1 bg-gray-900 text-white text-xs rounded shadow-lg whitespace-nowrap -top-8 left-0 max-w-xs">
+          {tooltipContent}
+        </div>
+      )}
+    </div>
+  );
+}
+
 interface DataTableProps<T> {
   data: T[];
   columns: ColumnDef<T>[];
@@ -49,6 +96,10 @@ export function DataTable<T>({
     getRowCanExpand,
     enableColumnResizing: true,
     columnResizeMode: 'onChange',
+    getCenterTotalSize: () => {
+      // Force table to use full width
+      return '100%';
+    },
   });
 
   if (loading) {
@@ -82,6 +133,7 @@ export function DataTable<T>({
             style={{
               ...style,
               width: '100%',
+              tableLayout: 'fixed',
             }}
             className="bg-background"
           />
@@ -112,11 +164,15 @@ export function DataTable<T>({
                 <td
                   key={cell.id}
                   className="px-3 py-2 text-sm text-text-primary"
-                  style={{ width: cell.column.getSize() }}
+                  style={{ 
+                    width: `${cell.column.getSize()}px`,
+                    minWidth: `${cell.column.getSize()}px`,
+                    maxWidth: `${cell.column.getSize()}px`,
+                  }}
                 >
-                  <div className="truncate">
+                  <CellWithTooltip className="truncate overflow-hidden text-ellipsis whitespace-nowrap">
                     {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                  </div>
+                  </CellWithTooltip>
                 </td>
               ))}
             </tr>
@@ -134,7 +190,11 @@ export function DataTable<T>({
                   'relative px-3 py-2 text-xs font-medium text-text-secondary uppercase tracking-wider text-left',
                   header.column.getCanSort() && 'cursor-pointer select-none hover:text-text-primary'
                 )}
-                style={{ width: header.getSize() }}
+                style={{ 
+                  width: `${header.getSize()}px`,
+                  minWidth: `${header.getSize()}px`,
+                  maxWidth: `${header.getSize()}px`,
+                }}
                 onClick={header.column.getToggleSortingHandler()}
               >
                 {header.isPlaceholder ? null : (