fix: fixed view of notifications page

Author: duruer

src/lib/component/PageActions.svelte

@@ -0,0 +1,26 @@
+<div class="row gy-3 d-flex align-items-center">
+  {#if leftClasses !== null}
+    <div
+      class="col-lg-4 col-12 d-flex justify-content-lg-start justify-content-center {leftClasses}">
+      <slot name="left" />
+    </div>
+  {/if}
+  {#if middleClasses !== null}
+    <div
+      class="col-lg-4 col-12 order-lg-2 order-last d-flex justify-content-center {middleClasses}">
+      <slot name="middle" />
+    </div>
+  {/if}
+  {#if rightClasses !== null}
+    <div
+      class="col-lg-4 col-12 order-3 d-flex justify-content-lg-end justify-content-center {rightClasses}">
+      <slot name="right" />
+    </div>
+  {/if}
+</div>
+
+<script>
+  export let leftClasses;
+  export let middleClasses;
+  export let rightClasses;
+</script>

src/lib/pages/NotificationsPage.svelte

@@ -1,26 +1,24 @@
-<div class="container">
+<div class="container  vstack gap-3">
   <!-- Action Menu -->
-  <div
-    class="row justify-content-end mb-3 animate__animated animate__slideInUp">
-    {#if $notifications.length !== 0}
-      <div class="col-auto">
+  <PageActions leftClasses="d-lg-flex d-none" middleClasses="d-lg-flex d-none">
+    <div slot="right">
+      {#if $notifications.length !== 0}
         <button
           type="button"
-          class="btn btn-danger"
-          on:click="{() => onDeleteAllClick(notificationProcessID, interval)}"
-          >{$_("pages.notifications.delete-all-button")}
+          class="btn btn-secondary"
+          on:click={() => onDeleteAllClick(notificationProcessID, interval)}>
+          <i class="fa fa-minus me-2"></i>
+          {$_("pages.notifications.delete-all-button")}
         </button>
-      </div>
-    {/if}
-  </div>
+      {/if}
+    </div>
+  </PageActions>
 
   <!-- All Notifications -->
 
   <div class="card">
-    <div class="card-body">
-      <h3 class="card-title">
-        {$_("navbar.notifications.title")}
-      </h3>
+    <div class="card-header">{$_('navbar.notifications.title')}</div>
+    <div class="card-body vstack gap-3" class:d-none="{$notifications.length === 0}">
       <div class="list-group" class:d-none="{$notifications.length === 0}">
         {#each $notifications as notification, index (notification)}
           <div
@@ -75,6 +73,7 @@
         </div>
       {/each}
       </div>
+    </div>
 
       {#if $notifications.length === 0}
         <NoContent />
@@ -92,7 +91,6 @@
           </button>
         </div>
       {/if}
-    </div>
   </div>
 </div>
 
@@ -127,6 +125,7 @@
 
   import ConfirmRemoveAllNotificationsModal from "$lib/component/modals/ConfirmRemoveAllNotificationsModal.svelte";
   import NoContent from "$lib/component/NoContent.svelte";
+  import PageActions from "$lib/component/PageActions.svelte";
 
   export let data;