feat: favorite button on the My Recipes grid; fix mobile overflow in bulk-action bar

- Added a heart toggle to all three recipe-grid views (grid card overlay,
  list row, compact row), hidden while in multi-select mode. Detail page
  already had it; this was the other place it made sense.
- recipes/page.tsx now fetches which of the current page's recipes are
  already favorited and passes it through.
- FavoriteButton gained an optional iconClassName so the unfavorited heart
  reads on a photo overlay (was invisible in light mode against the dark
  backdrop — filled/favorited state was already fine since it's opaque red).
- Fixed the floating bulk-select action bar overflowing both edges of the
  viewport on mobile (screenshotted: centered with no max-width, wider
  than the screen, clipping "Supprimer" on one side and the selected-count
  label on the other). Now caps to viewport width, scrolls horizontally
  as a fallback, and drops button text labels below sm (icon + aria-label
  + tooltip only), matching the icon-row convention used elsewhere.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

apps/web/components/social/favorite-button.tsx

@@ -12,11 +12,14 @@ export function FavoriteButton({
   recipeId,
   initialFavorited = false,
   onToggle,
+  iconClassName,
 }: {
   recipeId: string;
   initialFavorited?: boolean;
   /** Called after a successful toggle, e.g. to remove the recipe from a "Favorites" list view. */
   onToggle?: (favorited: boolean) => void;
+  /** Extra classes for the heart icon when unfavorited — e.g. forcing a light color when the button overlays a photo. */
+  iconClassName?: string;
 }) {
   const tCommon = useTranslations("common");
   const tSocial = useTranslations("social");
@@ -52,7 +55,7 @@ export function FavoriteButton({
             disabled={loading}
             aria-label={favorited ? tSocial("favoriteRemove") : tSocial("favoriteAdd")}
           >
-            <Heart className={cn("h-4 w-4", favorited && "fill-red-500 text-red-500")} />
+            <Heart className={cn("h-4 w-4", favorited ? "fill-red-500 text-red-500" : iconClassName)} />
           </Button>
         } />
         <TooltipContent>{favorited ? "Saved" : "Save"}</TooltipContent>