📱 Boxed layout for larger screens

src/App.vue

@@ -9,14 +9,18 @@ import { loading } from "./store";
 
 <template>
   <TitleBar />
-  <DateSelector v-show="$route.name != 'Settings' && $route.name != 'Login'" />
-  <main>
-    <LoadingElement
-      :active="loading"
-      v-show="$route.name != 'Settings' && $route.name != 'Login'"
-    />
-    <RouterView />
-  </main>
+  <div class="center">
+    <main>
+      <DateSelector
+        v-show="$route.name != 'Settings' && $route.name != 'Login'"
+      />
+      <LoadingElement
+        :active="loading"
+        v-show="$route.name != 'Settings' && $route.name != 'Login'"
+      />
+      <RouterView />
+    </main>
+  </div>
   <BottomNavbar v-show="$route.name != 'Login'" />
 </template>
 

src/assets/base.css

@@ -23,6 +23,16 @@ body {
   font-family: var(--font-family);
 }
 
+.center {
+  display: flex;
+  justify-content: center;
+}
+
+main {
+  width: 100%;
+  max-width: 900px;
+}
+
 @font-face {
   font-family: "sourcesanspro";
   font-style: "normal";

src/components/bottom-navbar.vue

@@ -42,6 +42,7 @@ import { RouterLink } from "vue-router";
   grid-auto-columns: 1fr;
   grid-auto-flow: column;
   padding: 0px 20px;
+  max-width: 800px;
 }
 
 .entry {