From 2b94501e202fc8b364fceaf07297cfce95879f50 Mon Sep 17 00:00:00 2001
From: Dariusz L <dl122@wp.pl>
Date: Sun, 10 May 2026 02:33:17 +0200
Subject: [PATCH] Improve download target UI layout in LinkerManagerDialog
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add grid-based layout for download target folder and type selectors
- Apply responsive design with media query for screens ≤720px
- Align labels consistently using flexbox for better visual alignment
---
 web/linker.js | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/web/linker.js b/web/linker.js
index c098017..814a329 100644
--- a/web/linker.js
+++ b/web/linker.js
@@ -2861,11 +2861,25 @@ class LinkerManagerDialog extends ComfyDialog {
                 display: grid;
                 gap: 8px;
             }
+            .ml-download-target-grid {
+                display: grid;
+                grid-template-columns: minmax(120px, 33%) minmax(0, 1fr);
+                gap: 10px;
+                align-items: start;
+            }
             .ml-download-target-row {
                 display: grid;
                 gap: 6px;
             }
+            @media (max-width: 720px) {
+                .ml-download-target-grid {
+                    grid-template-columns: 1fr;
+                }
+            }
             .ml-download-target-label {
+                min-height: 28px;
+                display: flex;
+                align-items: flex-end;
                 font-size: 11px;
                 font-weight: 700;
                 color: var(--ml-text-muted);
@@ -3571,6 +3585,7 @@ class LinkerManagerDialog extends ComfyDialog {
             .join('');
 
         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>`;
@@ -3583,6 +3598,7 @@ class LinkerManagerDialog extends ComfyDialog {
         html += `</div>`;
         html += `</div>`;
         html += `</div>`;
+        html += `</div>`;
         return html;
     }