Refactor line number rendering in App.tsx

src/App.tsx

@@ -1693,25 +1693,29 @@ export default function App() {
               >
                 {showLineNumbersActive ? (
                   <div className="line-measure" ref={measureRef} aria-hidden="true">
-                    {lines.map((line, index) => (
+                    <div className="line-measure__line" ref={measureLineRef} />
-                      <div key={index} className="line-measure__line">
-                        {line.length > 0 ? line : " "}
-                      </div>
-                    ))}
                   </div>
                 ) : null}
                 {showLineNumbersActive ? (
                   <div className="line-numbers" ref={lineNumbersRef}>
-                    {lineNumbers.map((line, index) => (
                     <div
-                        key={line}
+                      className="line-numbers__inner"
-                        className="line-numbers__line"
+                      style={{ height: totalLineNumberHeight ? `${totalLineNumberHeight}px` : undefined }}
-                        style={{ height: lineHeights[index] ? `${lineHeights[index]}px` : undefined }}
                     >
-                        {line}
+                      {visibleLineNumbers.map((item) => (
+                        <div
+                          key={item.line}
+                          className="line-numbers__line"
+                          style={{
+                            top: `${item.top}px`,
+                            height: `${item.height || defaultLineHeight}px`
+                          }}
+                        >
+                          {item.line}
                         </div>
                       ))}
                     </div>
+                  </div>
                 ) : null}
                 {markdownPreview ? (
                   <div