From 6895aa83a34ef93affebdca0ea972b585d875478 Mon Sep 17 00:00:00 2001
From: Dariusz L <dl122@wp.pl>
Date: Mon, 5 Oct 2026 18:17:34 +0200
Subject: [PATCH] Refine image metadata selection styling and action layout

---
 web/css/resolver-main.css                     | 42 +++++++++++++++++++
 .../views/tabs_image_metadata_methods.js      | 11 ++---
 2 files changed, 48 insertions(+), 5 deletions(-)

diff --git a/web/css/resolver-main.css b/web/css/resolver-main.css
index 5d2b119..dc62051 100644
--- a/web/css/resolver-main.css
+++ b/web/css/resolver-main.css
@@ -4871,6 +4871,10 @@ button.mr-info-link:disabled {
     gap: var(--mr-spacing-8);
 }
 
+#model-resolver-modal .mr-image-inspector-actions .mr-image-inspector-clear {
+    margin-left: auto;
+}
+
 .mr-image-inspector-textarea {
     width: 100%;
     min-height: 76px;
@@ -5023,6 +5027,14 @@ button.mr-info-link:disabled {
     content: "";
 }
 
+.mr-image-prompt-row.is-negative.is-selected {
+    background: linear-gradient(90deg, rgba(240, 180, 100, 0.12), rgba(240, 180, 100, 0.035) 55%, transparent);
+}
+
+.mr-image-prompt-row.is-negative.is-selected::before {
+    background: rgb(240, 180, 100);
+}
+
 .mr-image-prompt-row-header {
     display: flex;
     align-items: center;
@@ -5052,6 +5064,14 @@ button.mr-info-link:disabled {
     outline-offset: 2px;
 }
 
+.mr-image-prompt-row.is-negative .mr-image-prompt-role-option input {
+    accent-color: rgb(240, 180, 100);
+}
+
+.mr-image-prompt-row.is-negative .mr-image-prompt-role-option input:focus-visible {
+    outline-color: rgb(240, 180, 100);
+}
+
 .mr-image-prompt-role-option input:disabled {
     cursor: not-allowed;
     opacity: 0.55;
@@ -5234,6 +5254,7 @@ button.mr-info-link:disabled {
 }
 
 .mr-image-transfer-mode-option {
+    align-items: center;
     padding: var(--mr-spacing-10);
     border: 1px solid var(--mr-border);
     border-radius: var(--mr-radius-lg);
@@ -5281,6 +5302,22 @@ button.mr-info-link:disabled {
     font-weight: 650;
 }
 
+.mr-image-transfer-selection-tools {
+    display: flex;
+    align-items: center;
+    gap: var(--mr-spacing-8);
+    margin-left: auto;
+}
+
+#model-resolver-modal .mr-image-transfer-activity .mr-image-transfer-clear-selection {
+    margin: 0;
+    padding: 2px 8px;
+    height: 24px;
+    min-height: 24px;
+    font-size: var(--mr-font-xs);
+    line-height: 1;
+}
+
 .mr-image-transfer-activity-option {
     display: inline-flex;
     align-items: center;
@@ -5356,6 +5393,11 @@ button.mr-info-link:disabled {
     accent-color: var(--mr-accent);
 }
 
+.mr-image-transfer-mode-option input {
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
 .mr-image-transfer-node-list {
     padding: 0;
     max-height: 520px;
diff --git a/web/resolver/views/tabs_image_metadata_methods.js b/web/resolver/views/tabs_image_metadata_methods.js
index 3b5717a..68a84fe 100644
--- a/web/resolver/views/tabs_image_metadata_methods.js
+++ b/web/resolver/views/tabs_image_metadata_methods.js
@@ -206,9 +206,6 @@ export const imageMetadataMethods = {
                         <div class="mr-loaded-title-block">
                             <h3 class="mr-loaded-models-title">Image Metadata ${this.getMetadataTooltipBadge('Paste JSON or drop a supported file anywhere in this panel.', 'Image metadata help')}</h3>
                         </div>
-                        <div class="mr-image-inspector-header-actions">
-                            <button type="button" class="mr-btn mr-btn-secondary mr-btn-sm" data-image-inspector-action="clear">Clear</button>
-                        </div>
                     </div>
                     <div class="mr-image-inspector-tools">
                         <input type="file" accept="image/png,image/jpeg,image/webp,application/json,.json" hidden data-image-inspector-input="file">
@@ -217,6 +214,7 @@ export const imageMetadataMethods = {
                             <div class="mr-image-inspector-actions">
                                 <button type="button" class="mr-btn mr-btn-secondary mr-btn-sm" data-image-inspector-action="analyze-paste" disabled>Analyze JSON</button>
                                 <button type="button" class="mr-btn mr-btn-primary mr-btn-sm" data-image-inspector-action="choose-file">Load file</button>
+                                <button type="button" class="mr-btn mr-btn-secondary mr-btn-sm mr-image-inspector-clear" data-image-inspector-action="clear" data-tooltip="Clear imported metadata and refresh model information for the current workflow. Pasted JSON and the current workflow remain unchanged.">Clear</button>
                             </div>
                         </div>
                     </div>
@@ -1899,11 +1897,10 @@ export const imageMetadataMethods = {
             <section class="mr-image-transfer">
                 <div class="mr-image-transfer-header">
                     <div>
-                        <h3 class="mr-loaded-models-title">Transfer models to current workflow <span class="mr-loaded-total">${selectedTargetCount}/${allTargetNodeKeys.size}</span>${this.getMetadataTooltipBadge(transferHelpText, 'Model transfer help')}</h3>
+                        <h3 class="mr-loaded-models-title">Transfer models to current workflow ${this.getMetadataTooltipBadge(transferHelpText, 'Model transfer help')}</h3>
                     </div>
                     <div class="mr-image-inspector-header-actions">
                         ${undoButton}
-                        <button type="button" class="mr-btn mr-btn-secondary mr-btn-sm" data-image-inspector-action="clear-transfer-targets">Clear selection</button>
                     </div>
                 </div>
                 <div class="mr-image-transfer-mode" role="group" aria-label="Transfer mode">
@@ -1928,6 +1925,10 @@ export const imageMetadataMethods = {
                             <span>${label}</span>
                         </label>
                     `).join('')}
+                    <div class="mr-image-transfer-selection-tools">
+                        <span class="mr-loaded-total">${selectedTargetCount}/${allTargetNodeKeys.size}</span>
+                        <button type="button" class="mr-btn mr-btn-secondary mr-btn-sm mr-image-transfer-clear-selection" data-image-inspector-action="clear-transfer-targets">Clear selection</button>
+                    </div>
                 </div>
                 <div class="mr-image-transfer-category-list">${targetRows}</div>
                 <div class="mr-image-transfer-actions">