From 0d189da32801ab8d843ebd9cff1b0d5bf71d19b6 Mon Sep 17 00:00:00 2001
From: Ivan Bondarenko <bondarenko.dev@gmail.com>
Date: Fri, 17 Jul 2026 20:55:02 +0200
Subject: [PATCH] fix: wrap long words in timeline to prevent horizontal scroll
 (#7819)

---
 .../components/Domain/Recipe/RecipeTimelineItem.vue    | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/frontend/app/components/Domain/Recipe/RecipeTimelineItem.vue b/frontend/app/components/Domain/Recipe/RecipeTimelineItem.vue
index a9b4373b0..2514d1d14 100644
--- a/frontend/app/components/Domain/Recipe/RecipeTimelineItem.vue
+++ b/frontend/app/components/Domain/Recipe/RecipeTimelineItem.vue
@@ -25,7 +25,7 @@
               {{ $d(new Date(event.timestamp || "")) }}
             </v-chip>
           </v-col>
-          <v-col v-else cols="9" style="margin: auto; text-align: center">
+          <v-col v-else cols="9" class="break-word" style="margin: auto; text-align: center">
             {{ event.subject }}
           </v-col>
           <v-col :cols="useMobileFormat ? 'auto' : '1'" class="px-0 pt-0">
@@ -68,7 +68,7 @@
       <v-card-text class="background">
         <v-row>
           <v-col>
-            <strong v-if="useMobileFormat">{{ event.subject }}</strong>
+            <strong v-if="useMobileFormat" class="break-word">{{ event.subject }}</strong>
             <v-img
               v-if="eventImageUrl"
               :src="eventImageUrl"
@@ -79,7 +79,7 @@
               :class="attrs.image.class"
               @error="hideImage = true"
             />
-            <div v-if="event.eventMessage" :class="useMobileFormat ? 'text-caption' : ''">
+            <div v-if="event.eventMessage" class="break-word" :class="useMobileFormat ? 'text-caption' : ''">
               <SafeMarkdown :source="event.eventMessage" />
             </div>
           </v-col>
@@ -179,4 +179,8 @@ const eventImageUrl = computed<string>(() => {
 .v-card::after {
   display: none;
 }
+
+.break-word {
+  overflow-wrap: anywhere;
+}
 </style>