fix(layout): constrain image height within table cells in paginated mode (#2480)

Closes #2472.

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

@@ -23,6 +23,7 @@ import { useKOSync } from '../hooks/useKOSync';
 import {
   applyFixedlayoutStyles,
   applyImageStyle,
+  applyScrollModeClass,
   applyTableStyle,
   applyThemeModeClass,
   applyTranslationStyle,
@@ -193,6 +194,7 @@ const FoliateViewer: React.FC<{
       applyImageStyle(detail.doc);
       applyTableStyle(detail.doc);
       applyThemeModeClass(detail.doc, isDarkMode);
+      applyScrollModeClass(detail.doc, viewSettings.scrolled || false);
       keepTextAlignment(detail.doc);
       removeTabIndex(detail.doc);
 
@@ -414,10 +416,17 @@ const FoliateViewer: React.FC<{
           applyFixedlayoutStyles(doc, viewSettings);
         }
         applyThemeModeClass(doc, isDarkMode);
+        applyScrollModeClass(doc, viewSettings.scrolled || false);
       });
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [themeCode, isDarkMode, viewSettings?.overrideColor, viewSettings?.invertImgColorInDark]);
+  }, [
+    themeCode,
+    isDarkMode,
+    viewSettings?.scrolled,
+    viewSettings?.overrideColor,
+    viewSettings?.invertImgColorInDark,
+  ]);
 
   useEffect(() => {
     const mountCustomFonts = async () => {

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

@@ -364,6 +364,10 @@ const getLayoutStyles = (
     max-width: 100% !important;
   }
 
+  body.paginated-mode td:has(img), body.paginated-mode td :has(img) {
+    max-height: calc(var(--available-height) * 0.8 * 1px);
+  }
+
   /* some epubs set insane inline-block for p */
   p {
     display: block;
@@ -654,6 +658,11 @@ export const applyThemeModeClass = (document: Document, isDarkMode: boolean) =>
   document.body.classList.add(isDarkMode ? 'theme-dark' : 'theme-light');
 };
 
+export const applyScrollModeClass = (document: Document, isScrollMode: boolean) => {
+  document.body.classList.remove('scroll-mode', 'paginated-mode');
+  document.body.classList.add(isScrollMode ? 'scroll-mode' : 'paginated-mode');
+};
+
 export const applyImageStyle = (document: Document) => {
   document.querySelectorAll('img').forEach((img) => {
     const parent = img.parentNode;
@@ -708,9 +717,11 @@ export const applyTableStyle = (document: Document) => {
       }
     }
 
-    const scale = `calc(min(1, var(--available-width) / ${totalTableWidth}))`;
-    table.style.transformOrigin = 'left top';
-    table.style.transform = `scale(${scale})`;
+    if (totalTableWidth > 0) {
+      const scale = `calc(min(1, var(--available-width) / ${totalTableWidth}))`;
+      table.style.transformOrigin = 'left top';
+      table.style.transform = `scale(${scale})`;
+    }
   });
 };