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)` }} > - {data[virtualRow.index].symbol} - ${data[virtualRow.index].price} +
+ {data[virtualRow.index].symbol} + ${data[virtualRow.index].price} +
-))} +))} + );