style: fix this fucking bug

app/app.vue

@@ -34,18 +34,27 @@ onMounted(async () => {
 <style scoped>
 .loading-container {
   display: flex;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
   min-height: 100vh;
 }
 
+.app-viewport,
+.app-viewport > * {
+  width: 100% !important;
+}
+
 .app-viewport {
-  display: flex;
-  flex-direction: column;
+  display: block !important;
   min-height: 100vh;
+  padding-top: 5rem;
 }
 
 .app-content {
-  flex: 1;
+  width: 100%;
+  max-width: 1280px;
+  margin: 0 auto;
+  min-height: calc(100vh - 12rem);
 }
 </style>

app/components/MainFooter.vue

@@ -61,7 +61,7 @@
   font-size: 0.875rem;
   width: 100%;
   box-sizing: border-box;
-  margin-top: 100vh;
+  margin-top: 8rem;
 }
 
 .max-w-7xl {