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 {

public/css/main.css

@@ -13,15 +13,34 @@
 
 body {
   min-height: 100vh;
-  width: 100vw;
   background-color: #1d1e1f;
   color: #c9d1d9;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
+  overflow-x: hidden;
 }
 
 .app-viewport {
+  width: 100%;
   padding: 2rem 1rem;
+  display: block !important;
+  min-height: 100vh !important;
+}
+
+.app-viewport > * {
+  display: block !important;
+  width: 100% !important;
+}
+
+.app-content {
+  display: block !important;
+  width: 100% !important;
+  max-width: 1280px !important;
+  margin: 0 auto !important;
+}
+
+.footer-container {
+  margin-top: 2rem !important;
 }
 
 .spinner {