From 30ade1d79a06cb137ba330279cd3251a9756f9cd Mon Sep 17 00:00:00 2001
From: Richard Roberson <me@richardr.dev>
Date: Sat, 22 Nov 2025 18:37:38 -0700
Subject: [PATCH] fix(ui): fix chapter list overflow and menu positioning

- Add scroll functionality to the chapter list to prevent content
  overflow.
- Conditionally adjust the positioning of chapter action menus
  to ensure they remain visible within the modal, preventing
  them from being cut off for chapters at the top of the list.
---
 src/components/AudiobookExportModal.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/AudiobookExportModal.tsx b/src/components/AudiobookExportModal.tsx
index d9712bd..e0cb4ed 100644
--- a/src/components/AudiobookExportModal.tsx
+++ b/src/components/AudiobookExportModal.tsx
@@ -538,12 +538,15 @@ export function AudiobookExportModal({
 
                         {chapters.length > 0 && (
                           <>
-                            <div className={`space-y-2 max-h-96 ${isRefreshingChapters ? 'opacity-70 transition-opacity' : ''}`} aria-busy={isRefreshingChapters}>
+                            <div
+                              className={`space-y-2 max-h-96 overflow-scroll pr-1 ${isRefreshingChapters ? 'opacity-70 transition-opacity' : ''}`}
+                              aria-busy={isRefreshingChapters}
+                            >
                               <div className="flex items-center gap-2">
                                 <h4 className="text-sm font-medium text-foreground">Chapters</h4>
                                 {isRefreshingChapters && <ClockIcon className="h-4 w-4 text-muted animate-spin" />}
                               </div>
-                              {displayChapters.map((chapter) => (
+                              {displayChapters.map((chapter, index) => (
                                 <div
                                   key={chapter.index}
                                   className={`flex items-center justify-between px-2 sm:px-3 py-1 sm:py-1.5 rounded-lg bg-offbase ${(regeneratingChapter === chapter.index || chapter.status === 'generating') ? 'prism-outline' : ''}`}
@@ -591,7 +594,7 @@ export function AudiobookExportModal({
                                           leaveFrom="transform opacity-100 scale-100"
                                           leaveTo="transform opacity-0 scale-95"
                                         >
-                                          <MenuItems className="absolute right-0 bottom-full mb-2 w-44 origin-bottom-right rounded-md bg-background shadow-lg ring-1 ring-black/5 focus:outline-none z-10 p-1">
+                                          <MenuItems className={`absolute right-0 w-44 rounded-md bg-background shadow-lg ring-1 ring-black/5 focus:outline-none z-10 p-1 ${index < 2 ? 'top-full mt-2 origin-top-right' : 'bottom-full mb-2 origin-bottom-right'}`}>
                                             {chapter.status === 'completed' && (
                                               <>
                                                 <MenuItem>