layout: fix hardcoded image layout in fixed layout documents (#1660)

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

@@ -14,6 +14,7 @@ import { useFoliateEvents } from '../hooks/useFoliateEvents';
 import { useProgressSync } from '../hooks/useProgressSync';
 import { useProgressAutoSave } from '../hooks/useProgressAutoSave';
 import {
+  applyFixedlayoutStyles,
   applyImageStyle,
   applyTranslationStyle,
   getStyles,
@@ -134,6 +135,10 @@ const FoliateViewer: React.FC<{
 
       mountAdditionalFonts(detail.doc, isCJKLang(bookData.book?.primaryLanguage));
 
+      if (bookDoc.rendition?.layout === 'pre-paginated') {
+        applyFixedlayoutStyles(detail.doc);
+      }
+
       applyImageStyle(detail.doc);
 
       // Inline scripts in tauri platforms are not executed by default

apps/readest-app/src/app/reader/components/notebook/Notebook.tsx

@@ -216,7 +216,7 @@ const Notebook: React.FC = ({}) => {
           }
         `}</style>
         <div
-          className='drag-bar absolute left-0 top-0 -m-3 h-full w-0.5 cursor-col-resize p-3'
+          className='drag-bar absolute left-0 top-0 -m-2 h-full w-0.5 cursor-col-resize bg-transparent p-2'
           onMouseDown={handleDragStart}
           onTouchStart={handleDragStart}
         />

apps/readest-app/src/app/reader/components/sidebar/SideBar.tsx

@@ -259,7 +259,7 @@ const SideBar: React.FC<{
         )}
         <div
           className={clsx(
-            'drag-bar absolute -right-1 top-0 -m-1 h-full w-0.5 cursor-col-resize p-1',
+            'drag-bar absolute right-0 top-0 -m-2 h-full w-0.5 cursor-col-resize bg-transparent p-2',
             isMobile && 'hidden',
           )}
           onMouseDown={handleHorizontalDragStart}