fix(layout): dismiss annotation popup on mobile when navigating (#2799)

apps/readest-app/src/app/reader/components/FoliateViewer.tsx

@@ -328,8 +328,8 @@ const FoliateViewer: React.FC<{
       });
       const viewWidth = appService?.isMobile ? screen.width : window.innerWidth;
       const viewHeight = appService?.isMobile ? screen.height : window.innerHeight;
-      const width = viewWidth - insets.left - insets.right;
-      const height = viewHeight - insets.top - insets.bottom;
+      const width = viewWidth;
+      const height = viewHeight;
       book.transformTarget?.addEventListener('data', getDocTransformHandler({ width, height }));
       view.renderer.setStyles?.(getStyles(viewSettings));
       applyTranslationStyle(viewSettings);

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

@@ -1,6 +1,7 @@
 import clsx from 'clsx';
 import React from 'react';
 import { BookNote } from '@/types/book';
+import { useEnv } from '@/context/EnvContext';
 import { useBookDataStore } from '@/store/bookDataStore';
 import { useReaderStore } from '@/store/readerStore';
 import { useSidebarStore } from '@/store/sidebarStore';
@@ -13,6 +14,7 @@ interface AnnotationNotesProps {
   triangleDir: 'up' | 'down' | 'left' | 'right';
   popupWidth: number;
   popupHeight: number;
+  onDismiss: () => void;
 }
 
 const AnnotationNotes: React.FC<AnnotationNotesProps> = ({
@@ -22,7 +24,9 @@ const AnnotationNotes: React.FC<AnnotationNotesProps> = ({
   triangleDir,
   popupWidth,
   popupHeight,
+  onDismiss,
 }) => {
+  const { appService } = useEnv();
   const { getConfig, setConfig } = useBookDataStore();
   const { setHoveredBookKey } = useReaderStore();
   const { setSideBarVisible } = useSidebarStore();
@@ -32,6 +36,10 @@ const AnnotationNotes: React.FC<AnnotationNotesProps> = ({
   const handleShowAnnotation = (note: BookNote) => {
     if (!note.id) return;
 
+    if (appService?.isMobile) {
+      onDismiss();
+    }
+
     setHoveredBookKey('');
     setSideBarVisible(true);
     if (config?.viewSettings) {

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

@@ -27,7 +27,7 @@ interface AnnotationPopupProps {
   popupWidth: number;
   popupHeight: number;
   onHighlight: (update?: boolean) => void;
-  onDismiss?: () => void;
+  onDismiss: () => void;
 }
 
 const AnnotationPopup: React.FC<AnnotationPopupProps> = ({
@@ -88,6 +88,7 @@ const AnnotationPopup: React.FC<AnnotationPopupProps> = ({
               triangleDir={trianglePosition.dir!}
               popupWidth={isVertical ? popupHeight : popupWidth}
               popupHeight={isVertical ? popupWidth : popupHeight}
+              onDismiss={onDismiss}
             />
           ) : (
             highlightOptionsVisible && (