danvics/openreader
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(ui): fix chapter list overflow and menu positioning
Some checks failed
Build and Publish Docker Image / build (push) Has been cancelled
Details

Browse source 
- 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.
This commit is contained in:
Richard Roberson 2025-11-22 18:37:38 -07:00
parent d2189541e8
commit 30ade1d79a
1 changed files with 6 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/components/AudiobookExportModal.tsx
View file

@ -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>