fix(layout): enlarge clickable area for the close button in the reader page (#2459)

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}

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 {

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);