Resolve merge conflicts by accepting PR #6131 changes

Co-authored-by: xet7 <15545+xet7@users.noreply.github.com>

client/components/notifications/notifications.css

@@ -1,17 +1,40 @@
-#notifications {
-  position: relative;
-}
-#notifications .notifications-drawer-toggle {
-  display: block;
-  line-height: 28px;
-  color: #f2f2f2;
-  margin: 0 10px;
-  width: 28px;
-  height: 28px;
-  text-align: center;
-  border: 0;
-  padding: 0;
+.notifications-container {
+    /* absolute to render close to emoji and render on top,
+    "naturally" on top because no parent stacking context */
+    position: absolute;
+    right: 0;
+    top: 1.5lh;
+    background-color: #fafafa;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
+    border-radius: 2px;
+    color: #000;
+    z-index: 1;
 }
+
 #notifications .notifications-drawer-toggle.alert {
   background-color: #eb4646;
 }
+
+#notifications {
+  /* to position popup */
+  position: relative;
+  overflow: visible;
+}
+
+#notifications-drawer {
+  position: relative;
+  min-height: min-content;
+  height: fit-content;
+  max-height: 100vh;
+  z-index: 300;
+  width: max-content;
+  .fa {
+    color: #bcbcbc !important;
+  }
+}
+
+body.mobile-mode {
+  #notifications-drawer .header {
+    flex-direction: column;
+  }
+}

client/components/notifications/notifications.jade

@@ -1,6 +1,7 @@
 template(name='notifications')
   #notifications.board-header-btns.right
+    .notifications-container
+      if $.Session.get 'showNotificationsDrawer'
+        +notificationsDrawer(unreadNotifications=unreadNotifications)
     a.notifications-drawer-toggle(class="{{#if $gt unreadNotifications 0}}alert{{/if}}" title="{{_ 'notifications'}}")
       i.fa.fa-bell
-    if $.Session.get 'showNotificationsDrawer'
-      +notificationsDrawer(unreadNotifications=unreadNotifications)

client/components/notifications/notificationsDrawer.css

@@ -1,38 +1,16 @@
-section#notifications-drawer {
-  position: fixed;
-  top: 48px;
-  right: 0;
-  width: 400px;
-  background-color: #fafafa;
-  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
-  border-radius: 2px;
-  max-height: calc(100vh - 28px - 36px);
-  color: #000;
-  padding-top: 36px;
-}
 section#notifications-drawer a:hover {
   color: #2980b9 !important;
 }
-section#notifications-drawer .header {
-  position: fixed;
-  top: 48px;
-  right: 0;
-  width: calc(400px - 32px);
-  padding: 8px 16px;
+section#notifications-drawer  .header {
+  display: flex;
+  justify-content: space-between;
+  padding: 0.5lh 2ch;
+  gap: 0.5lh;
+  align-items: center;
   background: #ededed;
   border-bottom: 1px solid #dbdbdb;
-  z-index: 2;
 }
-section#notifications-drawer .header .notification-menu-toggle {
-  position: absolute;
-  left: 16px;
-  top: calc(50% - 12px);
-  font-size: 20px;
-  cursor: pointer;
-  color: #333;
-  line-height: 24px;
-}
-section#notifications-drawer .header .notification-menu-toggle:hover {
+section#notifications-drawer .header .toggle-read {
   color: #2980b9;
 }
 section#notifications-drawer .header .notification-menu {
@@ -88,19 +66,13 @@ section#notifications-drawer .header h5 {
   margin: 0;
 }
 section#notifications-drawer .header .close {
-  position: absolute;
-  top: calc(50% - 12px);
-  right: 12px;
-  font-size: 24px;
-  height: 24px;
-  line-height: 24px;
+  display: flex;
   opacity: 1;
 }
 
 section#notifications-drawer ul.notifications {
-  display: block;
-  padding: 0px 16px 0px 16px;
   margin: 0;
-  height: calc(100vh - 122px);
-  overflow-y: scroll;
+  height: fit-content;
+  display: flex;
+  flex-direction: column;
 }

client/components/notifications/notificationsDrawer.jade

@@ -3,6 +3,7 @@ template(name='notificationsDrawer')
     .header
       a.notification-menu-toggle
         i.fa.fa-bars
+      //- #FIXME could be replaced by a popup to help placement ?
       .notification-menu(class="{{#if $.Session.get 'showNotificationMenu'}}is-open{{/if}}")
         .menu-section
           a.menu-item(class="{{#unless $.Session.get 'showReadNotifications'}}selected{{/unless}}")
@@ -44,9 +45,10 @@ template(name='notificationsDrawer')
             span.menu-icon
               i.fa.fa-trash
             span {{_ 'delete-all-notifications'}}
-      h5 {{_ 'notifications'}}
-        if($gt unreadNotifications 0)
-          |(#{unreadNotifications})
+      if($gt unreadNotifications 0)
+        |(#{unreadNotifications}) {{_ 'notifications'}}
+      else
+        |0 {{_ 'notifications'}}
       a.close
         i.fa.fa-times-thin
     ul.notifications