From 54646f54d2972b520609b29b7e66e1ee9294a911 Mon Sep 17 00:00:00 2001
From: Ryderjj89 <raiden89@live.com>
Date: Sun, 14 Sep 2025 12:26:45 -0400
Subject: [PATCH] Fix mobile favorites menu positioning - prevent cutoff on
 mobile screens with responsive width and positioning adjustments

---
 frontend/src/components/FavoritesMenu.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/FavoritesMenu.tsx b/frontend/src/components/FavoritesMenu.tsx
index 0beca1e3..4117b445 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-[90vw] 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="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="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>