From 91f4b72a3a8f2cd934249d4cebb8785aea3b63e1 Mon Sep 17 00:00:00 2001
From: Mel <97147377+MelissaAutumn@users.noreply.github.com>
Date: Wed, 22 May 2024 13:13:29 -0700
Subject: [PATCH] Fix `whitespace: nowrap` expanding width of calendar days on
 month view. (#416)

---
 frontend/src/elements/CalendarEvent.vue | 24 +++++++++++++-----------
 1 file changed, 13 insertions(+), 11 deletions(-)

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>