From 3d1b76bcada2ee92b40e446f0d01c39415bd0126 Mon Sep 17 00:00:00 2001
From: Kuchenpirat <24235032+Kuchenpirat@users.noreply.github.com>
Date: Thu, 27 Feb 2025 14:48:29 +0100
Subject: [PATCH] fix: update recipe time row direction on small screens
 (#5107)

---
 .../RecipePage/RecipePageParts/RecipePageInfoCard.vue  |  4 ++--
 frontend/components/Domain/Recipe/RecipeTimeCard.vue   | 10 +++++++---
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInfoCard.vue b/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInfoCard.vue
index ed4683366..5e11391cd 100644
--- a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInfoCard.vue
+++ b/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInfoCard.vue
@@ -15,9 +15,9 @@
           <v-divider class="my-2" />
           <SafeMarkdown :source="recipe.description" />
           <v-divider v-if="recipe.description" />
-          <v-container class="d-flex flex-row flex-wrap justify-center align-center">
+          <v-container class="d-flex flex-row flex-wrap justify-center">
             <div class="mx-6">
-              <v-row no-gutters class="mb-1">
+              <v-row no-gutters>
                 <v-col v-if="recipe.recipeYieldQuantity || recipe.recipeYield" cols="12" class="d-flex flex-wrap justify-center">
                   <RecipeYield
                     :yield-quantity="recipe.recipeYieldQuantity"
diff --git a/frontend/components/Domain/Recipe/RecipeTimeCard.vue b/frontend/components/Domain/Recipe/RecipeTimeCard.vue
index f0a6b6dbc..4aa555ce5 100644
--- a/frontend/components/Domain/Recipe/RecipeTimeCard.vue
+++ b/frontend/components/Domain/Recipe/RecipeTimeCard.vue
@@ -12,15 +12,19 @@
     <v-divider v-if="validateTotalTime && (validatePrepTime || validatePerformTime)" class="my-2" />
     <!-- Prep Time & Perform Time -->
     <div v-if="validatePrepTime || validatePerformTime" class="time-card-flex mx-auto">
-      <v-row no-gutters class="d-flex justify-center align-center" style="width: 100%;" :style="fontSize">
-        <div v-if="validatePrepTime" class="d-flex flex-no-wrap">
+      <v-row
+        no-gutters
+        class="d-flex justify-center align-center" :class="{'flex-column': $vuetify.breakpoint.smAndDown}"
+        style="width: 100%;" :style="fontSize"
+      >
+        <div v-if="validatePrepTime" class="d-flex flex-no-wrap my-1">
           <v-icon :large="!small" :dense="small" left color="primary">
             {{ $globals.icons.knfife }}
           </v-icon>
           <p class="my-0"><span class="font-weight-bold">{{ validatePrepTime.name }}</span><br>{{ validatePrepTime.value }}</p>
         </div>
         <v-divider v-if="validatePrepTime && validatePerformTime" vertical class="mx-4" />
-        <div v-if="validatePerformTime" class="d-flex flex-no-wrap">
+        <div v-if="validatePerformTime" class="d-flex flex-no-wrap my-1">
           <v-icon :large="!small" :dense="small" left color="primary">
             {{ $globals.icons.potSteam }}
           </v-icon>