fix(studio): prevent NLE timeline scrollbar from clipping below viewport (#481)

* fix(studio): restore flex layout inside the NLE timeline panel

Without `flex flex-col`, the toolbar and Timeline children render as
block elements and Timeline's `h-full` takes the panel's entire height.
The toolbar still occupies its own ~45px of flow, pushing the scroll
area below the viewport and clipping the scrollbar at the bottom of the
right-side panel.

* fix(studio): pin toolbar height with flex-shrink-0 and trim comment

Wrap the toolbar slot in a flex-shrink-0 div so Timeline back-pressure
can't squeeze the toolbar below its natural height. The visible bug
doesn't manifest at current sizes, but in a flex-col container both
children are flex items and the toolbar has no shrink guard of its own.

Trim the inline comment to a single line — the rationale belongs in
the commit message, not at the call site.
This commit is contained in:
Mu-Tsun Tsai
2026-04-25 05:50:46 +02:00
committed by GitHub
parent bdc7061f98
commit 28b84ad8de
@@ -392,7 +392,8 @@ export const NLELayout = memo(function NLELayout({
<div className="flex flex-col flex-shrink-0" style={{ height: timelineH }}>
{/* Timeline tracks */}
<div
className="flex-1 min-h-0 overflow-hidden bg-neutral-950"
// flex-col: toolbar takes natural height, Timeline fills remainder.
className="flex flex-col flex-1 min-h-0 overflow-hidden bg-neutral-950"
onDoubleClick={(e) => {
if ((e.target as HTMLElement).closest("[data-clip]")) return;
if (compositionStack.length > 1) {
@@ -400,7 +401,7 @@ export const NLELayout = memo(function NLELayout({
}
}}
>
{timelineToolbar}
<div className="flex-shrink-0">{timelineToolbar}</div>
<Timeline
onSeek={seek}
onDrillDown={handleDrillDown}