From fe5fdff35a0dc9636d13a60359945631dabaf122 Mon Sep 17 00:00:00 2001
From: webadderall <131426131+webadderall@users.noreply.github.com>
Date: Mon, 27 Apr 2026 16:24:35 +1000
Subject: [PATCH] fix(timeline): cap viewport to two rows

---
 src/components/video-editor/VideoEditor.tsx              | 6 ++++--
 src/components/video-editor/timeline/TimelineEditor.tsx  | 2 +-
 .../video-editor/timeline/timelineLayout.test.ts         | 9 +++++++++
 src/components/video-editor/timeline/timelineLayout.ts   | 5 +++++
 4 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/components/video-editor/VideoEditor.tsx b/src/components/video-editor/VideoEditor.tsx
index 580627ac..e95372c2 100644
--- a/src/components/video-editor/VideoEditor.tsx
+++ b/src/components/video-editor/VideoEditor.tsx
@@ -124,6 +124,7 @@ import {
 	RECORDLY_ISSUES_URL,
 } from "./TutorialHelp";
 import TimelineEditor, { type TimelineEditorHandle } from "./timeline/TimelineEditor";
+import { TIMELINE_VIEWPORT_MIN_HEIGHT_PX } from "./timeline/timelineLayout";
 import { normalizeCursorTelemetry } from "./timeline/zoomSuggestionUtils";
 import {
 	type AnnotationRegion,
@@ -5698,8 +5699,9 @@ export default function VideoEditor() {
 				<div
 					className="flex-shrink-0 flex flex-col"
 					style={{
-						height: timelineCollapsed ? undefined : "15%",
-						minHeight: timelineCollapsed ? 0 : 160,
+						height: timelineCollapsed ? undefined : TIMELINE_VIEWPORT_MIN_HEIGHT_PX,
+						minHeight: timelineCollapsed ? 0 : TIMELINE_VIEWPORT_MIN_HEIGHT_PX,
+						maxHeight: timelineCollapsed ? undefined : TIMELINE_VIEWPORT_MIN_HEIGHT_PX,
 					}}
 				>
 					<TimelineEditor
diff --git a/src/components/video-editor/timeline/TimelineEditor.tsx b/src/components/video-editor/timeline/TimelineEditor.tsx
index b2a97a1e..fe92bce9 100644
--- a/src/components/video-editor/timeline/TimelineEditor.tsx
+++ b/src/components/video-editor/timeline/TimelineEditor.tsx
@@ -2059,7 +2059,7 @@ const TimelineEditor = forwardRef<TimelineEditorHandle, TimelineEditorProps>(
 		}
 
 		return (
-			<div className="flex-1 min-h-0 flex flex-col bg-editor-bg overflow-auto">
+			<div className="flex-1 min-h-0 flex flex-col bg-editor-bg overflow-hidden">
 				{hideToolbar ? null : (
 					<div className="flex items-center gap-2 px-4 py-2 border-b border-foreground/10 bg-editor-panel">
 						<div className="flex items-center gap-1">
diff --git a/src/components/video-editor/timeline/timelineLayout.test.ts b/src/components/video-editor/timeline/timelineLayout.test.ts
index 42cdd329..3e880dbd 100644
--- a/src/components/video-editor/timeline/timelineLayout.test.ts
+++ b/src/components/video-editor/timeline/timelineLayout.test.ts
@@ -4,6 +4,8 @@ import {
 	getTimelineRowsMinHeightPx,
 	TIMELINE_AXIS_HEIGHT_PX,
 	TIMELINE_ROW_MIN_HEIGHT_PX,
+	TIMELINE_VIEWPORT_MIN_HEIGHT_PX,
+	TIMELINE_VISIBLE_ROW_COUNT,
 } from "./timelineLayout";
 
 describe("timelineLayout", () => {
@@ -28,4 +30,11 @@ describe("timelineLayout", () => {
 			TIMELINE_AXIS_HEIGHT_PX + 2 * TIMELINE_ROW_MIN_HEIGHT_PX,
 		);
 	});
+
+	it("caps the default timeline viewport to two visible rows", () => {
+		expect(TIMELINE_VISIBLE_ROW_COUNT).toBe(2);
+		expect(TIMELINE_VIEWPORT_MIN_HEIGHT_PX).toBe(
+			TIMELINE_AXIS_HEIGHT_PX + TIMELINE_VISIBLE_ROW_COUNT * TIMELINE_ROW_MIN_HEIGHT_PX,
+		);
+	});
 });
diff --git a/src/components/video-editor/timeline/timelineLayout.ts b/src/components/video-editor/timeline/timelineLayout.ts
index bdf03a17..072b64d3 100644
--- a/src/components/video-editor/timeline/timelineLayout.ts
+++ b/src/components/video-editor/timeline/timelineLayout.ts
@@ -1,5 +1,6 @@
 export const TIMELINE_AXIS_HEIGHT_PX = 32;
 export const TIMELINE_ROW_MIN_HEIGHT_PX = 28;
+export const TIMELINE_VISIBLE_ROW_COUNT = 2;
 
 function normalizeRowCount(rowCount: number) {
 	if (!Number.isFinite(rowCount)) {
@@ -16,3 +17,7 @@ export function getTimelineRowsMinHeightPx(rowCount: number) {
 export function getTimelineContentMinHeightPx(rowCount: number) {
 	return TIMELINE_AXIS_HEIGHT_PX + getTimelineRowsMinHeightPx(rowCount);
 }
+
+export const TIMELINE_VIEWPORT_MIN_HEIGHT_PX = getTimelineContentMinHeightPx(
+	TIMELINE_VISIBLE_ROW_COUNT,
+);