Mirrors/mealie
1
0
Fork 0
mirror of https://github.com/mealie-recipes/mealie.git synced 2026-07-18 13:40:16 -04:00
Code Issues Packages Projects Releases Wiki Activity

fix: wrap long words in timeline to prevent horizontal scroll (#7819)

Browse Source
This commit is contained in:
Ivan Bondarenko
2026-07-17 20:55:02 +02:00
committed by GitHub
parent 4eae486908
commit 0d189da328
1 changed files with 7 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/app/components/Domain/Recipe/RecipeTimelineItem.vue
View File

@@ -25,7 +25,7 @@
{{ $d(new Date(event.timestamp || "")) }} {{ $d(new Date(event.timestamp || "")) }}
</v-chip> </v-chip>
</v-col> </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 }} {{ event.subject }}
</v-col> </v-col>
<v-col :cols="useMobileFormat ? 'auto' : '1'" class="px-0 pt-0"> <v-col :cols="useMobileFormat ? 'auto' : '1'" class="px-0 pt-0">
@@ -68,7 +68,7 @@
<v-card-text class="background"> <v-card-text class="background">
<v-row> <v-row>
<v-col> <v-col>
<strong v-if="useMobileFormat">{{ event.subject }}</strong> <strong v-if="useMobileFormat" class="break-word">{{ event.subject }}</strong>
<v-img <v-img
v-if="eventImageUrl" v-if="eventImageUrl"
:src="eventImageUrl" :src="eventImageUrl"
@@ -79,7 +79,7 @@
:class="attrs.image.class" :class="attrs.image.class"
@error="hideImage = true" @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" /> <SafeMarkdown :source="event.eventMessage" />
</div> </div>
</v-col> </v-col>
@@ -179,4 +179,8 @@ const eventImageUrl = computed<string>(() => {
.v-card::after { .v-card::after {
display: none; display: none;
} }
.break-word {
overflow-wrap: anywhere;
}
</style> </style>