From b3a44d066f6ad5bcdb23dcfa3db4113a3516a668 Mon Sep 17 00:00:00 2001
From: Huang Xin <chrox.huang@gmail.com>
Date: Thu, 26 Feb 2026 16:26:28 +0800
Subject: [PATCH] fix(layout): enlarge hit area for slider input on iOS, closes
 #3382 (#3389)

---
 apps/readest-app/src/components/Slider.tsx         |  4 ++--
 .../src/components/metadata/BookDetailView.tsx     | 14 +++++++-------
 apps/readest-app/src/styles/globals.css            |  5 +++++
 3 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/apps/readest-app/src/components/Slider.tsx b/apps/readest-app/src/components/Slider.tsx
index 67eedad8..3daeaed6 100644
--- a/apps/readest-app/src/components/Slider.tsx
+++ b/apps/readest-app/src/components/Slider.tsx
@@ -28,7 +28,7 @@ const Slider: React.FC<SliderProps> = ({
   max = 100,
   step = 1,
   initialValue = 50,
-  heightPx = 40,
+  heightPx = 44,
   minLabel = '',
   maxLabel = '',
   minIcon,
@@ -134,7 +134,7 @@ const Slider: React.FC<SliderProps> = ({
           max={100}
           step={step}
           value={percentage}
-          className='absolute inset-0 h-full w-full cursor-pointer opacity-0'
+          className='slider-input absolute inset-0 h-full min-h-12 w-full cursor-pointer opacity-0'
           onChange={handleChange}
           aria-label={label}
           aria-valuemin={min}
diff --git a/apps/readest-app/src/components/metadata/BookDetailView.tsx b/apps/readest-app/src/components/metadata/BookDetailView.tsx
index 241d5d84..5f3176b4 100644
--- a/apps/readest-app/src/components/metadata/BookDetailView.tsx
+++ b/apps/readest-app/src/components/metadata/BookDetailView.tsx
@@ -180,7 +180,7 @@ const BookDetailView: React.FC<BookDetailViewProps> = ({
                     {formatPublisher(metadata?.publisher || '') || _('Unknown')}
                   </p>
                 </div>
-                <div className='overflow-hidden'>
+                <div className='overflow-hidden pe-1 text-end sm:text-start'>
                   <span className='font-bold'>{_('Published')}</span>
                   <p className='text-neutral-content text-sm'>
                     {formatDate(metadata?.published, true) || _('Unknown')}
@@ -190,7 +190,7 @@ const BookDetailView: React.FC<BookDetailViewProps> = ({
                   <span className='font-bold'>{_('Updated')}</span>
                   <p className='text-neutral-content text-sm'>{formatDate(book.updatedAt) || ''}</p>
                 </div>
-                <div className='overflow-hidden'>
+                <div className='overflow-hidden pe-1 text-end sm:text-start'>
                   <span className='font-bold'>{_('Added')}</span>
                   <p className='text-neutral-content text-sm'>{formatDate(book.createdAt) || ''}</p>
                 </div>
@@ -200,7 +200,7 @@ const BookDetailView: React.FC<BookDetailViewProps> = ({
                     {formatLanguage(metadata?.language) || _('Unknown')}
                   </p>
                 </div>
-                <div className='overflow-hidden'>
+                <div className='overflow-hidden pe-1 text-end sm:text-start'>
                   <span className='font-bold'>{_('Subjects')}</span>
                   <p className='text-neutral-content line-clamp-3 text-sm'>
                     {formatAuthors(metadata?.subject || '') || _('Unknown')}
@@ -210,13 +210,13 @@ const BookDetailView: React.FC<BookDetailViewProps> = ({
                   <span className='font-bold'>{_('Format')}</span>
                   <p className='text-neutral-content text-sm'>{book.format || _('Unknown')}</p>
                 </div>
-                <div className='overflow-hidden'>
+                <div className='overflow-hidden pe-1 text-end sm:text-start'>
                   <span className='font-bold'>{_('File Size')}</span>
                   <p className='text-neutral-content text-sm'>
                     {formatBytes(fileSize) || _('Unknown')}
                   </p>
                 </div>
-                <div className='overflow-hidden'>
+                <div className='col-span-2 overflow-hidden sm:col-span-1'>
                   <span className='font-bold'>{_('Identifier')}</span>
                   <p className='text-neutral-content line-clamp-1 text-sm'>
                     {metadata?.identifier || _('Unknown')}
@@ -245,8 +245,8 @@ const BookDetailView: React.FC<BookDetailViewProps> = ({
           </button>
           {!settings.metadataSeriesCollapsed && (
             <div className='px-4 py-1'>
-              <div className='grid grid-cols-3 gap-4'>
-                <div className='col-span-2 overflow-hidden'>
+              <div className='grid grid-cols-2 gap-4 sm:grid-cols-3'>
+                <div className='overflow-hidden sm:col-span-2'>
                   <span className='font-bold'>{_('Series')}</span>
                   <p className='text-neutral-content text-sm'>{metadata?.series || _('Unknown')}</p>
                 </div>
diff --git a/apps/readest-app/src/styles/globals.css b/apps/readest-app/src/styles/globals.css
index bdf0db9e..408b5cff 100644
--- a/apps/readest-app/src/styles/globals.css
+++ b/apps/readest-app/src/styles/globals.css
@@ -457,6 +457,11 @@ foliate-fxl {
   inset: -8px;
 }
 
+input[type='range'].slider-input {
+  -webkit-appearance: none;
+  appearance: none;
+}
+
 @keyframes spin-counterclockwise {
   from {
     transform: rotate(0deg);