From 8cf7678e2b9ea382404320252bfc24da16b95084 Mon Sep 17 00:00:00 2001
From: "alexei.dolgolyov" <dolgolyov.alexei@gmail.com>
Date: Fri, 20 Feb 2026 22:22:58 +0300
Subject: [PATCH] UI fixes: modal vertical scroll, hide overlay btn for
 non-picture CSS
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Modal content now constrained to viewport height with scrollable body,
  preventing dialogs from overflowing on small screens
- Overlay (👁️) button hidden for targets using static/gradient/color_cycle
  sources — calibration overlay only applies to picture-type sources

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 server/src/wled_controller/static/css/modal.css          | 7 +++++++
 server/src/wled_controller/static/js/features/targets.js | 4 ++--
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/server/src/wled_controller/static/css/modal.css b/server/src/wled_controller/static/css/modal.css
index 096878d..0b238ce 100644
--- a/server/src/wled_controller/static/css/modal.css
+++ b/server/src/wled_controller/static/css/modal.css
@@ -24,6 +24,9 @@
     border-radius: 12px;
     max-width: 500px;
     width: 90%;
+    max-height: calc(100vh - 40px);
+    display: flex;
+    flex-direction: column;
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
     animation: slideUp 0.3s ease-out;
 }
@@ -113,6 +116,10 @@
 
 .modal-body {
     padding: 24px;
+    overflow-y: auto;
+    scrollbar-gutter: stable;
+    flex: 1 1 auto;
+    min-height: 0;
 }
 
 .modal-description {
diff --git a/server/src/wled_controller/static/js/features/targets.js b/server/src/wled_controller/static/js/features/targets.js
index 7f59ad2..d8fe479 100644
--- a/server/src/wled_controller/static/js/features/targets.js
+++ b/server/src/wled_controller/static/js/features/targets.js
@@ -514,7 +514,7 @@ export function createTargetCard(target, deviceMap, colorStripSourceMap) {
                 <button class="btn btn-icon btn-secondary" onclick="showTargetEditor('${target.id}')" title="${t('common.edit')}">
                     ✏️
                 </button>
-                ${state.overlay_active ? `
+                ${(!css || css.source_type === 'picture') ? (state.overlay_active ? `
                     <button class="btn btn-icon btn-warning" onclick="stopTargetOverlay('${target.id}')" title="${t('overlay.button.hide')}">
                         👁️
                     </button>
@@ -522,7 +522,7 @@ export function createTargetCard(target, deviceMap, colorStripSourceMap) {
                     <button class="btn btn-icon btn-secondary" onclick="startTargetOverlay('${target.id}')" title="${t('overlay.button.show')}">
                         👁️
                     </button>
-                `}
+                `) : ''}
             </div>
         </div>
     `;