From 6f1fee551102d4862addf155051bc0c8e035c44e Mon Sep 17 00:00:00 2001
From: Aurelien <47290623+AurelienPautet@users.noreply.github.com>
Date: Fri, 14 Nov 2025 16:45:36 +0100
Subject: [PATCH] fix: Make Ingredients and Instructions independently
 scrollable in cook mode (#6358)

Co-authored-by: Michael Genson <71845777+michael-genson@users.noreply.github.com>
---
 frontend/components/Domain/Recipe/RecipePage/RecipePage.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/frontend/components/Domain/Recipe/RecipePage/RecipePage.vue b/frontend/components/Domain/Recipe/RecipePage/RecipePage.vue
index 05cdaba56..7d461c7ab 100644
--- a/frontend/components/Domain/Recipe/RecipePage/RecipePage.vue
+++ b/frontend/components/Domain/Recipe/RecipePage/RecipePage.vue
@@ -95,9 +95,12 @@
       <RecipePrintContainer :recipe="recipe" :scale="scale" />
     </v-container>
     <!-- Cook mode displayes two columns with ingredients and instructions side by side, each being scrolled individually, allowing to view both at the same time -->
+    <!-- The calc is to account for the navabar height (48px) -->
     <v-sheet
       v-show="isCookMode && !hasLinkedIngredients"
       key="cookmode"
+      :height="$vuetify.display.smAndUp ? 'calc(100vh - 48px)' : 'auto'"
+      className="overflow-hidden"
     >
       <!-- the calc is to account for the toolbar a more dynamic solution could be needed  -->
       <v-row style="height: 100%" no-gutters class="overflow-hidden">