Optimize offscreen character table rendering

CHANGELOG.md

@@ -5,6 +5,11 @@ Follows [Keep a Changelog](https://keepachangelog.com/en/1.0.0/) · versioned wi
 
 ---
 
+## [1.20.42] — 2026-08-19
+
+### Changed
+- **Large character tables now use browser content virtualization.** Off-screen rows can be skipped during layout and painting while the full DOM and existing interactions remain available.
+
 ## [1.20.41] — 2026-08-19
 
 ### Changed

VERSION

@@ -1 +1 @@
-1.20.41
+1.20.42

static/index.html

@@ -10,7 +10,7 @@
   <meta name="format-detection" content="telephone=no">
   <meta name="color-scheme" content="light dark">
   <meta name="theme-color" content="#2563EB">
-  <meta name="app-version" content="1.20.41">
+  <meta name="app-version" content="1.20.42">
   <link rel="manifest" href="/manifest.webmanifest">
   <link rel="icon" href="/static/icon.svg" type="image/svg+xml">
   <link rel="apple-touch-icon" href="/static/icon.svg">
@@ -27,7 +27,7 @@
 
   <!-- ── Core styles (local — no CDN dependency for first paint) ────────── -->
   <link rel="stylesheet" href="/static/vendor/mdi/materialdesignicons.min.css">
-  <link rel="stylesheet" href="/static/style.css?v=1.20.41">
+  <link rel="stylesheet" href="/static/style.css?v=1.20.42">
 
 
   <!-- ── Flag icons — non-blocking (loaded async, icons appear after JS) ── -->
@@ -378,7 +378,7 @@ window.toggleNavTree = function(treeId, chevronId) {
 </script>
 
 <!-- loader.js: fetches sections → loads JS modules → removes skeleton -->
-<script src="/static/loader.js?v=1.20.41"></script>
+<script src="/static/loader.js?v=1.20.42"></script>
 
 </body>
 </html>

static/style.css

@@ -669,6 +669,10 @@ audio { width: 100%; }
 tr.lib-char-card.lib-chars-tbl-row {
   display: table-row; cursor: pointer;
   background: none; border: 0; border-radius: 0; box-shadow: none; transition: none;
+  /* Let Chromium skip layout/paint for distant rows while retaining the full
+     DOM, so sorting, bulk selection, and row event wiring remain unchanged. */
+  content-visibility: auto;
+  contain-intrinsic-size: auto 86px;
 }
 tr.lib-char-card.lib-chars-tbl-row:hover { transform: none; box-shadow: none; background: var(--panel); }
 .lib-chars-tbl-row:hover { background:var(--panel); }