From 36e707b934d71e41d85a31f819be50e57f3e21fe Mon Sep 17 00:00:00 2001
From: Arnaud <anelissen@solem.fr>
Date: Mon, 13 Jul 2026 09:03:15 +0200
Subject: [PATCH] fix: recipes page action buttons and view-toggle row not
 mobile-optimized
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

"New recipe" kept its text label below sm:, so on mobile (especially
French, where "Importer une URL"/"Nouvelle recette" run long) it wrapped
to its own second line — icon-only now below sm:, matching the Sort/Filter
treatment from the previous mobile-spacing fix.

The view-toggle + Select row used justify-between with an empty filler
div outside select mode, pushing the controls flush right and leaving a
large dead gap on the left — same width as the row above it, but visually
disconnected. Now left-aligned outside select mode (justify-between still
applies inside select mode, where there's real content on both sides).

Verified at a real 390px mobile viewport in both English and French —
Generate/Import/New now share one row, and the view-toggle row starts
flush left instead of floating on the right with empty space before it.
---
 apps/web/components/recipe/recipes-grid.tsx   | 6 ++----
 apps/web/components/recipe/recipes-header.tsx | 2 +-
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/apps/web/components/recipe/recipes-grid.tsx b/apps/web/components/recipe/recipes-grid.tsx
index ffe93d7..7c1e8db 100644
--- a/apps/web/components/recipe/recipes-grid.tsx
+++ b/apps/web/components/recipe/recipes-grid.tsx
@@ -480,8 +480,8 @@ export function RecipesGrid({ recipes: initialRecipes }: { recipes: Recipe[] })
   return (
     <div className="space-y-4">
       {/* Toolbar */}
-      <div className="flex items-center justify-between min-h-[36px] gap-3">
-        {selectMode ? (
+      <div className={cn("flex items-center min-h-[36px] gap-3", selectMode && "justify-between")}>
+        {selectMode && (
           <div className="flex items-center gap-3">
             <button onClick={toggleAll} className="text-sm font-medium text-primary hover:underline">
               {allSelected ? t("deselectAll") : t("selectAll")}
@@ -490,8 +490,6 @@ export function RecipesGrid({ recipes: initialRecipes }: { recipes: Recipe[] })
               {selected.size > 0 ? t("selectedCount", { count: selected.size }) : t("clickToSelect")}
             </span>
           </div>
-        ) : (
-          <div />
         )}
         <div className="flex items-center gap-2">
           <ViewToggle value={viewMode} onChange={changeViewMode} />
diff --git a/apps/web/components/recipe/recipes-header.tsx b/apps/web/components/recipe/recipes-header.tsx
index 09cd625..7dff83f 100644
--- a/apps/web/components/recipe/recipes-header.tsx
+++ b/apps/web/components/recipe/recipes-header.tsx
@@ -148,7 +148,7 @@ export function RecipesHeader({
             </Button>
             <Link href="/recipes/new" className={cn(buttonVariants({ variant: "ghost", size: "sm" }), "gap-1.5")}>
               <PlusCircle className="h-4 w-4" />
-              {t("new")}
+              <span className="hidden sm:inline">{t("new")}</span>
             </Link>
           </div>
         </div>