From 6496dcf9820fb00ec6f10d5fe6930766bbfc3259 Mon Sep 17 00:00:00 2001 From: digital-garbage <133010426+digital-garbage@users.noreply.github.com> Date: Fri, 6 Nov 2026 13:46:03 +0200 Subject: [PATCH] Viewports: timeline never shorter than its lanes; segmented choices wrap instead of clipping 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 --- app/ui/composer/elements/choice.css | 4 +++- app/ui/frame.css | 4 ++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/app/ui/composer/elements/choice.css b/app/ui/composer/elements/choice.css index 2c824688..ff1d6670 100644 --- a/app/ui/composer/elements/choice.css +++ b/app/ui/composer/elements/choice.css @@ -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); diff --git a/app/ui/frame.css b/app/ui/frame.css index cbc7fd9f..ba90a397 100644 --- a/app/ui/frame.css +++ b/app/ui/frame.css @@ -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; }