fix: putting notification sticky in viewport (#20)

NethServer · Feb 23, 2024 · 5faf41d · 5faf41d
1 parent 23194be
commit 5faf41d
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 4 deletions.
diff --git a/src/components/NotificationHandler.vue b/src/components/NotificationHandler.vue
@@ -17,12 +17,12 @@ notificationEngine.$onAction(({ name, after }) => {
 </script>
 
 <template>
-  <div class="flex flex-col items-end space-y-4 overflow-hidden p-4">
+  <div class="flex flex-col items-end space-y-4 overflow-hidden">
     <TransitionGroup>
       <div
         v-for="[id, notification] in notificationEngine.notifications"
         :key="id"
-        class="flex items-start gap-x-4 rounded-lg bg-white p-4 shadow-lg dark:bg-gray-800"
+        class="mt-4 flex items-start gap-x-4 rounded-lg bg-white p-4 shadow-lg dark:bg-gray-800"
       >
         <div
           v-if="notification.type == 'success'"

diff --git a/src/views/BaseTemplate.vue b/src/views/BaseTemplate.vue
@@ -89,8 +89,10 @@ function handleLogout() {
       </div>
       <main class="relative grow bg-gray-50 p-6 dark:bg-gray-900">
         <!-- Notification handler -->
-        <div class="absolute right-0 top-0 z-20 max-w-lg">
-          <NotificationHandler />
+        <div class="sticky top-0 z-20">
+          <div class="absolute right-0 top-0 max-w-lg">
+            <NotificationHandler />
+          </div>
         </div>
         <RouterView />
       </main>