From 847efb708283e67b56eefd0e8b382990775c3134 Mon Sep 17 00:00:00 2001
From: Huang Xin <chrox.huang@gmail.com>
Date: Sun, 30 Mar 2025 17:32:57 +0800
Subject: [PATCH] fix: head bar may hide login buttons in auth page (#769)

---
 apps/readest-app/src/app/auth/page.tsx | 10 +++++++---
 apps/readest-app/src/app/user/page.tsx |  5 +++--
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/apps/readest-app/src/app/auth/page.tsx b/apps/readest-app/src/app/auth/page.tsx
index 8e851344..c5a78a45 100644
--- a/apps/readest-app/src/app/auth/page.tsx
+++ b/apps/readest-app/src/app/auth/page.tsx
@@ -304,14 +304,15 @@ export default function AuthPage() {
   return isTauriAppPlatform() ? (
     <div
       className={clsx(
-        'bg-base-100 border-base-200 flex h-dvh w-full select-none flex-col items-center border',
+        'fixed inset-0 z-0 flex select-none flex-col items-center overflow-y-auto',
+        'bg-base-100 border-base-200 border',
         appService?.hasSafeAreaInset && 'pt-[env(safe-area-inset-top)]',
       )}
     >
       <div
         ref={headerRef}
         className={clsx(
-          'fixed flex w-full items-center justify-between py-2 pe-6 ps-4',
+          'fixed z-10 flex w-full items-center justify-between py-2 pe-6 ps-4',
           appService?.hasTrafficLight && 'pt-11',
         )}
       >
@@ -329,7 +330,10 @@ export default function AuthPage() {
           />
         )}
       </div>
-      <div style={{ maxWidth: '420px', margin: 'auto', padding: '2rem' }}>
+      <div
+        className={clsx('z-20 pb-8', appService?.hasTrafficLight ? 'mt-24' : 'mt-12')}
+        style={{ maxWidth: '420px' }}
+      >
         <ProviderLogin
           provider='google'
           handleSignIn={tauriSignIn}
diff --git a/apps/readest-app/src/app/user/page.tsx b/apps/readest-app/src/app/user/page.tsx
index 1147e4da..53642d4d 100644
--- a/apps/readest-app/src/app/user/page.tsx
+++ b/apps/readest-app/src/app/user/page.tsx
@@ -159,7 +159,8 @@ const ProfilePage = () => {
   return (
     <div
       className={clsx(
-        'bg-base-100 border-base-200 flex h-dvh w-full select-none flex-col items-center border',
+        'fixed inset-0 z-0 flex select-none flex-col items-center overflow-y-auto',
+        'bg-base-100 border-base-200 border',
         appService?.hasSafeAreaInset && 'pt-[env(safe-area-inset-top)]',
       )}
     >
@@ -184,7 +185,7 @@ const ProfilePage = () => {
           />
         )}
       </div>
-      <div className='w-full max-w-4xl px-4 py-10'>
+      <div className='w-full min-w-60 max-w-4xl px-4 py-10'>
         <div className='bg-base-200 overflow-hidden rounded-lg p-2 shadow-md sm:p-6'>
           <div className='p-2 sm:p-6'>
             <div className='mb-8 flex flex-col items-center gap-x-6 gap-y-4 md:flex-row md:items-start'>