layout: tweaks on layout for iPad (#1446)

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',

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';

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