fix notifications

src/components/LoggedInLayout.vue

@@ -16,15 +16,17 @@
         :updated-clients="updatedClients",
         @reset-updated-clients="resetUpdatedClients"
       )
+    the-notification-provider
 </template>
 
 <script>
 import TheHeader from "@/components/TheHeader";
 import TheSidebar from "@/components/TheSidebar";
+import TheNotificationProvider from "@/components/Notifications/TheNotificationProvider";
 
 export default {
   name: "LoggedInLayout",
-  components: { TheHeader, TheSidebar },
+  components: { TheNotificationProvider, TheHeader, TheSidebar },
   data() {
     return {
       isOpenForm: false,

src/components/Notifications/TheNotificationProvider.vue

@@ -1,7 +1,9 @@
 <template lang="pug">
   teleport(:to="appContainer")
-    .flex.gap-2.flex-col.absolute.bottom-0.pb-2.right-2.overflow-hidden.pt-32(class="w-1/5")
-      transition-group(name="list")
+  .absolute.bottom-0.p-2.right-0.overflow-hidden.z-50(class="w-1/5")
+    .pt-32(v-if="displayPadding")
+    .flex.gap-2.flex-col.relative
+      transition-group(name="list", @before-leave="displayPadding = true", @after-leave="displayPadding = false")
         notification-item(
             v-for="[id, notification] in notificationsList",
             :id="id",
@@ -22,6 +24,12 @@ export default {
   name: "TheNotificationProvider",
   components: { NotificationItem, BaseButton },
 
+  data() {
+    return {
+      displayPadding: false,
+    };
+  },
+
   computed: {
     appContainer() {
       return this.$.appContext.app._container;