diff --git a/public/css/components/calendar.css b/public/css/components/calendar.css
index 733fd2bdc..580e0becf 100644
--- a/public/css/components/calendar.css
+++ b/public/css/components/calendar.css
@@ -20,6 +20,10 @@
 	--calendar-past: var(--fhc-beige-20);
 }
 
+.fhc-calendar-pane {
+	height: var(--calendar-pane-height);
+}
+
 .fhc-calendar-hour-indicator{
 	border-top: 1px solid var(--calendar-border);
 }
diff --git a/public/js/components/Calendar/Pane.js b/public/js/components/Calendar/Pane.js
index abcf03744..6bc00752b 100644
--- a/public/js/components/Calendar/Pane.js
+++ b/public/js/components/Calendar/Pane.js
@@ -85,8 +85,8 @@ export default {
 	},
 	template: `
 	<div ref="carousel" class="calendar-pane carousel slide" @[\`slide.bs.carousel\`]="slide" @[\`slid.bs.carousel\`]="slid" :data-queue="queue">
-		<div id="calendarContainer" @wheel.prevent="scrollBehavior" @scroll="scrollCalendar" ref="calendarContainer" class="carousel-inner " style="height:var(--fhc-calendar-pane-height);">
-			<div ref="carouselItems" v-for="i in [...Array(3).keys()]" :key="i" class="carousel-item" style="height:var(--fhc-calendar-pane-height);">
+		<div id="calendarContainer" @wheel.prevent="scrollBehavior" @scroll="scrollCalendar" ref="calendarContainer" class="carousel-inner fhc-calendar-pane">
+			<div ref="carouselItems" v-for="i in [...Array(3).keys()]" :key="i" class="carousel-item fhc-calendar-pane">
 				<slot :active="i == activeCarouselItemIndex" :index="i" :offset="offsets[i]" />
 			</div>
 		</div>