🎨 Improve CSS around Swiper component

src/views/HistoryView.vue

@@ -4,13 +4,5 @@ import HistoryList from "../components/history-list.vue";
 </script>
 
 <template>
-  <div class="history">
-    <DayCarousel :element="HistoryList" />
-  </div>
+  <DayCarousel :element="HistoryList" />
 </template>
-
-<style scoped>
-.history {
-  height: 100%;
-}
-</style>

src/views/SettingsView.vue

@@ -1,4 +1,5 @@
 <script setup>
+import ScrollableContainer from "../components/scrollable-container.vue";
 import {
   classList,
   classFilter,
@@ -13,7 +14,7 @@ const gitHash = GITVERSION;
 </script>
 
 <template>
-  <div class="settings">
+  <ScrollableContainer class="settings">
     <!-- Filtering -->
     <h2>{{ $t("settings.heading.filtering") }}</h2>
     <p>{{ $t("settings.text.filtering") }}</p>
@@ -70,15 +71,12 @@ const gitHash = GITVERSION;
     <p>{{ $t("settings.text.about") }}</p>
     <div class="spacer"></div>
     <p class="gray">{{ $t("settings.version") }}: {{ gitHash }}</p>
-  </div>
+  </ScrollableContainer>
 </template>
 
 <style scoped>
 .settings {
-  padding: 15px 10px 80px 10px;
-  height: calc(100% - 100px);
-  overflow-y: auto;
-  padding-bottom: 90px;
+  padding: 15px 10px 0px 10px;
 }
 
 h2 {

src/views/SubstitutionView.vue

@@ -4,13 +4,5 @@ import SubstitutionList from "../components/substitution-list.vue";
 </script>
 
 <template>
-  <div class="substitutions">
-    <DayCarousel :element="SubstitutionList" />
-  </div>
+  <DayCarousel :element="SubstitutionList" />
 </template>
-
-<style scoped>
-.substitutions {
-  height: 100%;
-}
-</style>

src/views/TimetableView.vue

@@ -11,13 +11,5 @@ import TimetableList from "../components/timetable-list.vue";
     :options="classList"
     v-model="classFilter"
   />
-  <div class="timetable">
-    <DayCarousel :element="TimetableList" />
-  </div>
+  <DayCarousel v-show="classFilter != 'none'" :element="TimetableList" />
 </template>
-
-<style scoped>
-.timetable {
-  height: 100%;
-}
-</style>