refactor(layout): refactor page margins for pixel precision, closes #2652 (#2663)

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

@@ -108,10 +108,8 @@ const FootnotePopup: React.FC<FootnotePopupProps> = ({ bookKey, bookDoc }) => {
         const viewSettings = getViewSettings(bookKey)!;
         if (viewSettings.vertical) {
           setResponsiveWidth(getResponsivePopupSize(renderer.viewSize, true));
-          setResponsiveHeight(clipPopupHeight(popupHeight));
         } else {
           setResponsiveWidth(clipPopupWith(popupWidth));
-          setResponsiveHeight(getResponsivePopupSize(renderer.viewSize, false));
         }
         setShowPopup(true);
       });

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

@@ -90,11 +90,11 @@ const HintInfo: React.FC<SectionInfoProps> = ({
                 right: showDoubleBorder
                   ? `calc(${contentInsets.right}px)`
                   : `calc(${Math.max(0, contentInsets.right - 32)}px)`,
-                width: showDoubleBorder ? '30px' : `${horizontalGap}%`,
+                width: showDoubleBorder ? '30px' : `${contentInsets.right}px`,
               }
             : {
                 top: `${topInset}px`,
-                insetInlineEnd: `calc(${horizontalGap / 2}% + ${contentInsets.right}px)`,
+                insetInlineEnd: `calc(${horizontalGap / 2}% + ${contentInsets.right / 2}px)`,
               }
         }
       >

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

@@ -98,12 +98,12 @@ const ProgressInfoView: React.FC<PageInfoProps> = ({
               left: showDoubleBorder
                 ? `calc(${contentInsets.left}px)`
                 : `calc(${Math.max(0, contentInsets.left - 32)}px)`,
-              width: showDoubleBorder ? '32px' : `${horizontalGap}%`,
+              width: showDoubleBorder ? '32px' : `${contentInsets.left}px`,
               height: `calc(100% - ${((contentInsets.top + contentInsets.bottom) / 2) * 3}px)`,
             }
           : {
-              paddingInlineStart: `calc(${horizontalGap / 2}% + ${contentInsets.left}px)`,
-              paddingInlineEnd: `calc(${horizontalGap / 2}% + ${contentInsets.right}px)`,
+              paddingInlineStart: `calc(${horizontalGap / 2}% + ${contentInsets.left / 2}px)`,
+              paddingInlineEnd: `calc(${horizontalGap / 2}% + ${contentInsets.right / 2}px)`,
               paddingBottom: appService?.hasSafeAreaInset ? `${gridInsets.bottom * 0.33}px` : 0,
             }
       }

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

@@ -65,12 +65,12 @@ const SectionInfo: React.FC<SectionInfoProps> = ({
                 right: showDoubleBorder
                   ? `calc(${contentInsets.right}px)`
                   : `calc(${Math.max(0, contentInsets.right - 32)}px)`,
-                width: showDoubleBorder ? '32px' : `${horizontalGap}%`,
+                width: showDoubleBorder ? '32px' : `${contentInsets.right}px`,
                 height: `calc(100% - ${contentInsets.top + contentInsets.bottom}px)`,
               }
             : {
                 top: `${topInset}px`,
-                paddingInline: `calc(${horizontalGap / 2}% + ${contentInsets.left}px)`,
+                paddingInline: `calc(${horizontalGap / 2}% + ${contentInsets.left / 2}px)`,
                 width: '100%',
               }
         }

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

@@ -261,10 +261,7 @@ const getLayoutStyles = (
   a::before {
     content: '';
     position: absolute;
-    top: -10px;
-    left: -10px;
-    right: -10px;
-    bottom: -10px;
+    inset: -10px;
   }
   p, blockquote, dd, div:not(:has(*:not(b, a, em, i, strong, u, span))) {
     line-height: ${lineSpacing} ${overrideLayout ? '!important' : ''};
@@ -328,10 +325,6 @@ const getLayoutStyles = (
     white-space: pre-wrap !important;
   }
 
-  body:not([dir="rtl"]) {
-    overflow-x: clip;
-  }
-
   .epubtype-footnote,
   aside[epub|type~="endnote"],
   aside[epub|type~="footnote"],
@@ -609,6 +602,18 @@ export const transformStylesheet = (vw: number, vh: number, css: string) => {
     return match;
   });
 
+  // clip nowrapped elements
+  css = css.replace(ruleRegex, (match, selector, block) => {
+    const hasWhiteSpaceNowrap = /white-space\s*:\s*nowrap\s*[;$]/.test(block);
+    if (hasWhiteSpaceNowrap) {
+      if (!/overflow\s*:/.test(block)) {
+        block = block.replace(/}$/, ' overflow: clip !important; }');
+      }
+      return selector + block;
+    }
+    return match;
+  });
+
   // Process duokan-bleed
   css = css.replace(ruleRegex, (_, selector, block) => {
     const directions = ['top', 'bottom', 'left', 'right'];