fix: recipes page action buttons and view-toggle row not mobile-optimized

"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

@@ -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} />

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>