From 1b13c7150e5d9b4ccdf23d80f87aae036fbc0472 Mon Sep 17 00:00:00 2001
From: dwindown <dwinx.ramz@gmail.com>
Date: Thu, 1 Jan 2026 01:03:03 +0700
Subject: [PATCH] Add scrollable container to timeline chapters list
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Changes
- Added max-height of 400px to chapter list container
- Added overflow-y-auto for vertical scrolling
- Added custom scrollbar styling (thin, with hover effects)
- Added pr-2 padding for scrollbar space

## Benefits
- Prevents timeline from becoming too tall for long videos
- Maintains consistent layout regardless of chapter count
- Better UX for 2-3+ hour videos with many chapters
- Smooth scrolling with styled scrollbar

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 src/components/TimelineChapters.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/TimelineChapters.tsx b/src/components/TimelineChapters.tsx
index b9117b8..a1a5541 100644
--- a/src/components/TimelineChapters.tsx
+++ b/src/components/TimelineChapters.tsx
@@ -56,7 +56,8 @@ export function TimelineChapters({
           <h3 className="font-semibold">Timeline</h3>
         </div>
 
-        <div className="space-y-1">
+        {/* Scrollable chapter list with max-height */}
+        <div className="max-h-[400px] overflow-y-auto space-y-1 pr-2 scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-gray-100 hover:scrollbar-thumb-gray-400">
           {chapters.map((chapter, index) => {
             const active = isChapterActive(index);