🐛 Fix height of "center" element

src/App.vue

@@ -24,15 +24,17 @@ function swipeHandler(direction) {
 </script>
 
 <template>
-  <TitleBar />
-  <DateSelector v-show="isDataView" />
-  <div class="center" v-touch:swipe="swipeHandler">
-    <main>
-      <LoadingElement :active="loading" v-show="isDataView" />
-      <RouterView />
-    </main>
+  <div class="app">
+    <TitleBar />
+    <DateSelector v-show="isDataView" />
+    <div class="center" v-touch:swipe="swipeHandler">
+      <main>
+        <LoadingElement :active="loading" v-show="isDataView" />
+        <RouterView />
+      </main>
+    </div>
+    <BottomNavbar v-show="$route.name != 'title.login'" />
   </div>
-  <BottomNavbar v-show="$route.name != 'title.login'" />
 </template>
 
 <style>
@@ -52,10 +54,15 @@ body {
   font-family: var(--font-family);
 }
 
+.app {
+  display: grid;
+  grid-template-rows: auto auto 1fr;
+  height: 100vh;
+}
+
 .center {
   display: flex;
   justify-content: center;
-  height: calc(100vh - 99px);
   overflow-y: auto;
   overflow: overlay;
 }

src/components/date-selector.vue

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

src/components/titlebar-element.vue

@@ -31,7 +31,6 @@ function goBack() {
 
 <style scoped>
 .titlebar {
-  position: fixed;
   width: 100%;
   height: 55px;
   background-color: var(--titlebar-color);

src/views/SettingsView.vue

@@ -64,7 +64,7 @@ const gitHash = GITVERSION;
 
 <style scoped>
 .settings {
-  padding: 65px 10px 80px 10px;
+  padding: 15px 10px 80px 10px;
 }
 
 h2 {

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-bottom: 10px;
+  margin: 5px 0px;
   width: max-content;
 }