From 5571035e23622a1d3fb021ff7633c88367ab2cac Mon Sep 17 00:00:00 2001
From: Dariusz L <dl122@wp.pl>
Date: Sat, 27 Jun 2026 22:21:21 +0200
Subject: [PATCH] Replace resolved badge with check icon in missing model rows

- Switch missing model row layout from grid to flex
- Add circleCheckBig SVG icon to icon_utils
- Replace green 'Resolved' text pill with inline checkmark icon
- Update CSS with resolved icon and model details wrapper styles
---
 web/css/resolver-main.css                     | 46 +++++++++++--------
 web/resolver/views/missing_browser_methods.js | 10 ++--
 web/utils/icon_utils.js                       |  3 +-
 3 files changed, 34 insertions(+), 25 deletions(-)

diff --git a/web/css/resolver-main.css b/web/css/resolver-main.css
index ba1b133..fecdca6 100644
--- a/web/css/resolver-main.css
+++ b/web/css/resolver-main.css
@@ -790,17 +790,39 @@
     justify-self: stretch;
 }
 
-.mr-missing-row-model,
-.mr-missing-row-best,
-.mr-missing-row-match {
+.mr-missing-row-best {
     min-width: 0;
     display: grid;
     gap: 2px;
 }
 
 .mr-missing-row-model {
-    grid-template-columns: minmax(0, 1fr);
+    min-width: 0;
+    display: flex;
     align-items: center;
+    gap: 8px;
+}
+
+.mr-missing-row-resolved-icon {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: #72d38a;
+    width: 20px;
+    height: 20px;
+}
+
+.mr-missing-row-resolved-icon svg {
+    width: 20px;
+    height: 20px;
+}
+
+.mr-missing-row-model-details {
+    min-width: 0;
+    flex: 1 1 auto;
+    display: grid;
+    gap: 2px;
 }
 
 .mr-missing-row-name,
@@ -818,23 +840,7 @@
     font-weight: 700;
 }
 
-.mr-missing-row-resolved-pill {
-    display: inline-flex;
-    align-items: center;
-    justify-self: start;
-    min-height: 17px;
-    padding: 1px 6px;
-    border-radius: 999px;
-    color: #c9f6d0;
-    background: rgba(114, 211, 138, 0.10);
-    border: 1px solid rgba(114, 211, 138, 0.20);
-    font-size: 9px;
-    font-weight: 750;
-    line-height: 1;
-}
-
 .mr-missing-row-node {
-    grid-column: 1;
     color: var(--mr-text-muted);
     font-size: 10px;
 }
diff --git a/web/resolver/views/missing_browser_methods.js b/web/resolver/views/missing_browser_methods.js
index b077718..bfeed1d 100644
--- a/web/resolver/views/missing_browser_methods.js
+++ b/web/resolver/views/missing_browser_methods.js
@@ -562,10 +562,12 @@ export const missingBrowserMethods = {
                         <input type="checkbox" class="mr-missing-row-check" data-ml-no-drag="1" aria-label="Select ${this.escapeHtml(filename)}" ${isBatchSelected ? 'checked' : ''}>
                     </span>
                     <span class="mr-missing-row-index">${index + 1}</span>
-                    <span class="mr-missing-row-model">
-                        <span class="mr-missing-row-name" data-tooltip="${this.escapeHtml(filename)}">${this.escapeHtml(filename)}</span>
-                        ${isResolved ? '<span class="mr-missing-row-resolved-pill">Resolved</span>' : ''}
-                        ${rowNodeHtml}
+                    <span class="mr-missing-row-model ${isResolved ? 'is-resolved' : ''}">
+                        ${isResolved ? `<span class="mr-missing-row-resolved-icon" data-tooltip="Model resolved">${getSvgIcon('circleCheckBig')}</span>` : ''}
+                        <span class="mr-missing-row-model-details">
+                            <span class="mr-missing-row-name" data-tooltip="${this.escapeHtml(filename)}">${this.escapeHtml(filename)}</span>
+                            ${rowNodeHtml}
+                        </span>
                     </span>
                     <span class="mr-missing-row-type ${typeColorClass}">${this.escapeHtml(typeLabel)}</span>
                     <span class="mr-missing-row-best" data-tooltip="${this.escapeHtml(matchDisplay)}">
diff --git a/web/utils/icon_utils.js b/web/utils/icon_utils.js
index 8990bc5..93cbf0d 100644
--- a/web/utils/icon_utils.js
+++ b/web/utils/icon_utils.js
@@ -1,7 +1,8 @@
-// icon_utils - Utility for loading SVG icons
+// icon_utils - Utility for loading SVG icons
 import { app } from "../../../scripts/app.js";
 
 const SVG_ICONS = {
+    circleCheckBig: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="{color}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21.801 10A10 10 0 1 1 17 3.335"></path><path d="m9 11 3 3L22 4"></path></svg>`,
     file: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="{color}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"></path><path d="M14 2v5a1 1 0 0 0 1 1h5"></path></svg>`,
     fileText: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="{color}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"></path><path d="M14 2v5a1 1 0 0 0 1 1h5"></path><path d="M10 9H8"></path><path d="M16 13H8"></path><path d="M16 17H8"></path></svg>`,
     hash: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="{color}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="4" x2="20" y1="9" y2="9"></line><line x1="4" x2="20" y1="15" y2="15"></line><line x1="10" x2="8" y1="3" y2="21"></line><line x1="16" x2="14" y1="3" y2="21"></line></svg>`,