From b8ca102131dc1619f2def041528631fa7da08b64 Mon Sep 17 00:00:00 2001
From: Jan Laupetin <jan@laupetin.net>
Date: Tue, 28 Oct 2025 01:11:01 +0100
Subject: [PATCH] chore: fix router transition

---
 src/ModManUi/src/App.vue | 23 +++++++++++++++++------
 1 file changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/ModManUi/src/App.vue b/src/ModManUi/src/App.vue
index 8902fee4..3153ece0 100644
--- a/src/ModManUi/src/App.vue
+++ b/src/ModManUi/src/App.vue
@@ -6,11 +6,13 @@ import ModManHeader from "./components/ModManHeader.vue";
   <main class="container">
     <ModManHeader />
 
-    <RouterView v-slot="{ Component }">
-      <Transition name="blend">
-        <component :is="Component" />
-      </Transition>
-    </RouterView>
+    <div class="router-wrapper">
+      <RouterView v-slot="{ Component }">
+        <Transition name="blend">
+          <component :is="Component" />
+        </Transition>
+      </RouterView>
+    </div>
   </main>
 </template>
 
@@ -26,6 +28,11 @@ import ModManHeader from "./components/ModManHeader.vue";
   height: 100vh;
 }
 
+.router-wrapper {
+  position: relative;
+  height: 100%;
+}
+
 .blend-enter-from,
 .blend-leave-to {
   opacity: 0;
@@ -33,6 +40,10 @@ import ModManHeader from "./components/ModManHeader.vue";
 
 .blend-enter-active,
 .blend-leave-active {
-  transition: opacity 0.15s ease-in-out;
+  transition: opacity 0.25s ease-in-out;
+}
+
+.blend-leave-active {
+  position: absolute;
 }
 </style>