UI fixes: modal vertical scroll, hide overlay btn for non-picture CSS
- 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>
This commit is contained in:
@@ -24,6 +24,9 @@
|
|||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
max-width: 500px;
|
max-width: 500px;
|
||||||
width: 90%;
|
width: 90%;
|
||||||
|
max-height: calc(100vh - 40px);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
|
||||||
animation: slideUp 0.3s ease-out;
|
animation: slideUp 0.3s ease-out;
|
||||||
}
|
}
|
||||||
@@ -113,6 +116,10 @@
|
|||||||
|
|
||||||
.modal-body {
|
.modal-body {
|
||||||
padding: 24px;
|
padding: 24px;
|
||||||
|
overflow-y: auto;
|
||||||
|
scrollbar-gutter: stable;
|
||||||
|
flex: 1 1 auto;
|
||||||
|
min-height: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-description {
|
.modal-description {
|
||||||
|
|||||||
@@ -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 class="btn btn-icon btn-secondary" onclick="showTargetEditor('${target.id}')" title="${t('common.edit')}">
|
||||||
✏️
|
✏️
|
||||||
</button>
|
</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 class="btn btn-icon btn-warning" onclick="stopTargetOverlay('${target.id}')" title="${t('overlay.button.hide')}">
|
||||||
👁️
|
👁️
|
||||||
</button>
|
</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 class="btn btn-icon btn-secondary" onclick="startTargetOverlay('${target.id}')" title="${t('overlay.button.show')}">
|
||||||
👁️
|
👁️
|
||||||
</button>
|
</button>
|
||||||
`}
|
`) : ''}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|||||||
Reference in New Issue
Block a user