nodes/olivv-cs-ComfyUI-FunPack
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Viewports: timeline never shorter than its lanes; segmented choices wrap instead of clipping

Browse Source 
At 1280x720 the 302px timeline cut the second lane; its floor is now 340px. In narrow columns (Assets at 720px wide) the last segments (Images, 3x, 4x) were clipped out of reach; they now wrap to a second line.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
digital-garbage
2026-11-06 13:46:03 +02:00
co-authored by Claude Sonnet 5.5
parent 552ee16c2e
commit 6496dcf982
2 changed files with 5 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/ui/composer/elements/choice.css
+3 -1
View File
@@ -74,9 +74,11 @@
.cx-segmented {
display: inline-flex; border: var(--bw) solid var(--line);
border-radius: var(--ctl-r); overflow: hidden; background: var(--elev-2);
/* In a narrow column the last choices wrapped out of sight (clipped by the overflow): wrap them to a second line instead. */
flex-wrap: wrap; max-inline-size: 100%;
}
.cx-segment {
border: 0; background: transparent; color: var(--muted);
border: 0; background: transparent; color: var(--muted); white-space: nowrap;
cursor: pointer; font-family: var(--font-ui);
border-left: var(--bw) solid var(--line);
transition: background var(--dur-1) var(--ease-standard), color var(--dur-1) var(--ease-standard);
app/ui/frame.css
+2 -2
View File
@@ -1,5 +1,5 @@
/* The frame's proportions, as v4 had them: fixed side columns and a fixed-height timeline across the bottom. */
:root { --media-w: clamp(180px, 20vw, 280px); --properties-w: clamp(270px, 28vw, 360px); --timeline-h: clamp(270px, 42vh, 340px); --pad: 10px; --pgap: 10px; }
:root { --media-w: clamp(180px, 20vw, 280px); --properties-w: clamp(270px, 28vw, 360px); --timeline-h: clamp(340px, 42vh, 380px); --pad: 10px; --pgap: 10px; }
.fp-main { flex-direction: column; padding: 0 var(--pad) var(--pad); gap: var(--pgap); }
/* Narrower windows wrap the timeline's header and toolbar onto more rows, so its fixed height gets more room for the lanes. */
@media (max-width: 1250px) { :root { --timeline-h: clamp(360px, 44vh, 400px); } }
@@ -15,7 +15,7 @@
.cx-zone .cx-panel-body > :not(.cx-stack-fill):not(.cx-viewer) { flex-shrink: 0; }
.cx-zone .cx-stack-fill > :not(.cx-viewer):not(.cx-stack-fill) { flex-shrink: 0; }
.cx-zone .cx-stack-fill > .cx-segmented { display: flex; }
.cx-zone .cx-stack-fill > .cx-segmented .cx-segment { flex: 1 1 0; }
.cx-zone .cx-stack-fill > .cx-segmented .cx-segment { flex: 1 1 auto; }
[hidden] { display: none !important; }
/* An empty zone says so in the middle of it, with the controls kept at its foot. */
.cx-zone .cx-stack-fill > .cx-empty { flex: 1 1 auto; justify-content: center; }