From 8983a443a5fd195241fb056d7f635e032eb797ec Mon Sep 17 00:00:00 2001
From: Mackie <iwan.mackie@gmail.com>
Date: Mon, 8 Jun 2026 08:28:45 +0800
Subject: [PATCH] 65

---
 src/App.css | 12 +++++++++++-
 src/App.tsx | 21 ++++++++++-----------
 2 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/src/App.css b/src/App.css
index 96bbb27..7659652 100644
--- a/src/App.css
+++ b/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 */
diff --git a/src/App.tsx b/src/App.tsx
index e30faaa..0a5cc0a 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -23,17 +23,16 @@ export default function App() {
           className="table-content" 
           style={{ height: `${rowVirtualizer.getTotalSize()}px` }}
         >
-          {rowVirtualizer.getVirtualItems().map((virtualRow) => (
-            <div
-              key={virtualRow.key}
-              className="row"
-              style={{ transform: `translateY(${virtualRow.start}px)` }}
-            >
-              <span>{data[virtualRow.index].symbol}</span>
-              <span>${data[virtualRow.index].price}</span>
-            </div>
-          ))}
-        </div>
+{rowVirtualizer.getVirtualItems().map((virtualRow) => (
+  <div
+    key={virtualRow.key}
+    className="row"
+    style={{ transform: `translateY(${virtualRow.start}px)` }}
+  >
+    <span>{data[virtualRow.index].symbol}</span>
+    <span className="price-cell">${data[virtualRow.index].price}</span>
+  </div>
+))}        </div>
       </div>
     </div>
   );