fix(VCalendar): stop day row content overflowing its parent (#19340)

fixes #18968 Co-authored-by: John Leider <john@vuetifyjs.com>
vuetifyjs · Mar 6, 2024 · 9049888 · 9049888
1 parent 3f6a960
commit 9049888
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 2 deletions.
diff --git a/packages/vuetify/src/labs/VCalendar/VCalendarInterval.sass b/packages/vuetify/src/labs/VCalendar/VCalendarInterval.sass
@@ -33,6 +33,7 @@
   border-right: $calendar-line-width solid $calendar-line-color
 
   .v-calendar-day__row-content
+    overflow: hidden
     border-bottom: $calendar-line-width solid $calendar-line-color
 
     &.v-calendar-day__row-content-through

diff --git a/packages/vuetify/src/labs/VCalendar/VCalendarIntervalEvent.sass b/packages/vuetify/src/labs/VCalendar/VCalendarIntervalEvent.sass
@@ -0,0 +1,6 @@
+.v-calendar-internal-event
+  overflow: hidden
+  padding: 4px
+  text-overflow: ellipsis
+  white-space: nowrap
+  // width: 100%
diff --git a/packages/vuetify/src/labs/VCalendar/VCalendarIntervalEvent.tsx b/packages/vuetify/src/labs/VCalendar/VCalendarIntervalEvent.tsx
@@ -1,3 +1,6 @@
+// Styles
+import './VCalendarIntervalEvent.sass'
+
 // Components
 import { VSheet } from '@/components/VSheet'
 
@@ -55,8 +58,8 @@ export const VCalendarIntervalEvent = genericComponent()({
         <VSheet
           height={ calcHeight().height }
           density="comfortable"
-          style={ `width: 100%; margin-top: ${calcHeight().margin}` }
-          class="align-center pa-1"
+          style={ `margin-top: ${calcHeight().margin}` }
+          class="v-calendar-internal-event"
           color={ props.event?.color ?? undefined }
           rounded={ props.event?.first && props.event?.last
             ? true