Add scrollable container to timeline chapters list
## 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>
This commit is contained in:
@@ -56,7 +56,8 @@ export function TimelineChapters({
|
|||||||
<h3 className="font-semibold">Timeline</h3>
|
<h3 className="font-semibold">Timeline</h3>
|
||||||
</div>
|
</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) => {
|
{chapters.map((chapter, index) => {
|
||||||
const active = isChapterActive(index);
|
const active = isChapterActive(index);
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user