diff --git a/apps/readest-app/src/app/reader/components/Reader.tsx b/apps/readest-app/src/app/reader/components/Reader.tsx index 22b1ccdd..dcd31dcc 100644 --- a/apps/readest-app/src/app/reader/components/Reader.tsx +++ b/apps/readest-app/src/app/reader/components/Reader.tsx @@ -33,8 +33,8 @@ Z-Index Layering Guide: --------------------------------- 99 – Window Border (Linux only) • Ensures the border stays on top of all UI elements. -50 – Loading Progress / Toast Notifications / Dialogs - • Includes Settings, About, Updater, and KOSync dialogs. +50 – Loading Progress / Toast Notifications / Dialogs / Popups + • Includes Settings, About, Updater, KOSync dialogs and Annotation popups. 45 – Sidebar / Notebook (Unpinned) • Floats above the content but below global dialogs. 40 – TTS Bar diff --git a/apps/readest-app/src/app/reader/components/annotator/AnnotationPopup.tsx b/apps/readest-app/src/app/reader/components/annotator/AnnotationPopup.tsx index bceb2005..a19aea3b 100644 --- a/apps/readest-app/src/app/reader/components/annotator/AnnotationPopup.tsx +++ b/apps/readest-app/src/app/reader/components/annotator/AnnotationPopup.tsx @@ -51,6 +51,7 @@ const AnnotationPopup: React.FC = ({ = ({ >
{buttons.map((button, index) => ( { if (!containerRef.current) return; @@ -79,11 +76,11 @@ const Popup = ({ ...position, point: { ...position.point, - y: trianglePosition.point.y - containerHeight, + y: Math.max(popupPadding, trianglePosition.point.y - containerHeight), }, }; setAdjustedPosition(newPosition); - }, [position, trianglePosition, childrenHeight]); + }, [position, trianglePosition, popupPadding, childrenHeight]); return (
@@ -91,7 +88,7 @@ const Popup = ({ id='popup-container' ref={containerRef} className={clsx( - 'bg-base-300 absolute rounded-lg font-sans', + 'bg-base-300 absolute z-50 rounded-lg font-sans', trianglePosition?.dir !== 'up' && 'shadow-xl', className, )}