65

src/App.css

@@ -21,11 +21,21 @@
 }
 
 .row {
+  position: absolute; /* Required for virtualization */
+  top: 0;
+  left: 0;
+  width: 100%;
   display: grid;
   grid-template-columns: 1fr 1fr;
-  padding: 1rem; /* Adjust padding as needed */
+  padding: 0 1rem;
   align-items: center;
   border-bottom: 1px solid #2d3748;
+  box-sizing: border-box;
+}
+
+.price-cell {
+  text-align: right;
+  font-family: 'Courier New', Courier, monospace; /* Monospace keeps price digits aligned */
 }
 
 /* Ensure the price text is right-aligned to match professional dashboards */

src/App.tsx

@@ -23,17 +23,16 @@ export default function App() {
           className="table-content" 
           style={{ height: `${rowVirtualizer.getTotalSize()}px` }}
         >
-          {rowVirtualizer.getVirtualItems().map((virtualRow) => (
+{rowVirtualizer.getVirtualItems().map((virtualRow) => (
-            <div
+  <div
-              key={virtualRow.key}
+    key={virtualRow.key}
-              className="row"
+    className="row"
-              style={{ transform: `translateY(${virtualRow.start}px)` }}
+    style={{ transform: `translateY(${virtualRow.start}px)` }}
-            >
+  >
-              <span>{data[virtualRow.index].symbol}</span>
+    <span>{data[virtualRow.index].symbol}</span>
-              <span>${data[virtualRow.index].price}</span>
+    <span className="price-cell">${data[virtualRow.index].price}</span>
-            </div>
+  </div>
-          ))}
+))}        </div>
-        </div>
       </div>
     </div>
   );