From 27df89e26185684c2fe47d439e8fb6132120106f Mon Sep 17 00:00:00 2001
From: Huang Xin <chrox.huang@gmail.com>
Date: Mon, 5 May 2025 17:58:49 +0800
Subject: [PATCH] fix: override text-indent when overriding book layout, closes
 #1026 (#1038)

---
 .../reader/components/settings/MiscPanel.tsx  | 64 ++++++++++---------
 apps/readest-app/src/utils/style.ts           |  4 +-
 2 files changed, 35 insertions(+), 33 deletions(-)

diff --git a/apps/readest-app/src/app/reader/components/settings/MiscPanel.tsx b/apps/readest-app/src/app/reader/components/settings/MiscPanel.tsx
index 5729a4d2..c93aaad5 100644
--- a/apps/readest-app/src/app/reader/components/settings/MiscPanel.tsx
+++ b/apps/readest-app/src/app/reader/components/settings/MiscPanel.tsx
@@ -212,44 +212,46 @@ const MiscPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
         </div>
       </div>
 
-      <div className='w-full'>
-        <h2 className='mb-2 font-medium'>{_('Screen')}</h2>
-        <div className='card border-base-200 bg-base-100 border shadow'>
-          <div className='divide-base-200 divide-y'>
-            <div className='config-item'>
-              <span className=''>{_('Orientation')}</span>
-              <div className='flex gap-4'>
-                <div className='lg:tooltip lg:tooltip-bottom' data-tip={_('Auto')}>
-                  <button
-                    className={`btn btn-ghost btn-circle btn-sm ${screenOrientation === 'auto' ? 'btn-active bg-base-300' : ''}`}
-                    onClick={() => setScreenOrientation('auto')}
-                  >
-                    <MdOutlineScreenRotation />
-                  </button>
-                </div>
+      {appService?.isMobileApp && (
+        <div className='w-full'>
+          <h2 className='mb-2 font-medium'>{_('Screen')}</h2>
+          <div className='card border-base-200 bg-base-100 border shadow'>
+            <div className='divide-base-200 divide-y'>
+              <div className='config-item'>
+                <span className=''>{_('Orientation')}</span>
+                <div className='flex gap-4'>
+                  <div className='lg:tooltip lg:tooltip-bottom' data-tip={_('Auto')}>
+                    <button
+                      className={`btn btn-ghost btn-circle btn-sm ${screenOrientation === 'auto' ? 'btn-active bg-base-300' : ''}`}
+                      onClick={() => setScreenOrientation('auto')}
+                    >
+                      <MdOutlineScreenRotation />
+                    </button>
+                  </div>
 
-                <div className='lg:tooltip lg:tooltip-bottom' data-tip={_('Portrait')}>
-                  <button
-                    className={`btn btn-ghost btn-circle btn-sm ${screenOrientation === 'portrait' ? 'btn-active bg-base-300' : ''}`}
-                    onClick={() => setScreenOrientation('portrait')}
-                  >
-                    <IoPhonePortraitOutline />
-                  </button>
-                </div>
+                  <div className='lg:tooltip lg:tooltip-bottom' data-tip={_('Portrait')}>
+                    <button
+                      className={`btn btn-ghost btn-circle btn-sm ${screenOrientation === 'portrait' ? 'btn-active bg-base-300' : ''}`}
+                      onClick={() => setScreenOrientation('portrait')}
+                    >
+                      <IoPhonePortraitOutline />
+                    </button>
+                  </div>
 
-                <div className='lg:tooltip lg:tooltip-bottom' data-tip={_('Landscape')}>
-                  <button
-                    className={`btn btn-ghost btn-circle btn-sm ${screenOrientation === 'landscape' ? 'btn-active bg-base-300' : ''}`}
-                    onClick={() => setScreenOrientation('landscape')}
-                  >
-                    <IoPhoneLandscapeOutline />
-                  </button>
+                  <div className='lg:tooltip lg:tooltip-bottom' data-tip={_('Landscape')}>
+                    <button
+                      className={`btn btn-ghost btn-circle btn-sm ${screenOrientation === 'landscape' ? 'btn-active bg-base-300' : ''}`}
+                      onClick={() => setScreenOrientation('landscape')}
+                    >
+                      <IoPhoneLandscapeOutline />
+                    </button>
+                  </div>
                 </div>
               </div>
             </div>
           </div>
         </div>
-      </div>
+      )}
 
       <div className='w-full'>
         <h2 className='mb-2 font-medium'>{_('Behavior')}</h2>
diff --git a/apps/readest-app/src/utils/style.ts b/apps/readest-app/src/utils/style.ts
index ca5a6654..b3255b62 100644
--- a/apps/readest-app/src/utils/style.ts
+++ b/apps/readest-app/src/utils/style.ts
@@ -223,11 +223,11 @@ const getLayoutStyles = (
   svg, img {
     background-color: transparent !important;
   }
-  p, li, blockquote, dd {
+  p:not(.poem):not(.poetry), li, blockquote, dd  {
     line-height: ${lineSpacing} ${overrideLayout ? '!important' : ''};
     word-spacing: ${wordSpacing}px ${overrideLayout ? '!important' : ''};
     letter-spacing: ${letterSpacing}px ${overrideLayout ? '!important' : ''};
-    text-indent: ${vertical ? textIndent * 1.2 : textIndent}em;
+    text-indent: ${vertical ? textIndent * 1.2 : textIndent}em ${overrideLayout ? '!important' : ''};
     text-align: ${overrideLayout ? 'var(--default-text-align)' : 'inherit'};
     -webkit-hyphens: ${hyphenate ? 'auto' : 'manual'};
     hyphens: ${hyphenate ? 'auto' : 'manual'};