From 9ba5e4e3d4a9f8f6aacd61df46c75043bd27757a Mon Sep 17 00:00:00 2001
From: Mackie <iwan.mackie@gmail.com>
Date: Mon, 8 Jun 2026 08:31:32 +0800
Subject: [PATCH] app

---
 src/App.css | 16 +++++++++++-----
 src/App.tsx |  9 ++++++---
 2 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/src/App.css b/src/App.css
index 7659652..9f8dd84 100644
--- a/src/App.css
+++ b/src/App.css
@@ -20,22 +20,28 @@
   width: 100%;
 }
 
+/* The container for the absolute positioning */
 .row {
-  position: absolute; /* Required for virtualization */
+  position: absolute;
   top: 0;
   left: 0;
   width: 100%;
+  padding: 0 1rem;
+  box-sizing: border-box;
+  border-bottom: 1px solid #2d3748;
+}
+
+/* The actual grid that forces alignment */
+.row-inner {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  padding: 0 1rem;
   align-items: center;
-  border-bottom: 1px solid #2d3748;
-  box-sizing: border-box;
+  height: 100%;
 }
 
 .price-cell {
   text-align: right;
-  font-family: 'Courier New', Courier, monospace; /* Monospace keeps price digits aligned */
+  font-family: 'Courier New', Courier, monospace;
 }
 
 /* Ensure the price text is right-aligned to match professional dashboards */
diff --git a/src/App.tsx b/src/App.tsx
index 0a5cc0a..fc4e4ef 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -29,10 +29,13 @@ export default function App() {
     className="row"
     style={{ transform: `translateY(${virtualRow.start}px)` }}
   >
-    <span>{data[virtualRow.index].symbol}</span>
-    <span className="price-cell">${data[virtualRow.index].price}</span>
+    <div className="row-inner">
+      <span>{data[virtualRow.index].symbol}</span>
+      <span className="price-cell">${data[virtualRow.index].price}</span>
+    </div>
   </div>
-))}        </div>
+))}
+</div>
       </div>
     </div>
   );