fix: head bar may hide login buttons in auth page (#769)

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}

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'>