From 623520206646ce0adcea381d34293bfe0e6c97d1 Mon Sep 17 00:00:00 2001
From: Huang Xin <chrox.huang@gmail.com>
Date: Wed, 18 Jun 2025 21:43:51 +0800
Subject: [PATCH] =?UTF-8?q?layout:=20fix=20issue=20where=20sidebars=20coul?=
 =?UTF-8?q?dn=E2=80=99t=20be=20dragged=20to=20resize=20on=20iPad=20(#1415)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/app/reader/components/BooksGrid.tsx   |  1 +
 .../src/app/reader/components/FooterBar.tsx   | 24 ++++++++++++-------
 .../reader/components/notebook/Notebook.tsx   |  3 ++-
 .../app/reader/components/sidebar/SideBar.tsx |  3 ++-
 4 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/apps/readest-app/src/app/reader/components/BooksGrid.tsx b/apps/readest-app/src/app/reader/components/BooksGrid.tsx
index 86b09a9d..92495117 100644
--- a/apps/readest-app/src/app/reader/components/BooksGrid.tsx
+++ b/apps/readest-app/src/app/reader/components/BooksGrid.tsx
@@ -182,6 +182,7 @@ const BooksGrid: React.FC<BooksGridProps> = ({ bookKeys, onCloseBook }) => {
               section={section}
               pageinfo={pageinfo}
               isHoveredAnim={false}
+              gridInsets={gridInsets}
             />
             {isFontLayoutSettingsDialogOpen && <SettingsDialog bookKey={bookKey} config={config} />}
           </div>
diff --git a/apps/readest-app/src/app/reader/components/FooterBar.tsx b/apps/readest-app/src/app/reader/components/FooterBar.tsx
index 55d4f629..0b48a66a 100644
--- a/apps/readest-app/src/app/reader/components/FooterBar.tsx
+++ b/apps/readest-app/src/app/reader/components/FooterBar.tsx
@@ -21,6 +21,7 @@ import { eventDispatcher } from '@/utils/event';
 import { viewPagination } from '../hooks/usePagination';
 import { saveViewSettings } from '../utils/viewSettingsHelper';
 import { PageInfo } from '@/types/book';
+import { Insets } from '@/types/misc';
 import Button from '@/components/Button';
 import Slider from '@/components/Slider';
 import TTSControl from './tts/TTSControl';
@@ -31,6 +32,7 @@ interface FooterBarProps {
   section?: PageInfo;
   pageinfo?: PageInfo;
   isHoveredAnim: boolean;
+  gridInsets: Insets;
 }
 
 const FooterBar: React.FC<FooterBarProps> = ({
@@ -39,6 +41,7 @@ const FooterBar: React.FC<FooterBarProps> = ({
   section,
   pageinfo,
   isHoveredAnim,
+  gridInsets,
 }) => {
   const _ = useTranslation();
   const { envConfig, appService } = useEnv();
@@ -199,9 +202,7 @@ const FooterBar: React.FC<FooterBarProps> = ({
               : 'pointer-events-none invisible translate-y-full overflow-hidden pb-0 pt-0 ease-in',
           )}
           style={{
-            bottom: appService?.hasSafeAreaInset
-              ? 'calc(env(safe-area-inset-bottom) + 64px)'
-              : '64px',
+            bottom: appService?.hasSafeAreaInset ? `${gridInsets.bottom + 64}px` : '64px',
           }}
         >
           <div className='flex w-full items-center justify-between gap-x-6'>
@@ -255,9 +256,7 @@ const FooterBar: React.FC<FooterBarProps> = ({
               : 'pointer-events-none invisible translate-y-full overflow-hidden pb-0 pt-0 ease-in',
           )}
           style={{
-            bottom: appService?.hasSafeAreaInset
-              ? 'calc(env(safe-area-inset-bottom) + 64px)'
-              : '64px',
+            bottom: appService?.hasSafeAreaInset ? `${gridInsets.bottom + 64}px` : '64px',
           }}
         >
           <Slider
@@ -297,8 +296,10 @@ const FooterBar: React.FC<FooterBarProps> = ({
         <div
           className={clsx(
             'bg-base-200 z-50 mt-auto flex w-full justify-between px-8 py-4 sm:hidden',
-            appService?.hasSafeAreaInset && 'pb-[calc(env(safe-area-inset-bottom)+16px)]',
           )}
+          style={{
+            paddingBottom: appService?.hasSafeAreaInset ? `${gridInsets.bottom + 16}px` : '0px',
+          }}
         >
           <Button
             icon={<TOCIcon size={tocIconSize} className='' />}
@@ -323,8 +324,13 @@ const FooterBar: React.FC<FooterBarProps> = ({
             onClick={() => handleSetActionTab('tts')}
           />
         </div>
-        {/* Desktop footer bar */}
-        <div className='hidden w-full items-center gap-x-4 px-4 sm:flex'>
+        {/* Desktop / Pad footer bar */}
+        <div
+          className='absolute hidden h-full w-full items-center gap-x-4 px-4 sm:flex'
+          style={{
+            bottom: appService?.hasSafeAreaInset ? `${gridInsets.bottom / 2}px` : '0px',
+          }}
+        >
           <Button
             icon={viewSettings?.rtl ? <RiArrowRightDoubleLine /> : <RiArrowLeftDoubleLine />}
             onClick={viewSettings?.rtl ? handleGoNextSection : handleGoPrevSection}
diff --git a/apps/readest-app/src/app/reader/components/notebook/Notebook.tsx b/apps/readest-app/src/app/reader/components/notebook/Notebook.tsx
index a8c727eb..0b412708 100644
--- a/apps/readest-app/src/app/reader/components/notebook/Notebook.tsx
+++ b/apps/readest-app/src/app/reader/components/notebook/Notebook.tsx
@@ -216,8 +216,9 @@ const Notebook: React.FC = ({}) => {
           }
         `}</style>
         <div
-          className='drag-bar absolute left-0 top-0 h-full w-0.5 cursor-col-resize'
+          className='drag-bar absolute left-0 top-0 -m-3 h-full w-0.5 cursor-col-resize p-3'
           onMouseDown={handleDragStart}
+          onTouchStart={handleDragStart}
         />
         <div className='flex-shrink-0'>
           <NotebookHeader
diff --git a/apps/readest-app/src/app/reader/components/sidebar/SideBar.tsx b/apps/readest-app/src/app/reader/components/sidebar/SideBar.tsx
index 48c439eb..15e2afe3 100644
--- a/apps/readest-app/src/app/reader/components/sidebar/SideBar.tsx
+++ b/apps/readest-app/src/app/reader/components/sidebar/SideBar.tsx
@@ -248,8 +248,9 @@ const SideBar: React.FC<{
           <SidebarContent bookDoc={bookDoc} sideBarBookKey={sideBarBookKey!} />
         )}
         <div
-          className='drag-bar absolute right-0 top-0 h-full w-0.5 cursor-col-resize'
+          className='drag-bar absolute right-0 top-0 -m-3 h-full w-0.5 cursor-col-resize p-3'
           onMouseDown={handleHorizontalDragStart}
+          onTouchStart={handleHorizontalDragStart}
         ></div>
       </div>
       {!isSideBarPinned && (