fix: recipe timeline UI glitches (#2519)

* fix invalid undefined prop

* fixed weird rendering

* made items pop more against background

* fixed invalid v-if

* fixed indentation

frontend/components/Domain/Recipe/RecipeCardMobile.vue

@@ -17,7 +17,7 @@
           :image-version="image"
         />
       </v-img>
-      <v-list-item three-line class="px-0">
+      <v-list-item three-line :class="vertical ? 'px-2' : 'px-0'">
         <slot v-if="!vertical" name="avatar">
           <v-list-item-avatar tile size="125" class="v-mobile-img rounded-sm my-0">
             <RecipeCardImage

frontend/components/Domain/Recipe/RecipeTimeline.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :style="maxHeight ? `max-height: ${maxHeight}; overflow-y: auto;` : ''" @scroll="onScroll($event)">
+  <div style="height: 100%;">
     <v-row class="my-0 mx-7">
       <v-spacer />
       <v-col class="text-right">
@@ -8,12 +8,14 @@
         </v-btn>
       </v-col>
     </v-row>
+    <v-divider class="mx-2" />
     <div
       v-if="timelineEvents.length"
       id="timeline-container"
       height="fit-content"
       width="100%"
       class="px-1"
+      :style="maxHeight ? `max-height: ${maxHeight}; overflow-y: auto;` : ''"
     >
       <v-timeline :dense="$vuetify.breakpoint.smAndDown" class="timeline">
         <RecipeTimelineItem

frontend/components/Domain/Recipe/RecipeTimelineBadge.vue

@@ -15,7 +15,7 @@
         </v-icon>
       </v-btn>
       <BaseDialog v-model="showTimeline" :title="timelineAttrs.title" :icon="$globals.icons.timelineText" width="70%">
-        <RecipeTimeline v-model="showTimeline" :query-filter="timelineAttrs.queryFilter" max-height="70vh" />
+        <RecipeTimeline v-model="showTimeline" :query-filter="timelineAttrs.queryFilter" max-height="60vh" />
       </BaseDialog>
 
     </template>

frontend/components/Domain/Recipe/RecipeTimelineItem.vue

@@ -11,28 +11,29 @@
         {{ new Date(event.timestamp+"Z").toLocaleDateString($i18n.locale) }}
       </v-chip>
     </template>
-      <v-card
-        hover
-        :to="$listeners.selected ? undefined : `/recipe/${recipe.slug}`"
-        @click="$emit('selected')">
-        <v-sheet>
-        <v-card-title class="bg-primary">
-            <v-row>
-            <v-col align-self="center" :cols="useMobileFormat ? 'auto' : '2'" :class="attrs.avatar.class">
-                <UserAvatar :user-id="event.userId" :size="attrs.avatar.size" />
-            </v-col>
-            <v-col v-if="useMobileFormat" align-self="center" class="pr-0">
-                <v-chip label>
-                <v-icon> {{ $globals.icons.calendar }} </v-icon>
-                {{ new Date(event.timestamp+"Z").toLocaleDateString($i18n.locale) }}
-                </v-chip>
-            </v-col>
-            <v-col v-else cols="9" style="margin: auto; text-align: center;">
-                {{ event.subject }}
-            </v-col>
-            <v-spacer />
-            <v-col :cols="useMobileFormat ? 'auto' : '1'" class="px-0 pt-0">
-                <RecipeTimelineContextMenu
+    <v-card
+      hover
+      :to="$listeners.selected || !recipe ? undefined : `/recipe/${recipe.slug}`"
+      @click="$emit('selected')"
+      class="elevation-12"
+    >
+      <v-card-title class="background">
+        <v-row>
+          <v-col align-self="center" :cols="useMobileFormat ? 'auto' : '2'" :class="attrs.avatar.class">
+              <UserAvatar :user-id="event.userId" :size="attrs.avatar.size" />
+          </v-col>
+          <v-col v-if="useMobileFormat" align-self="center" class="pr-0">
+              <v-chip label>
+              <v-icon> {{ $globals.icons.calendar }} </v-icon>
+              {{ new Date(event.timestamp+"Z").toLocaleDateString($i18n.locale) }}
+              </v-chip>
+          </v-col>
+          <v-col v-else cols="9" style="margin: auto; text-align: center;">
+              {{ event.subject }}
+          </v-col>
+          <v-spacer />
+          <v-col :cols="useMobileFormat ? 'auto' : '1'" class="px-0 pt-0">
+              <RecipeTimelineContextMenu
                 v-if="$auth.user && $auth.user.id == event.userId && event.eventType != 'system'"
                 :menu-top="false"
                 :event="event"
@@ -48,48 +49,47 @@
                 }"
                 @update="$emit('update')"
                 @delete="$emit('delete')"
-                />
-            </v-col>
-            </v-row>
-        </v-card-title>
-        <v-card-text v-if="showRecipeCards && recipe">
-            <v-row :class="useMobileFormat ? 'py-3 mx-0' : 'py-3 mx-0'" style="max-width: 100%;">
-              <v-col align-self="center" class="pa-0">
-              <RecipeCardMobile
-                :vertical="useMobileFormat"
-                :name="recipe.name"
-                :slug="recipe.slug"
-                :description="recipe.description"
-                :rating="recipe.rating"
-                :image="recipe.image"
-                :recipe-id="recipe.id"
-                :is-flat="true"
               />
-            </v-col>
-            </v-row>
-        </v-card-text>
-        </v-sheet>
-        <v-divider v-if="showRecipeCards && recipe && (useMobileFormat || event.eventMessage)" />
-        <v-card-text v-if="showRecipeCards && recipe && (useMobileFormat || event.eventMessage)">
-            <v-row>
-            <v-col>
-                <strong v-if="useMobileFormat">{{ event.subject }}</strong>
-                <v-img
-                  v-if="eventImageUrl"
-                  :src="eventImageUrl"
-                  min-height="50"
-                  :height="hideImage ? undefined : 'auto'"
-                  :max-height="attrs.image.maxHeight"
-                  contain
-                  :class=attrs.image.class
-                  @error="hideImage = true"
-                />
-                <div v-if="event.eventMessage" :class="useMobileFormat ? 'text-caption' : ''">
-                {{ event.eventMessage }}
-                </div>
-            </v-col>
-            </v-row>
-        </v-card-text>
+          </v-col>
+        </v-row>
+      </v-card-title>
+      <v-card-text v-if="showRecipeCards && recipe" class="background">
+          <v-row :class="useMobileFormat ? 'py-3 mx-0' : 'py-3 mx-0'" style="max-width: 100%;">
+            <v-col align-self="center" class="pa-0">
+            <RecipeCardMobile
+              :vertical="useMobileFormat"
+              :name="recipe.name"
+              :slug="recipe.slug"
+              :description="recipe.description"
+              :rating="recipe.rating"
+              :image="recipe.image"
+              :recipe-id="recipe.id"
+              :is-flat="true"
+            />
+          </v-col>
+          </v-row>
+      </v-card-text>
+      <v-divider v-if="showRecipeCards && recipe && (useMobileFormat || event.eventMessage)" />
+      <v-card-text class="background">
+        <v-row>
+          <v-col>
+              <strong v-if="useMobileFormat">{{ event.subject }}</strong>
+              <v-img
+                v-if="eventImageUrl"
+                :src="eventImageUrl"
+                min-height="50"
+                :height="hideImage ? undefined : 'auto'"
+                :max-height="attrs.image.maxHeight"
+                contain
+                :class=attrs.image.class
+                @error="hideImage = true"
+              />
+              <div v-if="event.eventMessage" :class="useMobileFormat ? 'text-caption' : ''">
+              {{ event.eventMessage }}
+              </div>
+          </v-col>
+        </v-row>
+      </v-card-text>
     </v-card>
   </v-timeline-item>
 </template>
@@ -201,4 +201,4 @@ export default defineComponent({
 .v-card::after {
   display: none;
 }
-</style>
+</style>