diff --git a/frontend/src/elements/CalendarEvent.vue b/frontend/src/elements/CalendarEvent.vue
index 589b84377..8f0ec8309 100644
--- a/frontend/src/elements/CalendarEvent.vue
+++ b/frontend/src/elements/CalendarEvent.vue
@@ -48,17 +48,19 @@
             color: !eventData.tentative ? getAccessibleColor(eventData.calendar_color) : null,
           }"
         ></div>
-        <div
-          class="truncate rounded "
-          :class="{
-            'h-full border-2 border-dashed border-teal-500 p-1 font-semibold group-hover/event:border-white': placeholder,
-            '!border-none': isBooked,
-            'border-white': isSelected,
-          }"
-        >
-          <span v-if="eventData.preview">{{ formattedTimeRange(event) }}</span>
-          <span v-else-if="isBooked">{{ t('label.busy') }}</span>
-          <span v-else>{{ event.title }}</span>
+        <div class="grid">
+          <div
+            class="truncate rounded"
+            :class="{
+              'h-full border-2 border-dashed border-teal-500 p-1 font-semibold group-hover/event:border-white': placeholder,
+              '!border-none': isBooked,
+              'border-white': isSelected,
+            }"
+          >
+            <template v-if="eventData.preview">{{ formattedTimeRange(event) }}</template>
+            <template v-else-if="isBooked">{{ t('label.busy') }}</template>
+            <template v-else>{{ event.title }}</template>
+          </div>
         </div>
       </div>
     </div>