fix(layout): make sure annotation popups can be accessible in some edge cases, closes #2704 (#2713)

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

apps/readest-app/src/app/reader/components/annotator/AnnotationPopup.tsx

@@ -51,6 +51,7 @@ const AnnotationPopup: React.FC<AnnotationPopupProps> = ({
       <Popup
         width={isVertical ? popupHeight : popupWidth}
         height={isVertical ? popupWidth : popupHeight}
+        minHeight={isVertical ? popupWidth : popupHeight}
         position={position}
         trianglePosition={trianglePosition}
         className='selection-popup bg-gray-600 text-white'
@@ -59,12 +60,9 @@ const AnnotationPopup: React.FC<AnnotationPopupProps> = ({
       >
         <div
           className={clsx(
-            'selection-buttons flex items-center justify-between p-2',
+            'selection-buttons flex h-full w-full items-center justify-between p-2',
             isVertical ? 'flex-col' : 'flex-row',
           )}
-          style={{
-            height: isVertical ? popupWidth : popupHeight,
-          }}
         >
           {buttons.map((button, index) => (
             <PopupButton

apps/readest-app/src/components/Popup.tsx

@@ -45,9 +45,6 @@ const Popup = ({
     availableHeight = window.innerHeight - trianglePosition.point.y - popupPadding;
   }
   maxHeight = Math.min(maxHeight || availableHeight, availableHeight);
-  if (minHeight) {
-    minHeight = Math.min(minHeight, availableHeight);
-  }
 
   useEffect(() => {
     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 (
     <div>
@@ -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,
         )}