layout: fix issue where sidebars couldn’t be dragged to resize on iPad (#1415)

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>

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}

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

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 && (