From d96fb32bcfd7ab3fbc4770fd93d38709b2f1f234 Mon Sep 17 00:00:00 2001
From: Huang Xin <chrox.huang@gmail.com>
Date: Tue, 13 May 2025 19:48:21 +0800
Subject: [PATCH] fix: apply layout styles to div tag, closes #1130 (#1142)

---
 apps/readest-app/src/components/Slider.tsx | 7 +++++--
 apps/readest-app/src/utils/style.ts        | 4 ++--
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/apps/readest-app/src/components/Slider.tsx b/apps/readest-app/src/components/Slider.tsx
index 176d3e3a..ee7f7d41 100644
--- a/apps/readest-app/src/components/Slider.tsx
+++ b/apps/readest-app/src/components/Slider.tsx
@@ -75,7 +75,10 @@ const Slider: React.FC<SliderProps> = ({
         <div
           className='bg-base-300 absolute h-full rounded-full'
           style={{
-            width: percentage > 0 ? `calc(${percentage}% + ${heightPx / 2}px)` : '0px',
+            width:
+              percentage > 0
+                ? `max(calc(${percentage}% + ${heightPx / 2}px), ${heightPx}px)`
+                : '0px',
             [isRtl ? 'right' : 'left']: 0,
           }}
         ></div>
@@ -94,7 +97,7 @@ const Slider: React.FC<SliderProps> = ({
           }}
         >
           <div
-            className={`bg-base-200 flex h-full items-center justify-center rounded-full text-sm shadow-md ${bubbleClassName}`}
+            className={`bg-base-200 flex h-full items-center justify-center rounded-full text-xs shadow-md ${bubbleClassName}`}
             style={{ width: `${heightPx}px` }}
           >
             {bubbleElement || bubbleLabel}
diff --git a/apps/readest-app/src/utils/style.ts b/apps/readest-app/src/utils/style.ts
index 4c0abb30..d9a683a7 100644
--- a/apps/readest-app/src/utils/style.ts
+++ b/apps/readest-app/src/utils/style.ts
@@ -227,7 +227,7 @@ const getLayoutStyles = (
     width: auto;
     background-color: transparent !important;
   }
-  p, li, blockquote, dd  {
+  p, div, li, blockquote, dd  {
     line-height: ${lineSpacing} ${overrideLayout ? '!important' : ''};
     word-spacing: ${wordSpacing}px ${overrideLayout ? '!important' : ''};
     letter-spacing: ${letterSpacing}px ${overrideLayout ? '!important' : ''};
@@ -241,7 +241,7 @@ const getLayoutStyles = (
     hanging-punctuation: allow-end last;
     widows: 2;
   }
-  p {
+  p, div {
     ${vertical ? `margin-left: ${paragraphMargin}em ${overrideLayout ? '!important' : ''};` : ''}
     ${vertical ? `margin-right: ${paragraphMargin}em ${overrideLayout ? '!important' : ''};` : ''}
     ${!vertical ? `margin-top: ${paragraphMargin}em ${overrideLayout ? '!important' : ''};` : ''}