From 8ecc24258688c0427d25a24668b975ac2318184c Mon Sep 17 00:00:00 2001
From: Lisa Durand <lisa.c.durand@gmail.com>
Date: Thu, 16 Nov 2023 14:06:05 +0100
Subject: [PATCH] fix display of notification dot inside DSFR tabs

---
 app/assets/stylesheets/notifications.scss | 6 ++++++
 app/views/shared/_tab_item.html.haml      | 2 +-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/notifications.scss b/app/assets/stylesheets/notifications.scss
index d9e6a9931..eec59f93d 100644
--- a/app/assets/stylesheets/notifications.scss
+++ b/app/assets/stylesheets/notifications.scss
@@ -7,3 +7,9 @@ span.notifications {
   border-radius: 4px;
   background-color: $orange;
 }
+
+.fr-tabs__list span.notifications {
+  z-index: 2;
+  top: 5px;
+  right: 8px;
+}
diff --git a/app/views/shared/_tab_item.html.haml b/app/views/shared/_tab_item.html.haml
index 73a96e55b..cd4103ef8 100644
--- a/app/views/shared/_tab_item.html.haml
+++ b/app/views/shared/_tab_item.html.haml
@@ -1,4 +1,4 @@
-%li{ class: (active ? 'active' : nil), role: 'presentation' }
+%li{ class: "relative #{(active ? 'active' : nil)}", role: 'presentation' }
   - if notification
     %span.notifications{ 'aria-label': 'notifications' }
   = link_to(url, 'aria-selected': active ? true : nil, class: 'fr-tabs__tab', role: 'tab' ) do