🎨 Improve CSS around Swiper component

src/components/day-carousel.vue

@@ -4,6 +4,7 @@ import { Swiper, SwiperSlide } from "swiper/vue";
 import { Virtual } from "swiper";
 import { ref, watch } from "vue";
 import { getDateSkippingWeekend } from "../util";
+import ScrollableContainer from "../components/scrollable-container.vue";
 
 defineProps({
   element: {
@@ -109,9 +110,9 @@ watch(changeDate, (date) => {
       :key="index"
       :virtualIndex="index"
     >
-      <div class="content">
+      <ScrollableContainer>
         <component :is="element" :date="date" />
-      </div>
+      </ScrollableContainer>
     </swiper-slide>
   </swiper>
 </template>
@@ -122,15 +123,9 @@ watch(changeDate, (date) => {
 
 <style scoped>
 .swiper {
-  padding: 10px;
+  padding: 5px 10px 0px 10px;
   z-index: 0;
   height: 100%;
-}
-
-.content {
-  height: calc(100% - 150px);
-  overflow-y: auto;
-  padding-bottom: 100px;
-  touch-action: pan-y;
+  box-sizing: border-box;
 }
 </style>

src/components/scrollable-container.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="scroll">
+    <div class="content">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.scroll {
+  overflow-y: auto;
+  touch-action: pan-y;
+  height: 100%;
+}
+
+.content {
+  padding-bottom: 90px;
+}
+</style>