Adjusted some animation

src/static/app/src/views/index.vue

@@ -27,13 +27,14 @@ export default {
 			<main class="col-md-9 ml-sm-auto col-lg-10 px-md-4 overflow-y-scroll mb-0">
 				<Suspense>
 					<RouterView v-slot="{Component}">
-						<Transition name="fade2" mode="out-in">
+						<Transition name="fade2" mode="out-in" appear>
 							<Component :is="Component"></Component>
 						</Transition>
 					</RouterView>
 				</Suspense>
 				<div class="messageCentre text-body position-fixed d-flex">
-					<TransitionGroup name="message" tag="div" class="position-relative flex-grow-1 d-flex align-items-end">
+					<TransitionGroup name="message" tag="div" 
+					                 class="position-relative flex-sm-grow-0 flex-grow-1 d-flex align-items-end ms-sm-auto flex-column gap-2">
 						<Message v-for="m in getMessages.slice().reverse()"
 						         :message="m" :key="m.id"></Message>
 					</TransitionGroup>
@@ -45,7 +46,7 @@ export default {
 
 <style scoped>
 	.messageCentre{
-		top: calc(50px + 1rem);
+		top: 1rem;
 		right: 1rem;
 		width: calc(100% - 2rem);
 	}

src/static/app/src/views/signin.vue

@@ -26,7 +26,6 @@ export default {
 				}),
 				fetchGet("/api/getDashboardVersion", {}, (res) => {
 					version = res.data
-					
 				})
 			]);
 		}

src/static/css/dashboard.css

@@ -1054,7 +1054,6 @@ pre.index-alert {
 
 .fade2-enter-from{
     transform: translateY(-30px);
-    /*filter: blur(3px);*/
     opacity: 0;
 }
 
@@ -1081,7 +1080,7 @@ pre.index-alert {
 .message-move, /* apply transition to moving elements */
 .message-enter-active,
 .message-leave-active {
-    transition: all 0.5s ease;
+    transition: all 0.5s cubic-bezier(0.82, 0.58, 0.17, 1);
 }
 
 .message-enter-from,
@@ -1091,7 +1090,7 @@ pre.index-alert {
 }
 
 .message-enter-from{
-    transform: translateY(-30px) scale(0.7);
+    transform: translateY(-30px);
 }
 
 .message-leave-to{