fix(*): added the position sticky

Aam-Digital · Dec 23, 2024 · 6534650 · 6534650
1 parent 0566b50
commit 6534650
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 17 deletions.
diff --git a/src/app/features/notification/notification.component.html b/src/app/features/notification/notification.component.html
@@ -18,25 +18,27 @@
   <div class="notification-panel" (click)="$event.stopPropagation()">
     <!-- stopPropagation above to avoid closing the panel upon action button clicks -->
 
-    <div
-      class="flex-row justify-space-between align-center notification-panel-header"
-    >
-      <h2 class="notification-title" i18n>Notifications</h2>
-
-      <button
-        mat-icon-button
-        [matMenuTriggerFor]="settingsMenu"
-        #settingsMenuTrigger="matMenuTrigger"
+    <div class="notification-list-header">
+      <div
+        class="flex-row justify-space-between align-center notification-panel-header"
       >
-        <fa-icon icon="ellipsis"></fa-icon>
-      </button>
-    </div>
+        <h2 class="notification-title" i18n>Notifications</h2>
 
-    <!-- Tabs -->
-    <mat-tab-group [(selectedIndex)]="selectedTab">
-      <mat-tab label="All" i18n-label></mat-tab>
-      <mat-tab label="Unread" i18n-label></mat-tab>
-    </mat-tab-group>
+        <button
+          mat-icon-button
+          [matMenuTriggerFor]="settingsMenu"
+          #settingsMenuTrigger="matMenuTrigger"
+        >
+          <fa-icon icon="ellipsis"></fa-icon>
+        </button>
+      </div>
+
+      <!-- Tabs -->
+      <mat-tab-group [(selectedIndex)]="selectedTab">
+        <mat-tab label="All" i18n-label></mat-tab>
+        <mat-tab label="Unread" i18n-label></mat-tab>
+      </mat-tab-group>
+    </div>
 
     <div class="flex-column gap-small">
       @for (

diff --git a/src/app/features/notification/notification.component.scss b/src/app/features/notification/notification.component.scss
@@ -1,5 +1,11 @@
 @use "variables/colors";
 
+.notification-list-header {
+  position: sticky;
+  top: 8px;
+  background-color: colors.$background;
+}
+
 .notification-title {
   font-weight: 700;
   margin: 0px;