From 866fbc2d51762903b603ab77326433ea3ec6789c Mon Sep 17 00:00:00 2001
From: Sami Mokaddem <sami.mokaddem@circl.lu>
Date: Fri, 28 Oct 2022 11:09:42 +0200
Subject: [PATCH] chg: [layout:notification-menu] Improved spacing and size

---
 templates/element/layouts/header/header-notification-item.php | 2 +-
 webroot/css/layout.css                                        | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/templates/element/layouts/header/header-notification-item.php b/templates/element/layouts/header/header-notification-item.php
index 59a3df8..4457e68 100644
--- a/templates/element/layouts/header/header-notification-item.php
+++ b/templates/element/layouts/header/header-notification-item.php
@@ -21,7 +21,7 @@ $variant = empty($notification['variant']) ? 'primary' : $notification['variant'
             </span>
         <?php endif; ?>
         <span class="notification-text-container">
-            <div class="d-flex justify-content-between align-items-center">
+            <div class="d-flex justify-content-between align-items-center gap-2">
                 <span class="notification-title text-truncate"><?= $this->ValueGetter->get($notification['text']) ?></span>
                 <?php if (!empty($notification['datetime'])) : ?>
                     <small id="<?= $seed ?>" class="notification-date text-muted fw-light"><?= h($notification['datetime']->format('Y-m-d\TH:i:s')) ?></small>
diff --git a/webroot/css/layout.css b/webroot/css/layout.css
index 95c1655..1afecec 100644
--- a/webroot/css/layout.css
+++ b/webroot/css/layout.css
@@ -546,9 +546,10 @@ ul.sidebar-elements > li.category > span.category-divider > hr {
 }
 .navbar .right-navbar .notification-menu a.notification-item .notification-text-container {
     max-width: calc(100% - 40px - 0.25rem);
+    flex-grow: 1;
 }
 .navbar .right-navbar .notification-menu a.notification-item .notification-title {
-    max-width: calc(100% - 90px);
+    max-width: 300px;
 }
 .navbar .right-navbar .notification-menu a.notification-item .notification-date {
     max-width: 90px;