From aa2d08d99528cbbffccda753876170abbb59141b Mon Sep 17 00:00:00 2001
From: Dariusz L <dl122@wp.pl>
Date: Mon, 27 Jul 2026 18:53:39 +0200
Subject: [PATCH] Fix Missing Models row virtualization and add regression test

---
 tests/test_downloads_tab_workflow_route.mjs | 19 +++++++++++++++++++
 web/css/resolver-main.css                   | 20 +++++++++++---------
 2 files changed, 30 insertions(+), 9 deletions(-)

diff --git a/tests/test_downloads_tab_workflow_route.mjs b/tests/test_downloads_tab_workflow_route.mjs
index 3bbefed..634a357 100644
--- a/tests/test_downloads_tab_workflow_route.mjs
+++ b/tests/test_downloads_tab_workflow_route.mjs
@@ -71,6 +71,25 @@ const renderFormatMethodsSource = fs.readFileSync(
   path.join(projectRoot, 'web/resolver/utils/render_format_methods.js'),
   'utf8'
 );
+const resolverMainCssSource = fs.readFileSync(
+  path.join(projectRoot, 'web/css/resolver-main.css'),
+  'utf8'
+);
+
+test('Missing Models rows use fixed-size virtualization for smooth stable scrolling', () => {
+  const rowRules = Array.from(
+    resolverMainCssSource.matchAll(/#model-resolver-modal \.mr-missing-list-row\s*\{([^}]+)\}/g)
+  );
+  const rowRule = rowRules.find(match => /width\s*:\s*100%/.test(match[1]));
+
+  assert.ok(rowRule, 'Expected the Missing Models row style');
+  assert.match(rowRule[1], /content-visibility\s*:\s*auto/);
+  assert.match(rowRule[1], /contain-intrinsic-size\s*:\s*70px/);
+  assert.match(rowRule[1], /height\s*:\s*70px/);
+  assert.match(rowRule[1], /min-height\s*:\s*70px/);
+  assert.match(rowRule[1], /box-sizing\s*:\s*border-box/);
+  assert.match(rowRule[1], /contain\s*:\s*layout paint style/);
+});
 
 test('local and loaded model tooltips include preview image routes above full names', () => {
   const getModelPreviewTooltipAttrs = eval(`(${extractMethod(renderFormatMethodsSource, 'getModelPreviewTooltipAttrs')})`);
diff --git a/web/css/resolver-main.css b/web/css/resolver-main.css
index 4c2a6c1..b44a25c 100644
--- a/web/css/resolver-main.css
+++ b/web/css/resolver-main.css
@@ -723,19 +723,23 @@
 .mr-missing-list {
     min-height: 0;
     overflow-y: auto;
+    scrollbar-gutter: stable;
     scrollbar-width: auto;
     background: var(--mr-missing-bg);
 }
 
 #model-resolver-modal .mr-missing-list-row {
     content-visibility: auto;
-    contain-intrinsic-size: auto 64px;
+    contain-intrinsic-size: 70px;
     width: 100%;
-    min-height: 64px;
+    height: 70px;
+    min-height: 70px;
     padding: 9px 12px 9px 8px;
+    overflow: hidden;
     border: 0;
     border-bottom: 1px solid rgba(255, 255, 255, 0.052);
     border-radius: 0;
+    box-sizing: border-box;
     background: transparent;
     color: var(--mr-text);
     cursor: pointer;
@@ -746,13 +750,6 @@
     transition: background 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
 }
 
-@supports (content-visibility: auto) {
-    #model-resolver-modal .mr-missing-list-row {
-        content-visibility: auto;
-        contain-intrinsic-size: auto 64px;
-    }
-}
-
 #model-resolver-modal .mr-missing-list-row:hover {
     background: rgba(255, 255, 255, 0.032);
 }
@@ -1175,6 +1172,11 @@
 
     #model-resolver-modal .mr-missing-list-row {
         grid-template-columns: 24px 18px minmax(0, 1fr);
+        content-visibility: visible;
+        contain-intrinsic-size: none;
+        height: auto;
+        min-height: 64px;
+        overflow: visible;
         gap: 7px;
     }