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,22 +53,9 @@ export function DataTable<T>({
   }
 
   return (
-    <div className={cn('bg-background text-text-primary', className)}>
-      {/* Search */}
-      <div className="p-4 border-b border-border">
-        <input
-          type="text"
-          value={globalFilter}
-          onChange={e => setGlobalFilter(e.target.value)}
-          placeholder="Search..."
-          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"
-        />
-      </div>
-
-      {/* Virtualized Table */}
     <TableVirtuoso
-        style={{ height: `${height}px` }}
+      style={height ? { height: `${height}px` } : { height: '100%' }}
-        className="border border-border rounded-lg"
+      className={cn('border border-border rounded-lg', className)}
       totalCount={rows.length}
       components={{
         Table: ({ style, ...props }) => (
@@ -154,14 +135,5 @@ export function DataTable<T>({
         ))
       }
     />
-
-      {/* Footer */}
-      <div className="flex items-center justify-between mt-2 px-2 text-sm text-text-secondary">
-        <span>
-          Showing {rows.length} of {data.length} rows
-        </span>
-        {globalFilter && <span>Filtered by: "{globalFilter}"</span>}
-      </div>
-    </div>
   );
 }

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">
+      <div className="flex-shrink-0">
         <h1 className="text-lg font-bold text-text-primary mb-2">Welcome to Stock Bot Dashboard</h1>
         <p className="text-text-secondary mb-6 text-sm">
           Monitor your trading performance, manage portfolios, and analyze market data.
         </p>
-
         <DashboardStats />
         <DashboardActivity />
+      </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">
-      <h3 className="text-lg font-bold text-text-primary mb-2">Portfolio Holdings</h3>
-      <p className="text-sm text-text-secondary mb-4">
-        Performance test: 100,000 rows × {columns.length} columns ={' '}
-        {(100000 * columns.length).toLocaleString()} cells
-      </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"
+      className="border border-border rounded-lg"
     />
-      </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>
       )}
 
+      <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 */