fix(Footer): footer sometimes overlapped or didn't stick to bottom

frontend/App.vue

@@ -1,8 +1,8 @@
 <template>
-	<div>
+	<div class="upper-container">
 		<banned v-if="banned" />
-		<div v-else>
-			<router-view :key="$route.fullPath" />
+		<div v-else class="upper-container">
+			<router-view :key="$route.fullPath" class="main-container" />
 			<what-is-new />
 			<mobile-alert />
 			<login-modal v-if="modals.header.login" />
@@ -208,12 +208,28 @@ body.night-mode {
 
 html {
 	overflow: auto !important;
+	height: 100%;
 }
 
 body {
 	background-color: $light-grey;
 	color: $dark-grey;
 	font-family: "Roboto", Helvetica, Arial, sans-serif;
+	height: 100%;
+}
+
+.upper-container {
+	height: 100%;
+}
+
+.main-container {
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+
+	> .container {
+		flex: 1 0 auto;
+	}
 }
 
 a {

frontend/components/MainFooter.vue

@@ -107,10 +107,7 @@ export default {
 }
 
 .footer {
-	position: absolute;
-	right: 0;
-	bottom: 0;
-	left: 0;
+	flex-shrink: 0;
 	height: 240px;
 	padding: 40px 20px 40px;
 	border-radius: 33% 33% 0% 0% / 7% 7% 0% 0%;

frontend/components/MainHeader.vue

@@ -121,6 +121,7 @@ export default {
 }
 
 .nav {
+	flex-shrink: 0;
 	background-color: $primary-color;
 	height: 64px;
 	border-radius: 0% 0% 33% 33% / 0% 0% 7% 7%;