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

fix(recipes): make recipe modal viewport-safe (#891)

Browse Source
This commit is contained in:
Will Miao
2026-04-09 19:14:12 +08:00
parent db4726a961
commit 51fe7aa07e
2 changed files with 70 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
static/css/components/recipe-modal.css
View File

@@ -214,11 +214,15 @@
#recipeModal .modal-content {
display: flex;
flex-direction: column;
max-width: 960px;
width: min(960px, calc(100vw - 2rem));
max-height: calc(100vh - var(--header-height, 48px) - 2rem);
max-height: calc(100dvh - var(--header-height, 48px) - 2rem);
}
#recipeModal .modal-body {
display: flex;
flex-direction: column;
display: grid;
grid-template-rows: auto minmax(0, 1fr);
gap: var(--space-2);
flex: 1 1 auto;
min-height: 0;
@@ -232,12 +236,14 @@
gap: var(--space-2);
flex-shrink: 0;
margin-bottom: var(--space-2);
align-items: start;
}
/* Recipe Preview */
.recipe-preview-container {
width: 100%;
height: 360px;
height: clamp(220px, 32vh, 360px);
height: clamp(220px, 32dvh, 360px);
border-radius: var(--border-radius-sm);
overflow: hidden;
background: var(--lora-surface);
@@ -391,7 +397,8 @@
/* Generation Parameters */
.recipe-gen-params {
height: 360px;
height: clamp(220px, 32vh, 360px);
height: clamp(220px, 32dvh, 360px);
display: flex;
flex-direction: column;
}
@@ -665,6 +672,7 @@
gap: 10px;
flex: 1;
min-height: 0;
overflow: hidden;
}
.recipe-checkpoint-container {
@@ -1036,6 +1044,60 @@
}
}
@media (max-height: 960px) {
#recipeModal .modal-content {
max-height: calc(100vh - var(--header-height, 48px) - 1rem);
max-height: calc(100dvh - var(--header-height, 48px) - 1rem);
padding: var(--space-2);
}
.recipe-modal-header {
padding-bottom: 8px;
margin-bottom: 8px;
}
.recipe-modal-header h2 {
max-height: 1.3em;
-webkit-line-clamp: 1;
}
.recipe-top-section {
grid-template-columns: 1fr;
gap: var(--space-1);
}
.recipe-preview-container,
.recipe-gen-params {
height: clamp(180px, 28vh, 300px);
height: clamp(180px, 28dvh, 300px);
}
.recipe-gen-params h3 {
margin-bottom: var(--space-1);
}
.recipe-bottom-section {
padding-top: var(--space-1);
}
.recipe-section-header {
margin-bottom: var(--space-1);
}
}
@media (max-height: 780px) {
.recipe-preview-container,
.recipe-gen-params {
height: clamp(160px, 24vh, 260px);
height: clamp(160px, 24dvh, 260px);
}
.recipe-modal-header {
margin-bottom: 6px;
padding-bottom: 6px;
}
}
.badge-container {
position: relative;
display: flex;