Improve mobile CSS for full screen

client/src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col min-h-screen">
+  <div class="flex flex-col min-h-full">
     <MainNavigationBar class="flex-none" />
     <RouterView v-slot="{ Component }" class="flex-auto">
       <Transition mode="out-in" name="app">

client/src/main.ts

@@ -48,7 +48,7 @@ loadLocaleMessages(i18n, "de").then(() => {
   app.use(pinia);
   app.use(i18n);
   app.use(urql, {
-    url: import.meta.env.VITE_GRAPHQL_URL,
+    url: import.meta.env.VITE_GRAPHQL_URL || "/server/graphql",
   });
 
   app.mount("#app");

client/tailwind.css

@@ -2,6 +2,19 @@
 @tailwind components;
 @tailwind utilities;
 
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+html, body, #app {
+  height: 100%;
+}
+
+body {
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+}
+
 html {
   @apply text-black;
 }
@@ -68,8 +81,7 @@ svg {
   }
 
   .filter-blue-900 {
-    filter: invert(9%) sepia(38%) saturate(5684%) hue-rotate(200deg) brightness(95%)
-      contrast(105%);
+    filter: invert(9%) sepia(38%) saturate(5684%) hue-rotate(200deg) brightness(95%) contrast(105%);
   }
 }