Save user flights

resources/js/Layouts/MainLayout.vue

@@ -16,13 +16,13 @@ router.on('success', () => {
 <template>
     <Radar>
         <div class="layoutContainer">
-            <MainHeader />
+            <MainHeader :key="transitionKey" />
             <Transition name="fade" mode="out-in">
                 <main id="pageContainer" :key="transitionKey">
                     <slot />
                 </main>
             </Transition>
-            <MainFooter />
+            <MainFooter :key="transitionKey" />
         </div>
     </Radar>
 </template>
@@ -34,29 +34,27 @@ router.on('success', () => {
     min-height: 100dvh;
     background: var(--bg);
     color: var(--text);
+    overflow-y: auto;
+}
+
+header,
+footer {
+    flex: 0 0 5dvh;
+    min-height: 3rem;
 }
 
 main {
-    flex: 1 0 90dvh;
-    min-height: 0;
+    flex: 1 1 auto;
     padding: 1rem;
-    background:transparent;
-    display:flex;
+    background: transparent;
+    display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
 }
 
-
 .fade-enter-from,
-.fade-leave-to {
-    opacity: 0;
-    transform: translateY(10px);
-}
-
+.fade-leave-to { opacity: 0; }
 .fade-enter-active,
-.fade-leave-active {
-    transition: opacity 0.3s ease, transform 0.3s ease;
-}
-
+.fade-leave-active { transition: opacity 0.2s ease; }
 </style>