💄 Change scrollbar behaviour

src/App.vue

@@ -25,9 +25,9 @@ function swipeHandler(direction) {
 
 <template>
   <TitleBar />
+  <DateSelector v-show="isDataView" />
   <div class="center" v-touch:swipe="swipeHandler">
     <main>
-      <DateSelector v-show="isDataView" />
       <LoadingElement :active="loading" v-show="isDataView" />
       <RouterView />
     </main>
@@ -55,7 +55,9 @@ body {
 .center {
   display: flex;
   justify-content: center;
-  min-height: 100vh;
+  height: calc(100vh - 99px);
+  overflow-y: auto;
+  overflow: overlay;
 }
 
 main {

src/assets/base.css

@@ -43,3 +43,18 @@
   font-weight: 200;
   src: url(/fonts/SourceSansPro-ExtraLight.ttf) format("truetype");
 }
+
+body {
+  overflow: hidden;
+}
+
+::-webkit-scrollbar {
+  width: 4px;
+}
+::-webkit-scrollbar-thumb {
+  background: #00000000;
+  border-radius: 3px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: #616060;
+}

src/components/date-selector.vue

@@ -28,7 +28,7 @@ const dayNames = [
 
 <style scoped>
 .selector {
-  padding: 65px 10px 0px 10px;
+  padding: 65px 10px 10px 10px;
   display: grid;
   grid-template-columns: 35px 1fr 35px;
   align-items: center;

src/views/HistoryView.vue

@@ -76,7 +76,7 @@ function getColor(type) {
   display: grid;
   min-height: 35px;
   border-radius: 11px;
-  margin: 10px 0px;
+  margin-bottom: 10px;
   padding: 10px 10px;
   grid-template-columns: min-content auto;
   gap: 5px;

src/views/SubstitutionView.vue

@@ -41,7 +41,7 @@ const substitutions = computed(() => {
   background-color: var(--substitution-background-unchanged);
   min-height: 50px;
   border-radius: 11px;
-  margin: 10px 0px;
+  margin-bottom: 10px;
   padding: 10px 15px;
   grid-template-columns: max-content auto;
   gap: 15px;

src/views/TimetableView.vue

@@ -118,7 +118,7 @@ function isCancelled(substitution) {
   background-color: var(--timetable-trust-warning-background);
   border-radius: 4px;
   padding: 3px 10px;
-  margin-top: 10px;
+  margin-bottom: 10px;
   width: max-content;
 }