alphard/ComfyUI-Lora-Manager
1
0
Fork 0
mirror of https://github.com/willmiao/ComfyUI-Lora-Manager.git synced 2026-08-07 22:40:14 -03:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): pin import modal action buttons with sticky footer

Browse Source 
Make the import modal a flex column with a scrollable step area so the
Back/Import buttons stay visible on short viewports (1080p / 150% zoom)
instead of being cut off at the bottom of the scroll flow.

Also reset step scroll positions via class since 'locationStep' has a
duplicate id in the download modal template.
This commit is contained in:
Will Miao
2026-08-08 08:49:20 +08:00
parent 56acefbd6c
commit c5088772e8
2 changed files with 36 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
static/css/components/import-modal.css
View File

@@ -1,4 +1,35 @@
/* Import Modal Styles */
/* Sticky footer layout: fixed header, scrollable step content, pinned action buttons.
Ensures Back/Import buttons stay visible on short viewports (e.g. 1080p or 150% zoom). */
#importModal .modal-content {
display: flex;
flex-direction: column;
overflow: hidden; /* The active step scrolls instead of the whole modal */
}
#importModal .modal-header {
flex-shrink: 0;
}
#importModal .import-step {
flex: 1 1 auto;
min-height: 0; /* Allow the step to shrink and scroll within the flex container */
overflow-y: auto;
overflow-x: hidden;
scrollbar-gutter: stable;
}
#importModal .import-step .modal-actions {
position: sticky;
bottom: 0;
z-index: 1;
background: var(--lora-surface);
border-top: 1px solid var(--lora-border);
padding-top: var(--space-2);
padding-bottom: var(--space-1);
}
.import-step {
margin: var(--space-2) 0;
transition: none !important;

10
static/js/managers/import/ImportStepManager.js
View File

@@ -47,11 +47,11 @@ export class ImportStepManager {
targetStep.offsetHeight;
}
// Scroll modal content to top
const modalContent = document.querySelector('#importModal .modal-content');
if (modalContent) {
modalContent.scrollTop = 0;
}
// Reset scroll via class: 'locationStep' has a duplicate ID in downloadModal's
// template, so getElementById may not return the import modal's step.
document.querySelectorAll('.import-step').forEach(step => {
step.scrollTop = 0;
});
}
}
}