From 45c3aa19f1dc98a1b14b294d6a4a58b114ccb883 Mon Sep 17 00:00:00 2001
From: Dariusz L <dl122@wp.pl>
Date: Sat, 1 Aug 2026 14:56:13 +0200
Subject: [PATCH] Replace hardcoded CSS sizes with custom properties for
 resolver UI

---
 web/css/css-variables.css  |  3 +++
 web/css/resolver-main.css  | 18 +++++++++---------
 web/css/resolver-shell.css |  8 ++++----
 3 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/web/css/css-variables.css b/web/css/css-variables.css
index abafe32..1efd0b6 100644
--- a/web/css/css-variables.css
+++ b/web/css/css-variables.css
@@ -237,6 +237,9 @@
     --mr-button-height-md: 30px;
     --mr-scrollbar-thumb: rgba(255, 255, 255, 0.18);
     --mr-scrollbar-thumb-hover: rgba(255, 255, 255, 0.34);
+    --mr-missing-row-height: 70px;
+    --mr-queue-drawer-width: 320px;
+    --mr-splitter-width: 10px;
 }
 
 
diff --git a/web/css/resolver-main.css b/web/css/resolver-main.css
index d4157b0..512f391 100644
--- a/web/css/resolver-main.css
+++ b/web/css/resolver-main.css
@@ -767,10 +767,10 @@
 
 #model-resolver-modal .mr-missing-list-row {
     content-visibility: auto;
-    contain-intrinsic-size: 70px;
+    contain-intrinsic-size: var(--mr-missing-row-height);
     width: 100%;
-    height: 70px;
-    min-height: 70px;
+    height: var(--mr-missing-row-height);
+    min-height: var(--mr-missing-row-height);
     padding: 9px var(--mr-spacing-12) 9px var(--mr-spacing-8);
     overflow: hidden;
     border: 0;
@@ -3395,7 +3395,7 @@
 }
 
 .mr-footer-star-icon svg {
-    width: 10px;
+    width: var(--mr-splitter-width);
     height: 10px;
     display: block;
     flex: 0 0 auto;
@@ -5526,7 +5526,7 @@ a.mr-image-preview-resource-name:hover {
 .mr-model-details-gallery {
     position: relative;
     min-height: 320px;
-    height: min(520px, calc(100vh - 270px));
+    height: min(520px, calc(100vh - 2var(--mr-missing-row-height)));
     margin-top: 0;
     overflow: hidden;
 }
@@ -6791,7 +6791,7 @@ a.mr-image-preview-resource-name:hover {
     position: relative;
     justify-content: flex-start;
     min-width: 0;
-    min-height: 70px;
+    min-height: var(--mr-missing-row-height);
     padding: var(--mr-spacing-6);
     border-top: 0 !important;
     background: rgba(18, 18, 18, 0.96);
@@ -9222,9 +9222,9 @@ a.mr-image-preview-resource-name:hover {
     margin: 0 0 var(--mr-spacing-12);
     padding: 0;
     width: 100%;
-    height: 70px;
-    min-height: 70px;
-    max-height: 70px;
+    height: var(--mr-missing-row-height);
+    min-height: var(--mr-missing-row-height);
+    max-height: var(--mr-missing-row-height);
     box-sizing: border-box;
     overflow: hidden;
     border: 0;
diff --git a/web/css/resolver-shell.css b/web/css/resolver-shell.css
index 254521f..acb2829 100644
--- a/web/css/resolver-shell.css
+++ b/web/css/resolver-shell.css
@@ -284,10 +284,10 @@
 }
 
 #model-resolver-queue {
-    width: 320px;
+    width: var(--mr-queue-drawer-width);
     min-width: 240px;
     max-width: 70%;
-    flex: 0 0 320px;
+    flex: 0 0 var(--mr-queue-drawer-width);
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
@@ -299,8 +299,8 @@
 
 #model-resolver-splitter {
     position: relative;
-    width: 10px;
-    min-width: 10px;
+    width: var(--mr-splitter-width);
+    min-width: var(--mr-splitter-width);
     opacity: 1;
     cursor: col-resize;
     background: var(--mr-bg, #121212);