From 7060957f083ada4607d8e4e88a0fb46e42703de6 Mon Sep 17 00:00:00 2001 From: Gustavo Hidalgo Date: Sun, 14 Jun 2026 22:15:29 -0400 Subject: [PATCH] Scroll to top when navigating between recipes Tapping a recommended recipe navigates to the same /recipes/details pathname with a different ?id= query, so React Router does not reset the scroll position and the user lands mid-page. Scroll to the top whenever the recipe id changes. Co-Authored-By: Claude Sonnet 4.6 --- .../client-app/src/components/Recipe/RecipePage.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/CookTime/client-app/src/components/Recipe/RecipePage.tsx b/src/CookTime/client-app/src/components/Recipe/RecipePage.tsx index 2cfcfb3..52e9184 100644 --- a/src/CookTime/client-app/src/components/Recipe/RecipePage.tsx +++ b/src/CookTime/client-app/src/components/Recipe/RecipePage.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import { Alert, Row, Toast, ToastContainer } from 'react-bootstrap'; import { RecipeProvider, useRecipeContext } from './RecipeContext'; import { RecipeHeader } from './RecipeHeader'; @@ -82,6 +82,13 @@ function RecipePageContent({ recipeId }: { recipeId: string }) { } export function RecipePage({ recipeId, generatedRecipe }: RecipePageProps) { + // Navigating between recipes (e.g. tapping a recommended recipe) keeps the same + // /recipes/details pathname and only changes the ?id= query, so the router does + // not scroll. Reset the scroll position whenever the recipe changes. + useEffect(() => { + window.scrollTo(0, 0); + }, [recipeId]); + return (