From ba6ee572456a215afd8a5ba920de30d290ecbf45 Mon Sep 17 00:00:00 2001
From: Dariusz L <dl122@wp.pl>
Date: Sun, 10 May 2026 06:22:30 +0200
Subject: [PATCH] fix: improve download target UI layout and styling

- Restructure DOM order: label + select (folder) first, then label + input (subfolder)
- Add grid-template-rows for proper vertical alignment
- Remove min-height constraint on labels for better responsiveness
- Set explicit height (40px) and margin on select/input fields
- Add appearance:none reset to select for consistent cross-browser styling
- Wrap subfolder input in flex container for alignment
- Add mobile-breakpoint rule to reset label min-height
---
 web/linker.js | 28 ++++++++++++++++++++++------
 1 file changed, 22 insertions(+), 6 deletions(-)

diff --git a/web/linker.js b/web/linker.js
index b89c5e1..05fc1e8 100644
--- a/web/linker.js
+++ b/web/linker.js
@@ -3321,6 +3321,7 @@ class LinkerManagerDialog extends ComfyDialog {
             .ml-download-target-grid {
                 display: grid;
                 grid-template-columns: minmax(120px, 33%) minmax(0, 1fr);
+                grid-template-rows: auto auto;
                 gap: 10px;
                 align-items: start;
             }
@@ -3331,10 +3332,10 @@ class LinkerManagerDialog extends ComfyDialog {
             @media (max-width: 720px) {
                 .ml-download-target-grid {
                     grid-template-columns: 1fr;
+                    grid-template-rows: auto;
                 }
             }
             .ml-download-target-label {
-                min-height: 28px;
                 display: flex;
                 align-items: flex-end;
                 font-size: 11px;
@@ -3342,17 +3343,29 @@ class LinkerManagerDialog extends ComfyDialog {
                 color: var(--ml-text-muted);
                 text-transform: uppercase;
                 letter-spacing: 0.06em;
+                line-height: 1.2;
             }
             .ml-download-target-input,
             .ml-download-target-select {
+                display: block;
                 width: 100%;
+                height: 40px;
+                margin: 3px;
                 padding: 8px 10px;
                 background: rgba(255,255,255,0.04);
                 color: var(--ml-text);
                 border: 1px solid var(--ml-border);
                 border-radius: 10px;
                 font-size: 12px;
+                line-height: 1.2;
                 outline: none;
+                box-sizing: border-box;
+                vertical-align: top;
+            }
+            .ml-download-target-select {
+                appearance: none;
+                -webkit-appearance: none;
+                -moz-appearance: none;
             }
             .ml-download-target-input:focus,
             .ml-download-target-select:focus {
@@ -3361,6 +3374,13 @@ class LinkerManagerDialog extends ComfyDialog {
             }
             .ml-download-target-wrap {
                 position: relative;
+                display: flex;
+                align-items: stretch;
+            }
+            @media (max-width: 720px) {
+                .ml-download-target-label {
+                    min-height: 0;
+                }
             }
             .ml-download-target-list {
                 position: absolute;
@@ -4048,19 +4068,15 @@ class LinkerManagerDialog extends ComfyDialog {
 
         let html = `<div class="ml-download-target">`;
         html += `<div class="ml-download-target-grid">`;
-        html += `<div class="ml-download-target-row">`;
         html += `<label class="ml-download-target-label" for="${selectId}">Folder</label>`;
-        html += `<select id="${selectId}" class="ml-download-target-select">${options}</select>`;
-        html += `</div>`;
-        html += `<div class="ml-download-target-row">`;
         html += `<label class="ml-download-target-label" for="${subfolderId}">Subfolder (optional)</label>`;
+        html += `<select id="${selectId}" class="ml-download-target-select">${options}</select>`;
         html += `<div class="ml-download-target-wrap">`;
         html += `<input id="${subfolderId}" class="ml-download-target-input" type="text" placeholder="e.g. ponyxl\\styles" autocomplete="off">`;
         html += `<div id="${subfolderListId}" class="ml-download-target-list"></div>`;
         html += `</div>`;
         html += `</div>`;
         html += `</div>`;
-        html += `</div>`;
         return html;
     }