From acac5197247adb5771f00ddb46b530d139c8d808 Mon Sep 17 00:00:00 2001
From: Dariusz L <dl122@wp.pl>
Date: Thu, 28 May 2026 04:37:04 +0200
Subject: [PATCH] Restructure dialog layout and refine tab styling

- Move tab elements before dialog controls in DOM order
- Update tab styling: smaller min-height, rounded corners, subtle backgrounds
- Add ml-dialog-brand and ml-dialog-controls flex classes
- Adjust active tab border and background opacity
---
 web/css/linker-main.css  | 38 +++++++++++++++++++-------------------
 web/css/linker-shell.css | 21 ++++++++++++---------
 web/linker.js            | 11 +++++------
 3 files changed, 36 insertions(+), 34 deletions(-)

diff --git a/web/css/linker-main.css b/web/css/linker-main.css
index 1362d27..0d8803e 100644
--- a/web/css/linker-main.css
+++ b/web/css/linker-main.css
@@ -2012,27 +2012,27 @@
 /* Tabs */
 .ml-tabs {
     display: flex;
-    align-items: flex-end;
-    gap: 0;
-    padding: 8px 12px 0;
-    margin-bottom: 0;
-    background: rgba(255,255,255,0.012);
+    align-items: center;
+    gap: 3px;
+    min-width: 0;
+    padding: 0;
+    margin: 0;
+    background: transparent;
     position: relative;
     z-index: 2;
-    border-bottom: 1px solid rgba(255,255,255,0.08);
 }
 .ml-tab {
     position: relative;
-    min-height: 36px;
-    padding: 0 15px;
-    background: transparent;
-    border: 1px solid transparent;
-    border-bottom: none;
-    border-radius: 4px 4px 0 0;
+    min-height: 30px;
+    padding: 0 14px;
+    background: rgba(255,255,255,0.018);
+    border: 1px solid rgba(255,255,255,0.065);
+    border-radius: 6px;
     color: var(--ml-text-muted, #888);
     font-size: 12px;
     font-weight: 650;
     cursor: pointer;
+    white-space: nowrap;
     box-shadow: none;
     transform: none;
     opacity: 0.82;
@@ -2041,13 +2041,13 @@
 .ml-tab:hover {
     color: var(--ml-text, #eef2f7);
     background: rgba(255,255,255,0.028);
-    border-color: rgba(255,255,255,0.08);
+    border-color: rgba(255,255,255,0.10);
     opacity: 1;
 }
 .ml-tab.ml-tab-active {
     color: var(--ml-text, #eef2f7);
-    background: rgba(255,255,255,0.026);
-    border-color: rgba(255,255,255,0.12);
+    background: rgba(255,255,255,0.045);
+    border-color: rgba(255,255,255,0.14);
     box-shadow: none;
     transform: none;
     opacity: 1;
@@ -2056,10 +2056,10 @@
 .ml-tab.ml-tab-active::after {
     content: "";
     position: absolute;
-    left: 0;
-    right: 0;
-    bottom: -2px;
-    height: 2px;
+    left: 8px;
+    right: 8px;
+    bottom: 3px;
+    height: 1px;
     background: rgba(255,255,255,0.58);
 }
 #model-linker-modal .ml-tab,
diff --git a/web/css/linker-shell.css b/web/css/linker-shell.css
index 38e88ca..fefdaff 100644
--- a/web/css/linker-shell.css
+++ b/web/css/linker-shell.css
@@ -55,8 +55,9 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    min-height: 34px;
-    padding: 6px 10px;
+    gap: var(--ml-spacing-10);
+    min-height: 40px;
+    padding: 5px 10px;
     border-bottom: 1px solid rgba(255, 255, 255, 0.09);
     background: linear-gradient(180deg, rgba(255,255,255,0.035) 0%, rgba(255,255,255,0.012) 100%);
 }
@@ -69,6 +70,15 @@
     gap: var(--ml-spacing-8);
 }
 
+.ml-dialog-brand {
+    min-width: 0;
+    flex: 1 1 auto;
+}
+
+.ml-dialog-controls {
+    flex: 0 0 auto;
+}
+
 #model-linker-drag-handle {
     display: flex;
     align-items: center;
@@ -83,13 +93,6 @@
     background: rgba(255, 255, 255, 0.025);
 }
 
-.ml-dialog-title {
-    margin: 0;
-    color: var(--input-text);
-    font-size: 15px;
-    font-weight: 600;
-}
-
 .ml-window-btn {
     display: flex;
     align-items: center;
diff --git a/web/linker.js b/web/linker.js
index b6ee095..db9bea0 100644
--- a/web/linker.js
+++ b/web/linker.js
@@ -2048,7 +2048,11 @@ class LinkerManagerDialog extends ComfyDialog {
             $el("div.ml-dialog-topbar", {}, [
                 $el("div.ml-dialog-brand", {}, [
                     dragHandle,
-                    $el("h2.ml-dialog-title", { textContent: "🔗 Model Linker" })
+                    $el("div.ml-tabs", {}, [
+                        this.missingTab,
+                        this.loadedTab,
+                        this.optionsTab
+                    ])
                 ]),
                 $el("div.ml-dialog-controls", {}, [
                     fullscreenButton,
@@ -2058,11 +2062,6 @@ class LinkerManagerDialog extends ComfyDialog {
                         onclick: () => this.close()
                     })
                 ])
-            ]),
-            $el("div.ml-tabs", {}, [
-                this.missingTab,
-                this.loadedTab,
-                this.optionsTab
             ])
         ]);
     }