nodes/Azornes-Comfyui-Model-Resolver
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Make missing-model list header sticky during scroll

Browse Source 
Move the .mr-missing-list-head element inside the scrollable .mr-missing-list
container and apply position: sticky so the column headers remain visible when
the list overflows. Adjust grid layout and row alignment rules to support the
new structure.
This commit is contained in:
Dariusz L
2026-06-27 20:52:45 +02:00
parent b73cdb0f40
commit 4ac05c0228
2 changed files with 29 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/css/resolver-main.css
+18 -5
View File
@@ -1,4 +1,4 @@
#model-resolver-modal,
#model-resolver-modal,
#model-resolver-modal button,
#model-resolver-modal input,
#model-resolver-modal select {
@@ -483,7 +483,7 @@
.mr-missing-list-pane {
flex: 1 1 auto;
display: grid;
grid-template-rows: auto auto minmax(0, 1fr);
grid-template-rows: auto minmax(0, 1fr);
border-right: 0;
background: var(--mr-missing-bg);
}
@@ -665,9 +665,13 @@
}
.mr-missing-list-head {
position: sticky;
top: 0;
z-index: 10;
padding: 10px 12px 10px 8px;
border-bottom: 1px solid var(--mr-missing-line);
background: var(--mr-missing-surface);
background-color: var(--mr-missing-bg, #111111);
background-image: linear-gradient(var(--mr-missing-surface, rgba(255, 255, 255, 0.03)), var(--mr-missing-surface, rgba(255, 255, 255, 0.03)));
color: var(--mr-text-muted);
font-size: 11px;
font-weight: 700;
@@ -681,6 +685,12 @@
text-align: center;
}
.mr-missing-list-head>span:nth-child(3),
.mr-missing-list-head>span:nth-child(5) {
justify-content: flex-start;
text-align: left;
}
.mr-missing-list {
min-height: 0;
overflow-y: auto;
@@ -837,7 +847,7 @@
}
.mr-missing-row-type {
justify-self: start;
justify-self: center;
max-width: 100%;
min-width: 0;
padding: 2px 7px;
@@ -855,7 +865,10 @@
.mr-missing-row-match {
justify-self: center;
display: inline-flex;
display: flex;
justify-content: center;
text-align: center;
width: 100%;
align-items: center;
color: var(--mr-text-muted);
}
web/resolver/views/missing_browser_methods.js
+11 -11
View File
@@ -524,18 +524,18 @@ export const missingBrowserMethods = {
</button>
</div>
</div>
<div class="mr-missing-list-head">
<span class="mr-missing-head-select">
<input type="checkbox" class="mr-missing-select-all-check" aria-label="Select or deselect all missing models">
</span>
<span>#</span>
<span>Missing Model</span>
<span>Type</span>
<span>Best Local Match</span>
<span>Match</span>
<span>Sources</span>
</div>
<div class="mr-missing-list">
<div class="mr-missing-list-head">
<span class="mr-missing-head-select">
<input type="checkbox" class="mr-missing-select-all-check" aria-label="Select or deselect all missing models">
</span>
<span>#</span>
<span>Missing Model</span>
<span>Type</span>
<span>Best Local Match</span>
<span>Match</span>
<span>Sources</span>
</div>
`;
missingModels.forEach((missing, index) => {