From 04ade02a06f3652dc6af723360076c23aa8cf4e7 Mon Sep 17 00:00:00 2001
From: Huang Xin <chrox.huang@gmail.com>
Date: Mon, 17 Nov 2025 19:52:05 +0530
Subject: [PATCH] fix(layout): enlarge clickable area for the close button in
 the reader page (#2459)

---
 apps/readest-app/src/app/library/page.tsx | 18 +++++++++---------
 apps/readest-app/src/hooks/useTheme.ts    |  2 +-
 apps/readest-app/src/styles/globals.css   | 10 ++++++++++
 3 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/apps/readest-app/src/app/library/page.tsx b/apps/readest-app/src/app/library/page.tsx
index 42aa377e..e94a5660 100644
--- a/apps/readest-app/src/app/library/page.tsx
+++ b/apps/readest-app/src/app/library/page.tsx
@@ -637,7 +637,7 @@ const LibraryPageContent = ({ searchParams }: { searchParams: ReadonlyURLSearchP
       )}
     >
       <div
-        className='top-0 z-40 w-full'
+        className='relative top-0 z-40 w-full'
         role='banner'
         tabIndex={-1}
         aria-label={_('Library Header')}
@@ -650,6 +650,14 @@ const LibraryPageContent = ({ searchParams }: { searchParams: ReadonlyURLSearchP
           onSelectAll={handleSelectAll}
           onDeselectAll={handleDeselectAll}
         />
+        <progress
+          className={clsx(
+            'progress progress-success absolute bottom-0 left-0 right-0 h-1 translate-y-[2px] transition-opacity duration-200 sm:translate-y-[4px]',
+            isSyncing ? 'opacity-100' : 'opacity-0',
+          )}
+          value={syncProgress * 100}
+          max='100'
+        />
       </div>
       {(loading || isSyncing) && (
         <div className='fixed inset-0 z-50 flex items-center justify-center'>
@@ -716,14 +724,6 @@ const LibraryPageContent = ({ searchParams }: { searchParams: ReadonlyURLSearchP
                 paddingLeft: `${insets.left}px`,
               }}
             >
-              <progress
-                className={clsx(
-                  'progress progress-success absolute left-0 right-0 top-[2px] z-30 h-1 transition-opacity duration-200',
-                  isSyncing ? 'opacity-100' : 'opacity-0',
-                )}
-                value={syncProgress * 100}
-                max='100'
-              ></progress>
               <DropIndicator />
               <Bookshelf
                 libraryBooks={libraryBooks}
diff --git a/apps/readest-app/src/hooks/useTheme.ts b/apps/readest-app/src/hooks/useTheme.ts
index 98be04f6..94fb54db 100644
--- a/apps/readest-app/src/hooks/useTheme.ts
+++ b/apps/readest-app/src/hooks/useTheme.ts
@@ -46,7 +46,7 @@ export const useTheme = ({
   const handleSystemUIVisibility = useCallback(() => {
     if (!appService?.isMobileApp) return;
 
-    const visible = systemUIVisible && !systemUIAlwaysHidden;
+    const visible = !!(systemUIVisible && !systemUIAlwaysHidden);
     if (visible) {
       showSystemUI();
     } else {
diff --git a/apps/readest-app/src/styles/globals.css b/apps/readest-app/src/styles/globals.css
index a7b1c94c..1f76dcf4 100644
--- a/apps/readest-app/src/styles/globals.css
+++ b/apps/readest-app/src/styles/globals.css
@@ -399,6 +399,16 @@ foliate-view {
   box-shadow: inset 0 0 0 2px transparent, inset 0 0 0 3px #6396e7;
 }
 
+.window-button {
+  position: relative;
+}
+
+.window-button::before {
+  content: '';
+  position: absolute;
+  inset: -8px;
+}
+
 @keyframes spin-counterclockwise {
   from {
     transform: rotate(0deg);