fix(layout): fix responsive layout for footnote popup (#2688)

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

@@ -107,9 +107,9 @@ const FootnotePopup: React.FC<FootnotePopupProps> = ({ bookKey, bookDoc }) => {
         const { renderer } = view as FoliateView;
         const viewSettings = getViewSettings(bookKey)!;
         if (viewSettings.vertical) {
-          setResponsiveWidth(getResponsivePopupSize(renderer.viewSize, true));
+          setResponsiveWidth(clipPopupWith(getResponsivePopupSize(renderer.viewSize, true)));
         } else {
-          setResponsiveWidth(clipPopupWith(popupWidth));
+          setResponsiveHeight(clipPopupHeight(getResponsivePopupSize(renderer.viewSize, false)));
         }
         setShowPopup(true);
       });
@@ -133,9 +133,9 @@ const FootnotePopup: React.FC<FootnotePopupProps> = ({ bookKey, bookDoc }) => {
   useEffect(() => {
     if (viewSettings.vertical) {
       setResponsiveWidth(clipPopupWith(popupHeight));
-      setResponsiveHeight(Math.max(popupWidth, window.innerHeight / 4));
+      setResponsiveHeight(clipPopupHeight(Math.max(popupWidth, window.innerHeight / 4)));
     } else {
-      setResponsiveWidth(Math.max(popupWidth, window.innerWidth / 4));
+      setResponsiveWidth(clipPopupWith(Math.max(popupWidth, window.innerWidth / 4)));
       setResponsiveHeight(clipPopupHeight(popupHeight));
     }
   }, [viewSettings]);

apps/readest-app/src/app/reader/components/footerbar/FooterBar.tsx

@@ -204,7 +204,7 @@ const FooterBar: React.FC<FooterBarProps> = ({
     'sm:h-[52px] sm:justify-center',
     'sm:bg-base-100 border-base-300/50 border-t sm:border-none',
     'transition-[opacity,transform] duration-300',
-    appService?.isAndroidApp && window.innerWidth < 640 ? 'fixed' : 'absolute',
+    window.innerWidth < 640 ? 'fixed' : 'absolute',
     appService?.hasRoundedWindow && 'rounded-window-bottom-right',
     !isSideBarVisible && appService?.hasRoundedWindow && 'rounded-window-bottom-left',
     isHoveredAnim && 'hover-bar-anim',

apps/readest-app/src/utils/style.ts

@@ -334,6 +334,10 @@ const getLayoutStyles = (
   }
 
   /* Now begins really dirty hacks to fix some badly designed epubs */
+  body {
+    line-height: unset;
+  }
+
   img.pi {
     ${vertical ? 'transform: rotate(90deg);' : ''}
     ${vertical ? 'transform-origin: center;' : ''}