From 8c0cdb0e2240231e06022d7196aa5343d627daad Mon Sep 17 00:00:00 2001
From: Huang Xin <chrox.huang@gmail.com>
Date: Sun, 22 Jun 2025 11:55:40 +0800
Subject: [PATCH] layout: tweaks on layout for iPad (#1446)

---
 .../src/app/reader/components/sidebar/SideBar.tsx         | 1 +
 .../src/app/reader/hooks/useTextTranslation.ts            | 1 -
 apps/readest-app/src/components/Dialog.tsx                | 8 +++-----
 3 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/apps/readest-app/src/app/reader/components/sidebar/SideBar.tsx b/apps/readest-app/src/app/reader/components/sidebar/SideBar.tsx
index 15e2afe3..92b88de0 100644
--- a/apps/readest-app/src/app/reader/components/sidebar/SideBar.tsx
+++ b/apps/readest-app/src/app/reader/components/sidebar/SideBar.tsx
@@ -177,6 +177,7 @@ const SideBar: React.FC<{
         className={clsx(
           'sidebar-container bg-base-200 z-20 flex min-w-60 select-none flex-col',
           appService?.isIOSApp ? 'h-[100vh]' : 'h-full',
+          'transition-[padding-top] duration-300',
           appService?.hasSafeAreaInset && 'pt-[env(safe-area-inset-top)]',
           appService?.hasRoundedWindow && 'rounded-window-top-left rounded-window-bottom-left',
           !isSideBarPinned && 'shadow-2xl',
diff --git a/apps/readest-app/src/app/reader/hooks/useTextTranslation.ts b/apps/readest-app/src/app/reader/hooks/useTextTranslation.ts
index 18aaab65..c2864a92 100644
--- a/apps/readest-app/src/app/reader/hooks/useTextTranslation.ts
+++ b/apps/readest-app/src/app/reader/hooks/useTextTranslation.ts
@@ -136,7 +136,6 @@ export function useTextTranslation(bookKey: string, view: FoliateView | HTMLElem
       wrapper.className = `translation-target ${!enabled.current ? 'hidden' : ''}`;
       wrapper.setAttribute('translation-element-mark', '1');
       wrapper.setAttribute('lang', targetLang || getLocale());
-      wrapper.appendChild(document.createElement('br'));
 
       const blockWrapper = document.createElement('font');
       blockWrapper.className = 'translation-target translation-block-wrapper';
diff --git a/apps/readest-app/src/components/Dialog.tsx b/apps/readest-app/src/components/Dialog.tsx
index 23844e87..50de3413 100644
--- a/apps/readest-app/src/components/Dialog.tsx
+++ b/apps/readest-app/src/components/Dialog.tsx
@@ -47,7 +47,7 @@ const Dialog: React.FC<DialogProps> = ({
   const [isRtl] = useState(() => getDirFromUILanguage() === 'rtl');
   const dialogRef = useRef<HTMLDialogElement>(null);
   const iconSize22 = useResponsiveSize(22);
-  const isMobile = window.innerWidth < 640;
+  const isMobile = window.innerWidth < 640 || window.innerHeight < 640;
 
   const handleKeyDown = (event: KeyboardEvent | CustomEvent) => {
     if (event instanceof CustomEvent) {
@@ -63,7 +63,7 @@ const Dialog: React.FC<DialogProps> = ({
 
   useEffect(() => {
     if (!isOpen) return;
-    setIsFullHeightInMobile(!snapHeight);
+    setIsFullHeightInMobile(!snapHeight && isMobile);
     window.addEventListener('keydown', handleKeyDown);
     if (appService?.isAndroidApp) {
       acquireBackKeyInterception();
@@ -177,9 +177,7 @@ const Dialog: React.FC<DialogProps> = ({
             appService?.hasSafeAreaInset && isFullHeightInMobile
               ? `max(env(safe-area-inset-top), ${systemUIVisible ? statusBarHeight : 0}px)`
               : '0px',
-          ...(appService?.isMobile
-            ? { height: snapHeight ? `${snapHeight * 100}%` : '100%', bottom: 0 }
-            : {}),
+          ...(isMobile ? { height: snapHeight ? `${snapHeight * 100}%` : '100%', bottom: 0 } : {}),
         }}
       >
         <div