From e03ed5b6040b612b53cad44d9921f9924bf5c7a5 Mon Sep 17 00:00:00 2001
From: Huang Xin <chrox.huang@gmail.com>
Date: Thu, 11 Dec 2025 17:15:56 +0800
Subject: [PATCH] fix(layout): fix responsive layout for footnote popup (#2688)

---
 .../src/app/reader/components/FootnotePopup.tsx           | 8 ++++----
 .../src/app/reader/components/footerbar/FooterBar.tsx     | 2 +-
 apps/readest-app/src/utils/style.ts                       | 4 ++++
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/apps/readest-app/src/app/reader/components/FootnotePopup.tsx b/apps/readest-app/src/app/reader/components/FootnotePopup.tsx
index 0f211b07..6ba27168 100644
--- a/apps/readest-app/src/app/reader/components/FootnotePopup.tsx
+++ b/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]);
diff --git a/apps/readest-app/src/app/reader/components/footerbar/FooterBar.tsx b/apps/readest-app/src/app/reader/components/footerbar/FooterBar.tsx
index ce1f8e7b..6c50ed23 100644
--- a/apps/readest-app/src/app/reader/components/footerbar/FooterBar.tsx
+++ b/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',
diff --git a/apps/readest-app/src/utils/style.ts b/apps/readest-app/src/utils/style.ts
index d7833b92..90a5caef 100644
--- a/apps/readest-app/src/utils/style.ts
+++ b/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;' : ''}