layout: fix layout for auth and user page (#1637)

apps/readest-app/next.config.mjs

@@ -13,10 +13,6 @@ if (isDev) {
 
 const exportOutput = appPlatform !== 'web' && !isDev;
 
-const bundleAnalyzer = withBundleAnalyzer({
-  enabled: process.env.ANALYZE === 'true',
-});
-
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   // Ensure Next.js uses SSG instead of SSR
@@ -75,4 +71,8 @@ const withPWA = withPWAInit({
   },
 });
 
-export default withPWA(bundleAnalyzer(nextConfig));
+const withAnalyzer = withBundleAnalyzer({
+  enabled: process.env.ANALYZE === 'true',
+});
+
+export default withPWA(withAnalyzer(nextConfig));

apps/readest-app/src/app/auth/page.tsx

@@ -334,66 +334,82 @@ export default function AuthPage() {
   return isTauriAppPlatform() ? (
     <div
       className={clsx(
-        'bg-base-100 fixed inset-0 flex select-none flex-col items-center overflow-hidden overflow-y-auto',
+        'bg-base-100 inset-0 flex select-none flex-col items-center overflow-hidden',
         appService?.isIOSApp ? 'h-[100vh]' : 'h-dvh',
         appService?.isLinuxApp && 'window-border',
         appService?.hasRoundedWindow && 'rounded-window',
-        appService?.hasSafeAreaInset && 'pt-[env(safe-area-inset-top)]',
       )}
     >
       <div
-        ref={headerRef}
         className={clsx(
-          'fixed z-10 flex w-full items-center justify-between py-2 pe-6 ps-4',
-          appService?.hasTrafficLight && 'pt-11',
+          'flex h-full w-full flex-col items-center overflow-y-auto',
+          appService?.hasSafeAreaInset && 'pt-[env(safe-area-inset-top)]',
         )}
       >
-        <button onClick={handleGoBack} className={clsx('btn btn-ghost h-8 min-h-8 w-8 p-0')}>
-          <IoArrowBack className='text-base-content' />
-        </button>
+        <div
+          ref={headerRef}
+          className={clsx(
+            'fixed z-10 flex w-full items-center justify-between py-2 pe-6 ps-4',
+            appService?.hasTrafficLight && 'pt-11',
+          )}
+        >
+          <button
+            onClick={handleGoBack}
+            className={clsx('btn btn-ghost h-12 min-h-12 w-12 p-0 sm:h-8 sm:min-h-8 sm:w-8')}
+          >
+            <IoArrowBack className='text-base-content' />
+          </button>
 
-        {appService?.hasWindowBar && (
-          <WindowButtons
-            headerRef={headerRef}
-            showMinimize={!isTrafficLightVisible}
-            showMaximize={!isTrafficLightVisible}
-            showClose={!isTrafficLightVisible}
-            onClose={handleGoBack}
+          {appService?.hasWindowBar && (
+            <WindowButtons
+              headerRef={headerRef}
+              showMinimize={!isTrafficLightVisible}
+              showMaximize={!isTrafficLightVisible}
+              showClose={!isTrafficLightVisible}
+              onClose={handleGoBack}
+            />
+          )}
+        </div>
+        <div
+          className={clsx(
+            'z-20 flex flex-col items-center pb-8',
+            appService?.hasTrafficLight ? 'mt-24' : 'mt-12',
+          )}
+          style={{ maxWidth: '420px' }}
+        >
+          <ProviderLogin
+            provider='google'
+            handleSignIn={tauriSignIn}
+            Icon={FcGoogle}
+            label={_('Sign in with Google')}
           />
-        )}
-      </div>
-      <div
-        className={clsx('z-20 pb-8', appService?.hasTrafficLight ? 'mt-24' : 'mt-12')}
-        style={{ maxWidth: '420px' }}
-      >
-        <ProviderLogin
-          provider='google'
-          handleSignIn={tauriSignIn}
-          Icon={FcGoogle}
-          label={_('Sign in with Google')}
-        />
-        <ProviderLogin
-          provider='apple'
-          handleSignIn={appService?.isIOSApp || USE_APPLE_SIGN_IN ? tauriSignInApple : tauriSignIn}
-          Icon={FaApple}
-          label={_('Sign in with Apple')}
-        />
-        <ProviderLogin
-          provider='github'
-          handleSignIn={tauriSignIn}
-          Icon={FaGithub}
-          label={_('Sign in with GitHub')}
-        />
-        <hr className='border-base-300 my-3 mt-6 w-64 border-t' />
-        <Auth
-          supabaseClient={supabase}
-          appearance={{ theme: ThemeSupa }}
-          theme={isDarkMode ? 'dark' : 'light'}
-          magicLink={true}
-          providers={[]}
-          redirectTo={getTauriRedirectTo(false)}
-          localization={getAuthLocalization()}
-        />
+          <ProviderLogin
+            provider='apple'
+            handleSignIn={
+              appService?.isIOSApp || USE_APPLE_SIGN_IN ? tauriSignInApple : tauriSignIn
+            }
+            Icon={FaApple}
+            label={_('Sign in with Apple')}
+          />
+          <ProviderLogin
+            provider='github'
+            handleSignIn={tauriSignIn}
+            Icon={FaGithub}
+            label={_('Sign in with GitHub')}
+          />
+          <hr className='border-base-300 my-3 mt-6 w-64 border-t' />
+          <div className='w-full'>
+            <Auth
+              supabaseClient={supabase}
+              appearance={{ theme: ThemeSupa }}
+              theme={isDarkMode ? 'dark' : 'light'}
+              magicLink={true}
+              providers={[]}
+              redirectTo={getTauriRedirectTo(false)}
+              localization={getAuthLocalization()}
+            />
+          </div>
+        </div>
       </div>
     </div>
   ) : (

apps/readest-app/src/app/user/components/Header.tsx

@@ -22,7 +22,10 @@ const ProfileHeader: React.FC<ProfileHeaderProps> = ({ onGoBack }) => {
         appService?.hasTrafficLight && 'pt-11',
       )}
     >
-      <button onClick={onGoBack} className={clsx('btn btn-ghost h-8 min-h-8 w-8 p-0')}>
+      <button
+        onClick={onGoBack}
+        className={clsx('btn btn-ghost h-12 min-h-12 w-12 p-0 sm:h-8 sm:min-h-8 sm:w-8')}
+      >
         <IoArrowBack className='text-base-content' />
       </button>
 

apps/readest-app/src/app/user/components/PlansComparison.tsx

@@ -44,13 +44,16 @@ const PlansComparison: React.FC<PlansComparisonProps> = ({
   };
 
   const handleTouchStart = (e: React.TouchEvent) => {
-    const touchStart = e.touches[0]!.clientX;
+    const touchStartX = e.touches[0]!.clientX;
+    const touchStartY = e.touches[0]!.clientY;
     const handleTouchMove = (moveEvent: TouchEvent) => {
-      const touchEnd = moveEvent.touches[0]!.clientX;
-      const diff = touchStart - touchEnd;
+      const touchEndX = moveEvent.touches[0]!.clientX;
+      const touchEndY = moveEvent.touches[0]!.clientY;
+      const diffX = touchStartX - touchEndX;
+      const diffY = touchStartY - touchEndY;
 
-      if (Math.abs(diff) > 50) {
-        if (diff > 0) {
+      if (Math.abs(diffX) > Math.abs(diffY) && Math.abs(diffX) > 50) {
+        if (diffX > 0) {
           handlePlanSwipe('left');
         } else {
           handlePlanSwipe('right');

apps/readest-app/src/app/user/page.tsx

@@ -191,7 +191,7 @@ const ProfilePage = () => {
   useEffect(() => {
     fetch(WEB_STRIPE_PLANS_URL)
       .then((res) => res.json())
-      .then((data) => setAvailablePlans(data));
+      .then((data) => setAvailablePlans(data || []));
   }, []);
 
   if (!mounted) {
@@ -219,14 +219,18 @@ const ProfilePage = () => {
   return (
     <div
       className={clsx(
-        'bg-base-100 fixed inset-0 select-none overflow-hidden',
+        'bg-base-100 inset-0 select-none overflow-hidden',
         appService?.isIOSApp ? 'h-[100vh]' : 'h-dvh',
         appService?.isLinuxApp && 'window-border',
         appService?.hasRoundedWindow && 'rounded-window',
-        appService?.hasSafeAreaInset && 'pt-[env(safe-area-inset-top)]',
       )}
     >
-      <div className='flex h-full w-full flex-col items-center overflow-y-auto'>
+      <div
+        className={clsx(
+          'flex h-full w-full flex-col items-center overflow-y-auto',
+          appService?.hasSafeAreaInset && 'pt-[env(safe-area-inset-top)]',
+        )}
+      >
         <ProfileHeader onGoBack={handleGoBack} />
         <div className='w-full min-w-60 max-w-4xl py-10'>
           {loading && (