fix(layout): fixed regression of vertical alignment, closes #3012 (#3178)

apps/readest-app/src/app/library/components/SettingsMenu.tsx

@@ -282,6 +282,7 @@ const SettingsMenu: React.FC<SettingsMenuProps> = ({ onPullLibrary, setIsDropdow
                   : _('Never synced')
               }
               Icon={user ? MdSync : MdSyncProblem}
+              labelClass='ps-2 pe-1 !mx-0'
               iconClassName={user && isSyncing ? 'animate-reverse-spin' : ''}
               onClick={onPullLibrary.bind(null, true, true)}
             />

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

@@ -340,8 +340,8 @@ const FoliateViewer: React.FC<{
       });
       const viewWidth = appService?.isMobile ? screen.width : window.innerWidth;
       const viewHeight = appService?.isMobile ? screen.height : window.innerHeight;
-      const width = viewWidth;
+      const width = viewWidth - insets.left - insets.right;
-      const height = viewHeight;
+      const height = viewHeight - insets.top - insets.bottom;
       book.transformTarget?.addEventListener('data', getDocTransformHandler({ width, height }));
       view.renderer.setStyles?.(getStyles(viewSettings));
       applyTranslationStyle(viewSettings);

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

@@ -64,11 +64,12 @@ const PageNavigationButtons: React.FC<PageNavigationButtonsProps> = ({
       <button
         onClick={handleGoLeftPage}
         className={clsx(
-          'absolute left-2 top-1/2 z-10 -translate-y-1/2',
+          'absolute left-2 z-10 -translate-y-1/2',
-          'flex h-20 w-20 items-center justify-center',
+          'flex items-center justify-center',
-          'transition-opacity duration-300',
+          'transition-opacity duration-300 focus:outline-none',
-          'focus:opacity-100 focus:outline-none',
+          isPageNavigationButtonsVisible
-          isPageNavigationButtonsVisible ? 'opacity-100' : 'opacity-0',
+            ? 'top-1/2 h-20 w-20 opacity-100'
+            : 'bottom-12 h-10 w-10 opacity-0',
         )}
         aria-label={getLeftPageLabel()}
         tabIndex={0}
@@ -88,11 +89,12 @@ const PageNavigationButtons: React.FC<PageNavigationButtonsProps> = ({
       <button
         onClick={handleGoRightPage}
         className={clsx(
-          'absolute right-2 top-1/2 z-10 -translate-y-1/2',
+          'absolute right-2 z-10 -translate-y-1/2',
-          'flex h-20 w-20 items-center justify-center',
+          'flex items-center justify-center',
-          'transition-opacity duration-300',
+          'transition-opacity duration-300 focus:outline-none',
-          'focus:opacity-100 focus:outline-none',
+          isPageNavigationButtonsVisible
-          isPageNavigationButtonsVisible ? 'opacity-100' : 'opacity-0',
+            ? 'top-1/2 h-20 w-20 opacity-100'
+            : 'bottom-12 h-10 w-10 opacity-0',
         )}
         aria-label={getRightPageLabel()}
         tabIndex={0}

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

@@ -700,7 +700,7 @@ export const transformStylesheet = (css: string, vw: number, vh: number, vertica
             /}$/,
             ' width: calc(var(--_max-width) + var(--page-margin-left) + var(--page-margin-right)) !important; }',
           )
-          .replace(/}$/, ' max-width: 100vw !important; }');
+          .replace(/}$/, ' max-width: calc(var(--full-width) * 1px) !important; }');
       }
       if (
         !/height\s*:/.test(block) &&
@@ -712,7 +712,7 @@ export const transformStylesheet = (css: string, vw: number, vh: number, vertica
             /}$/,
             ' height: calc(100% + var(--page-margin-top) + var(--page-margin-bottom)) !important; }',
           )
-          .replace(/}$/, ' max-height: 100vh !important; }');
+          .replace(/}$/, ' max-height: calc(var(--full-height) * 1px) !important; }');
       }
     }
     return selector + block;
@@ -838,9 +838,10 @@ export const applyTableStyle = (document: Document) => {
       }
     }
 
-    const inlineWidth = table.style.width;
+    const computedTableStyle = window.getComputedStyle(table);
-    if (inlineWidth) {
+    const computedWidth = computedTableStyle.width;
-      table.style.width = `calc(min(${inlineWidth}, var(--available-width)))`;
+    if (computedWidth && computedWidth !== 'auto' && computedWidth !== '0px') {
+      table.style.width = `calc(min(${computedWidth}, var(--available-width)))`;
     }
     if (totalTableWidth > 0) {
       const scale = `calc(min(1, var(--available-width) / ${totalTableWidth}))`;