From 6818f10fc44968a58f8eb24197e8a3dc08507908 Mon Sep 17 00:00:00 2001
From: Arnaud <anelissen@solem.fr>
Date: Mon, 13 Jul 2026 09:25:20 +0200
Subject: [PATCH] =?UTF-8?q?fix:=20mobile=20audit=20=E2=80=94=20Explore's?=
 =?UTF-8?q?=20AI-ideas=20input=20unusable,=20chat=20FAB=20overlap?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Swept meal-plan, shopping-lists, pantry, nutrition, explore, feed,
collections, recipe detail/edit, and settings sub-pages at a real 390px
viewport. Two real bugs found (rest checked out clean — the meal-plan
calendar and settings tabs' horizontal scroll are intentional, not bugs):

- Explore's "Recipe ideas" input had no flex-basis and both buttons kept
  full text labels, squeezing the input down to ~2 visible characters
  on mobile. Input now flex-1, buttons icon-only below sm: (same pattern
  as the recipes-page Sort/Filter fix).
- Recipe detail page had no bottom clearance, so the fixed per-recipe
  chat button could sit directly on top of the private-notes Save
  button on short pages. Added pb-20, matching recipe-form.tsx's
  existing floating-save-bar clearance.

Verified both live at 390px: input now shows real placeholder text with
tappable icon buttons alongside it; Save button now clears the chat FAB
with real spacing.
---
 apps/web/app/(app)/recipes/[id]/page.tsx            | 5 ++++-
 apps/web/components/search/explore-page-content.tsx | 8 ++++----
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/apps/web/app/(app)/recipes/[id]/page.tsx b/apps/web/app/(app)/recipes/[id]/page.tsx
index f6a3271..5eff044 100644
--- a/apps/web/app/(app)/recipes/[id]/page.tsx
+++ b/apps/web/app/(app)/recipes/[id]/page.tsx
@@ -120,7 +120,10 @@ export default async function RecipePage({ params }: Params) {
   const VisibilityIcon = VISIBILITY_ICON[recipe.visibility];
 
   return (
-    <div className="max-w-4xl mx-auto space-y-8">
+    <div className="max-w-4xl mx-auto space-y-8 pb-20">
+      {/* pb-20 keeps the last section (private notes' Save button) clear of
+          the fixed recipe-chat button, which otherwise overlaps it on short
+          pages — same fix as recipe-form.tsx's floating save bar. */}
       <KeepScreenAwake />
       {/* Header */}
       <div className="space-y-4">
diff --git a/apps/web/components/search/explore-page-content.tsx b/apps/web/components/search/explore-page-content.tsx
index 8f8099a..6e2e896 100644
--- a/apps/web/components/search/explore-page-content.tsx
+++ b/apps/web/components/search/explore-page-content.tsx
@@ -347,7 +347,7 @@ export function ExplorePageContent({ trending, recent, initialQuery, initialTab
                 value={ideasPrompt}
                 onChange={(e) => setIdeasPrompt(e.target.value)}
                 placeholder={t("aiSearchPlaceholder")}
-                className="bg-background"
+                className="bg-background flex-1 min-w-0"
               />
               <Button
                 type="submit"
@@ -355,9 +355,9 @@ export function ExplorePageContent({ trending, recent, initialQuery, initialTab
                 className="shrink-0 bg-violet-600 text-white hover:bg-violet-700 dark:bg-violet-500 dark:hover:bg-violet-400"
               >
                 {ideasLoading ? (
-                  <span className="flex items-center gap-2"><Wand2 className="h-4 w-4 animate-pulse" /> {t("generating")}</span>
+                  <span className="flex items-center gap-2"><Wand2 className="h-4 w-4 animate-pulse" /> <span className="hidden sm:inline">{t("generating")}</span></span>
                 ) : (
-                  <span className="flex items-center gap-2"><Wand2 className="h-4 w-4" /> {t("getIdeas")}</span>
+                  <span className="flex items-center gap-2"><Wand2 className="h-4 w-4" /> <span className="hidden sm:inline">{t("getIdeas")}</span></span>
                 )}
               </Button>
               <Button
@@ -372,7 +372,7 @@ export function ExplorePageContent({ trending, recent, initialQuery, initialTab
                 }}
                 className="shrink-0 bg-background/80 border-violet-300 text-violet-700 hover:bg-background hover:text-violet-800 dark:border-violet-700 dark:text-violet-300 dark:hover:text-violet-200"
               >
-                <span className="flex items-center gap-2"><Shuffle className="h-4 w-4" /> {t("surpriseMe")}</span>
+                <span className="flex items-center gap-2"><Shuffle className="h-4 w-4" /> <span className="hidden sm:inline">{t("surpriseMe")}</span></span>
               </Button>
             </form>