Move favorites menu below header to fix mobile cutoff - positioned in layout flow instead of absolute positioning for better mobile experience

frontend/src/App.tsx

@@ -379,15 +379,8 @@ function App() {
               )}
             </div>
 
-            {/* User Authentication, Favorites & Dark Mode */}
+            {/* User Authentication & Dark Mode */}
             <div className="flex items-center space-x-2">
-              {/* Favorites Menu - Only for authenticated users */}
-              <FavoritesMenu 
-                user={user}
-                formatBookName={formatBookName}
-                getBookUrlName={getBookUrlName}
-              />
-
               {/* Authentication Button */}
               {authAvailable && (
                 <div>
@@ -432,6 +425,19 @@ function App() {
         </div>
       </header>
 
+      {/* Favorites Menu - Positioned below header for authenticated users */}
+      {user && (
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-2">
+          <div className="flex justify-end">
+            <FavoritesMenu 
+              user={user}
+              formatBookName={formatBookName}
+              getBookUrlName={getBookUrlName}
+            />
+          </div>
+        </div>
+      )}
+
       {/* Main Content */}
       <main className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
         <Routes>

frontend/src/components/FavoritesMenu.tsx

@@ -166,7 +166,7 @@ const FavoritesMenu: React.FC<FavoritesMenuProps> = ({ user, formatBookName, get
 
       {/* Favorites Dropdown */}
       {isOpen && (
-        <div className="absolute top-full right-0 mt-2 w-80 max-w-[calc(100vw-2rem)] sm:max-w-80 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg z-50 max-h-96 overflow-hidden transform sm:transform-none -translate-x-4 sm:translate-x-0">
+        <div className="absolute top-full right-0 mt-2 w-80 max-w-[calc(100vw-1rem)] bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg z-50 max-h-96 overflow-hidden">
           <div className="p-3 border-b border-gray-200 dark:border-gray-700">
             <div className="flex items-center justify-between">
               <h3 className="font-medium text-gray-900 dark:text-gray-100">My Favorites</h3>