From bda3608ff04dbf62059d05d1b4d148dadaaa9a9d Mon Sep 17 00:00:00 2001
From: Ryderjj89 <raiden89@live.com>
Date: Sun, 14 Sep 2025 12:33:34 -0400
Subject: [PATCH] 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                      | 22 ++++++++++++++--------
 frontend/src/components/FavoritesMenu.tsx |  2 +-
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 15410b9e..be0f404d 100644
--- a/frontend/src/App.tsx
+++ b/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>
diff --git a/frontend/src/components/FavoritesMenu.tsx b/frontend/src/components/FavoritesMenu.tsx
index 4117b445..d925d438 100644
--- a/frontend/src/components/FavoritesMenu.tsx
+++ b/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>