From 28b84ad8de20d21cdc1a8ff305e590164d637691 Mon Sep 17 00:00:00 2001
From: Mu-Tsun Tsai <don.m.t.tsai@gmail.com>
Date: Sat, 25 Apr 2026 11:50:46 +0800
Subject: [PATCH] fix(studio): prevent NLE timeline scrollbar from clipping
 below viewport (#481)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 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.
---
 packages/studio/src/components/nle/NLELayout.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/studio/src/components/nle/NLELayout.tsx b/packages/studio/src/components/nle/NLELayout.tsx
index 2f29ff2cd..ffbde95cd 100644
--- a/packages/studio/src/components/nle/NLELayout.tsx
+++ b/packages/studio/src/components/nle/NLELayout.tsx
@@ -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}