layout: view menu now has a maximum width, closes #1459 (#1463)

* refactor: auth callback page

* layout: view menu now has a maximum width, closes #1459

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

@@ -1,42 +1,42 @@
 'use client';
 
+import { useEffect } from 'react';
 import { useRouter } from 'next/navigation';
-import { handleAuthCallback } from '@/helpers/auth';
 import { useAuth } from '@/context/AuthContext';
+import { handleAuthCallback } from '@/helpers/auth';
 
 export default function AuthCallback() {
   const router = useRouter();
   const { login } = useAuth();
 
-  if (typeof window === 'undefined') {
-    return null;
-  }
-  const hash = window.location.hash || '';
-  const params = new URLSearchParams(hash.slice(1));
+  useEffect(() => {
+    const hash = window.location.hash || '';
+    const params = new URLSearchParams(hash.slice(1));
 
-  const accessToken = params.get('access_token');
-  const refreshToken = params.get('refresh_token');
-  const type = params.get('type');
-  const next = params.get('next') ?? '/';
-  const error = params.get('error');
-  const errorDescription = params.get('error_description');
-  const errorCode = params.get('error_code');
+    const accessToken = params.get('access_token');
+    const refreshToken = params.get('refresh_token');
+    const type = params.get('type');
+    const next = params.get('next') ?? '/';
+    const error = params.get('error');
+    const errorDescription = params.get('error_description');
+    const errorCode = params.get('error_code');
 
-  handleAuthCallback({
-    accessToken,
-    refreshToken,
-    type,
-    next,
-    error,
-    errorCode,
-    errorDescription,
-    login,
-    navigate: router.push,
-  });
+    handleAuthCallback({
+      accessToken,
+      refreshToken,
+      type,
+      next,
+      error,
+      errorCode,
+      errorDescription,
+      login,
+      navigate: router.push,
+    });
+  }, [login, router]);
 
   return (
     <div className='fixed inset-0 z-50 flex items-center justify-center'>
-      <span className='loading loading-infinity loading-xl w-20'></span>
+      <span className='loading loading-infinity loading-xl w-20' />
     </div>
   );
 }

apps/readest-app/src/app/reader/components/ViewMenu.tsx

@@ -107,7 +107,14 @@ const ViewMenu: React.FC<ViewMenuProps> = ({
   return (
     <div
       tabIndex={0}
-      className='view-menu dropdown-content bgcolor-base-200 dropdown-right no-triangle border-base-200 z-20 mt-1 border shadow-2xl'
+      className={clsx(
+        'view-menu dropdown-content dropdown-right no-triangle z-20 mt-1 border',
+        'bgcolor-base-200 border-base-200 shadow-2xl',
+      )}
+      style={{
+        maxWidth: `${window.innerWidth - 40}px`,
+        marginRight: window.innerWidth < 640 ? '-36px' : '0px',
+      }}
     >
       <div className={clsx('flex items-center justify-between rounded-md')}>
         <button