updates to tables and expanded them to full

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

@@ -4,7 +4,6 @@ import {
   ColumnDef,
   flexRender,
   getCoreRowModel,
-  getFilteredRowModel,
   getSortedRowModel,
   SortingState,
   useReactTable,
@@ -24,28 +23,23 @@ interface DataTableProps<T> {
 export function DataTable<T>({
   data,
   columns,
-  height = 500,
+  height,
   loading = false,
   onRowClick,
   className = '',
 }: DataTableProps<T>) {
   const [sorting, setSorting] = useState<SortingState>([]);
-  const [globalFilter, setGlobalFilter] = useState('');
 
   const table = useReactTable({
     data,
     columns,
     state: {
       sorting,
-      globalFilter,
     },
     onSortingChange: setSorting,
-    onGlobalFilterChange: setGlobalFilter,
     getCoreRowModel: getCoreRowModel(),
     getSortedRowModel: getSortedRowModel(),
-    getFilteredRowModel: getFilteredRowModel(),
     enableSorting: true,
-    enableGlobalFilter: true,
   });
 
   const { rows } = table.getRowModel();
@@ -59,109 +53,87 @@ export function DataTable<T>({
   }
 
   return (
-    <div className={cn('bg-background text-text-primary', className)}>
+    <TableVirtuoso
-      {/* Search */}
+      style={height ? { height: `${height}px` } : { height: '100%' }}
-      <div className="p-4 border-b border-border">
+      className={cn('border border-border rounded-lg', className)}
-        <input
+      totalCount={rows.length}
-          type="text"
+      components={{
-          value={globalFilter}
+        Table: ({ style, ...props }) => (
-          onChange={e => setGlobalFilter(e.target.value)}
+          <table
-          placeholder="Search..."
+            {...props}
-          className="w-full max-w-md bg-surface border border-border rounded px-3 py-2 text-sm text-text-primary placeholder-text-muted focus:ring-1 focus:ring-primary-500 focus:border-primary-500"
+            {...{
-        />
+              style: {
-      </div>
+                ...style,
+                width: table.getCenterTotalSize(),
+                minWidth: '100%',
+              },
+            }}
+            className="bg-background"
+          />
+        ),
+        TableRow: props => {
+          const index = props['data-index'] as number;
+          const row = rows[index];
 
-      {/* Virtualized Table */}
+          return (
-      <TableVirtuoso
+            <tr
-        style={{ height: `${height}px` }}
-        className="border border-border rounded-lg"
-        totalCount={rows.length}
-        components={{
-          Table: ({ style, ...props }) => (
-            <table
               {...props}
-              {...{
+              className="hover:bg-surface cursor-pointer border-b border-border"
-                style: {
+              onClick={() => onRowClick?.(row.original)}
-                  ...style,
+            >
-                  width: table.getCenterTotalSize(),
+              {row.getVisibleCells().map(cell => (
-                  minWidth: '100%',
+                <td
-                },
+                  key={cell.id}
-              }}
+                  className="px-3 py-2 text-sm text-text-primary border-r border-border"
-              className="bg-background"
+                  style={{ width: cell.column.getSize() }}
-            />
-          ),
-          TableRow: props => {
-            const index = props['data-index'] as number;
-            const row = rows[index];
-
-            return (
-              <tr
-                {...props}
-                className="hover:bg-surface cursor-pointer border-b border-border"
-                onClick={() => onRowClick?.(row.original)}
-              >
-                {row.getVisibleCells().map(cell => (
-                  <td
-                    key={cell.id}
-                    className="px-3 py-2 text-sm text-text-primary border-r border-border"
-                    style={{ width: cell.column.getSize() }}
-                  >
-                    <div className="truncate">
-                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                    </div>
-                  </td>
-                ))}
-              </tr>
-            );
-          },
-        }}
-        fixedHeaderContent={() =>
-          table.getHeaderGroups().map(headerGroup => (
-            <tr key={headerGroup.id} className="bg-surface border-b border-border">
-              {headerGroup.headers.map(header => (
-                <th
-                  key={header.id}
-                  colSpan={header.colSpan}
-                  className={cn(
-                    'px-3 py-2 text-xs font-medium text-text-secondary uppercase tracking-wider text-left border-r border-border',
-                    header.column.getCanSort() &&
-                      'cursor-pointer select-none hover:bg-surface-secondary'
-                  )}
-                  style={{ width: header.getSize() }}
-                  onClick={header.column.getToggleSortingHandler()}
                 >
-                  {header.isPlaceholder ? null : (
+                  <div className="truncate">
-                    <div className="flex items-center justify-between">
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                      <span className="truncate">
+                  </div>
-                        {flexRender(header.column.columnDef.header, header.getContext())}
+                </td>
-                      </span>
-                      {header.column.getCanSort() && (
-                        <div className="ml-2 flex-shrink-0">
-                          {header.column.getIsSorted() === 'asc' ? (
-                            <ChevronUpIcon className="h-4 w-4 text-primary-400" />
-                          ) : header.column.getIsSorted() === 'desc' ? (
-                            <ChevronDownIcon className="h-4 w-4 text-primary-400" />
-                          ) : (
-                            <div className="h-4 w-4" />
-                          )}
-                        </div>
-                      )}
-                    </div>
-                  )}
-                </th>
               ))}
             </tr>
-          ))
+          );
-        }
+        },
-      />
+      }}
-
+      fixedHeaderContent={() =>
-      {/* Footer */}
+        table.getHeaderGroups().map(headerGroup => (
-      <div className="flex items-center justify-between mt-2 px-2 text-sm text-text-secondary">
+          <tr key={headerGroup.id} className="bg-surface border-b border-border">
-        <span>
+            {headerGroup.headers.map(header => (
-          Showing {rows.length} of {data.length} rows
+              <th
-        </span>
+                key={header.id}
-        {globalFilter && <span>Filtered by: "{globalFilter}"</span>}
+                colSpan={header.colSpan}
-      </div>
+                className={cn(
-    </div>
+                  'px-3 py-2 text-xs font-medium text-text-secondary uppercase tracking-wider text-left border-r border-border',
+                  header.column.getCanSort() &&
+                    'cursor-pointer select-none hover:bg-surface-secondary'
+                )}
+                style={{ width: header.getSize() }}
+                onClick={header.column.getToggleSortingHandler()}
+              >
+                {header.isPlaceholder ? null : (
+                  <div className="flex items-center justify-between">
+                    <span className="truncate">
+                      {flexRender(header.column.columnDef.header, header.getContext())}
+                    </span>
+                    {header.column.getCanSort() && (
+                      <div className="ml-2 flex-shrink-0">
+                        {header.column.getIsSorted() === 'asc' ? (
+                          <ChevronUpIcon className="h-4 w-4 text-primary-400" />
+                        ) : header.column.getIsSorted() === 'desc' ? (
+                          <ChevronDownIcon className="h-4 w-4 text-primary-400" />
+                        ) : (
+                          <div className="h-4 w-4" />
+                        )}
+                      </div>
+                    )}
+                  </div>
+                )}
+              </th>
+            ))}
+          </tr>
+        ))
+      }
+    />
   );
 }

apps/web/src/features/dashboard/DashboardPage.tsx

@@ -2,15 +2,19 @@ import { DashboardStats, DashboardActivity, PortfolioTable } from './components'
 
 export function DashboardPage() {
   return (
-    <>
+    <div className="flex flex-col h-full space-y-6">
-      <h1 className="text-lg font-bold text-text-primary mb-2">Welcome to Stock Bot Dashboard</h1>
+      <div className="flex-shrink-0">
-      <p className="text-text-secondary mb-6 text-sm">
+        <h1 className="text-lg font-bold text-text-primary mb-2">Welcome to Stock Bot Dashboard</h1>
-        Monitor your trading performance, manage portfolios, and analyze market data.
+        <p className="text-text-secondary mb-6 text-sm">
-      </p>
+          Monitor your trading performance, manage portfolios, and analyze market data.
-
+        </p>
-      <DashboardStats />
+        <DashboardStats />
-      <DashboardActivity />
+        <DashboardActivity />
-      <PortfolioTable />
+      </div>
-    </>
+      
+      <div className="flex-1 min-h-0">
+        <PortfolioTable />
+      </div>
+    </div>
   );
 }

apps/web/src/features/dashboard/components/PortfolioTable.tsx

@@ -632,20 +632,11 @@ export function PortfolioTable() {
   ];
 
   return (
-    <div className="mt-6">
+    <DataTable
-      <h3 className="text-lg font-bold text-text-primary mb-2">Portfolio Holdings</h3>
+      data={data}
-      <p className="text-sm text-text-secondary mb-4">
+      columns={columns}
-        Performance test: 100,000 rows × {columns.length} columns ={' '}
+      onRowClick={row => console.log('Clicked:', row.symbol)}
-        {(100000 * columns.length).toLocaleString()} cells
+      className="border border-border rounded-lg"
-      </p>
+    />
-      <div className="flex-grow w-full border border-border rounded-lg overflow-hidden">
-        <DataTable
-          data={data}
-          columns={columns}
-          onRowClick={row => console.log('Clicked:', row.symbol)}
-          className="w-full h-full"
-        />
-      </div>
-    </div>
   );
 }

apps/web/src/features/exchanges/ExchangesPage.tsx

@@ -49,8 +49,8 @@ export function ExchangesPage() {
   };
 
   return (
-    <div className="space-y-6">
+    <div className="flex flex-col h-full space-y-6">
-      <div className="flex items-center justify-between">
+      <div className="flex items-center justify-between flex-shrink-0">
         <div>
           <h1 className="text-lg font-bold text-text-primary mb-2">Exchange Management</h1>
           <p className="text-text-secondary text-sm">
@@ -68,7 +68,7 @@ export function ExchangesPage() {
       </div>
 
       {syncing && (
-        <div className="bg-primary-50 border border-primary-200 rounded-lg p-4">
+        <div className="bg-primary-50 border border-primary-200 rounded-lg p-4 flex-shrink-0">
           <div className="flex items-center gap-2">
             <ArrowPathIcon className="h-4 w-4 text-primary-500 animate-spin" />
             <span className="text-primary-700 text-sm">
@@ -110,7 +110,9 @@ export function ExchangesPage() {
         </div>
       )}
 
-      <ExchangesTable />
+      <div className="flex-1 min-h-0">
+        <ExchangesTable />
+      </div>
     </div>
   );
 }

apps/web/src/features/exchanges/components/ExchangesTable.tsx

@@ -252,17 +252,7 @@ export function ExchangesTable() {
   }
 
   return (
-    <div className="space-y-4">
+    <>
-      <div className="flex items-center justify-between">
-        <div>
-          <h2 className="text-lg font-bold text-text-primary">Exchanges Management</h2>
-          <p className="text-sm text-text-secondary">
-            Manage exchange configurations and source mappings
-          </p>
-        </div>
-        <div className="text-sm text-text-muted">{exchanges?.length || 0} exchanges loaded</div>
-      </div>
-
       <DataTable
         data={exchanges || []}
         columns={columns}
@@ -270,11 +260,6 @@ export function ExchangesTable() {
         className="rounded-lg border border-border"
       />
 
-      <div className="mt-2 text-xs text-text-muted">
-        Debug: Data length: {exchanges?.length || 0}, Loading: {loading.toString()}, Error:{' '}
-        {error || 'none'}
-      </div>
-
       {addSourceDialog && (
         <AddSourceDialog
           isOpen={true}
@@ -293,6 +278,6 @@ export function ExchangesTable() {
           }}
         />
       )}
-    </div>
+    </>
   );
 }

apps/web/src/index.css

@@ -50,73 +50,39 @@
 }
 
 @layer components {
-  /* Global sleek dark-themed scrollbars for all elements */
+  /* Global dark-themed scrollbars with better contrast */
   * {
     scrollbar-width: thin;
-    scrollbar-color: rgb(74 74 74) rgb(26 26 26);
+    scrollbar-color: rgb(115 115 115) rgb(40 40 40);
   }
 
   *::-webkit-scrollbar {
-    width: 8px;
+    width: 10px;
-    height: 8px;
+    height: 10px;
   }
 
   *::-webkit-scrollbar-track {
-    background: rgb(26 26 26);
+    background: rgb(40 40 40);
-    border-radius: 4px;
+    border-radius: 5px;
   }
 
   *::-webkit-scrollbar-thumb {
-    background-color: rgb(74 74 74);
+    background-color: rgb(115 115 115);
-    border-radius: 4px;
+    border-radius: 5px;
-    border: 1px solid rgb(42 42 42);
+    border: 2px solid rgb(40 40 40);
     transition: background-color 0.2s ease;
   }
 
   *::-webkit-scrollbar-thumb:hover {
-    background-color: rgb(90 90 90);
+    background-color: rgb(140 140 140);
   }
 
   *::-webkit-scrollbar-thumb:active {
-    background-color: rgb(106 106 106);
+    background-color: rgb(160 160 160);
   }
 
   *::-webkit-scrollbar-corner {
-    background: rgb(26 26 26);
+    background: rgb(40 40 40);
-  }
-  /* Global scrollbar for the entire app */
-  * {
-    scrollbar-width: thin;
-    scrollbar-color: rgb(26 26 26) transparent;
-  }
-
-  *::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
-  }
-
-  *::-webkit-scrollbar-track {
-    background: rgb(0 0 0);
-    border-radius: 4px;
-  }
-
-  *::-webkit-scrollbar-thumb {
-    background-color: rgb(26 26 26);
-    border-radius: 4px;
-    border: 1px solid rgb(0 0 0);
-    transition: background-color 0.2s ease;
-  }
-
-  *::-webkit-scrollbar-thumb:hover {
-    background-color: rgb(42 42 42);
-  }
-
-  *::-webkit-scrollbar-thumb:active {
-    background-color: rgb(60 60 60);
-  }
-
-  *::-webkit-scrollbar-corner {
-    background: rgb(0 0 0);
   }
 
   /* Trading specific styles */