fix: improve annotation placements on zoom (#69)

Author: cristianrdu

packages/docs/app/(home)/_components/anara.tsx

@@ -125,6 +125,7 @@ const PDFContent = ({
         <TextLayer />
         <AnnotationHighlightLayer 
           focusedAnnotationId={focusedAnnotationId}
+          tooltipClassName="bg-white shadow-lg rounded-lg p-3 min-w-[200px]"
           onAnnotationClick={onAnnotationClick}
           renderTooltipContent={renderTooltipContent}
         />

packages/lector/src/components/annotation-tooltip.tsx

@@ -1,24 +1,28 @@
-
 import { useCallback} from "react";
+import { createPortal } from "react-dom";
 
 import type { Annotation } from "../hooks/useAnnotations";
 import { useAnnotationTooltip } from "../hooks/useAnnotationTooltip";
+import { usePdf } from "../internal";
 
 interface AnnotationTooltipProps {
   annotation: Annotation;
   children: React.ReactNode;
   tooltipContent: React.ReactNode;
   onOpenChange?: (open: boolean) => void;
   isOpen?: boolean;
+  className?: string;
 }
 
 export const AnnotationTooltip = ({
   annotation,
   children,
   tooltipContent,
   onOpenChange,
+  className,
   isOpen: controlledIsOpen,
 }: AnnotationTooltipProps) => {
+  const viewportRef = usePdf((state) => state.viewportRef);
   const {
     isOpen: uncontrolledIsOpen,
     setIsOpen,
@@ -48,19 +52,20 @@ export const AnnotationTooltip = ({
       >
         {children}
       </div>
-      {isOpen && (
+      {isOpen && viewportRef.current && createPortal(
         <div
           ref={refs.setFloating}
-          className="bg-white shadow-lg rounded-lg p-3 z-50 min-w-[200px]"
+          className={className}
           style={{
             ...floatingStyles,
-            position: 'fixed',
-            zIndex: 9999,
+            position: 'absolute',
+            pointerEvents: 'auto',
           }}
           {...getFloatingProps()}
         >
           {tooltipContent}
-        </div>
+        </div>,
+        viewportRef.current
       )}
     </>
   );

packages/lector/src/components/layers/annotation-highlight-layer.tsx

@@ -12,12 +12,14 @@ interface AnnotationHighlightLayerProps {
   }) => React.ReactNode;
   focusedAnnotationId?: string;
   onAnnotationClick?: (annotation: Annotation) => void;
+  tooltipClassName?: string;
 }
 
 export const AnnotationHighlightLayer = ({
   className,
   style,
   renderTooltipContent,
+  tooltipClassName,
   focusedAnnotationId,
   onAnnotationClick,
 }: AnnotationHighlightLayerProps) => {
@@ -34,6 +36,7 @@ export const AnnotationHighlightLayer = ({
         <AnnotationTooltip
           key={annotation.id}
           annotation={annotation}
+          className={tooltipClassName}
           isOpen={focusedAnnotationId === annotation.id}
           onOpenChange={(open) => {
             if (open && onAnnotationClick) {