fix: mobile audit — Explore's AI-ideas input unusable, chat FAB overlap
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.
This commit is contained in:
@@ -120,7 +120,10 @@ export default async function RecipePage({ params }: Params) {
|
|||||||
const VisibilityIcon = VISIBILITY_ICON[recipe.visibility];
|
const VisibilityIcon = VISIBILITY_ICON[recipe.visibility];
|
||||||
|
|
||||||
return (
|
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 />
|
<KeepScreenAwake />
|
||||||
{/* Header */}
|
{/* Header */}
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
|
|||||||
@@ -347,7 +347,7 @@ export function ExplorePageContent({ trending, recent, initialQuery, initialTab
|
|||||||
value={ideasPrompt}
|
value={ideasPrompt}
|
||||||
onChange={(e) => setIdeasPrompt(e.target.value)}
|
onChange={(e) => setIdeasPrompt(e.target.value)}
|
||||||
placeholder={t("aiSearchPlaceholder")}
|
placeholder={t("aiSearchPlaceholder")}
|
||||||
className="bg-background"
|
className="bg-background flex-1 min-w-0"
|
||||||
/>
|
/>
|
||||||
<Button
|
<Button
|
||||||
type="submit"
|
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"
|
className="shrink-0 bg-violet-600 text-white hover:bg-violet-700 dark:bg-violet-500 dark:hover:bg-violet-400"
|
||||||
>
|
>
|
||||||
{ideasLoading ? (
|
{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>
|
||||||
<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"
|
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>
|
</Button>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user