From 1e43a885780c0f04cca3e891f43902d573f1d993 Mon Sep 17 00:00:00 2001
From: zeripath <art27@cantab.net>
Date: Wed, 6 Jul 2022 18:33:10 +0100
Subject: [PATCH] Refix notification bell placement (#20251)

The use of `m-4 text black` for the notification bell results in this
icon being shifted upwards. Instead we should use the `item` class but
adjust `not-mobile` and `mobile-only` to make their `display: none`
settings `!important`.

(As an aside: This is probably one of the only times we should use
`!important` in our less files and the rest should be avoided or
removed.)

Ref #20069
Revert #20236

Signed-off-by: Andrew Thornton <art27@cantab.net>
---
 templates/base/head_navbar.tmpl | 2 +-
 web_src/less/_base.less         | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/templates/base/head_navbar.tmpl b/templates/base/head_navbar.tmpl
index 111cc02f9..91529dc16 100644
--- a/templates/base/head_navbar.tmpl
+++ b/templates/base/head_navbar.tmpl
@@ -114,7 +114,7 @@
 				</div>
 			</div>
 
-			<a href="{{AppSubUrl}}/notifications" class="m-4 text black tooltip not-mobile" data-content='{{.locale.Tr "notifications"}}'>
+			<a href="{{AppSubUrl}}/notifications" class="item tooltip not-mobile" data-content='{{.locale.Tr "notifications"}}'>
 				<span class="text">
 					<span class="fitted">{{svg "octicon-bell"}}</span>
 					<span class="ui red label {{if not $notificationUnreadCount}}hidden{{end}} notification_count">
diff --git a/web_src/less/_base.less b/web_src/less/_base.less
index 78f32956e..638801e39 100644
--- a/web_src/less/_base.less
+++ b/web_src/less/_base.less
@@ -1329,7 +1329,7 @@ footer {
 @media @mediaMdAndUp {
   .mobile-only,
   .ui.button.mobile-only {
-    display: none;
+    display: none !important;
   }
 
   // has the same behaviour of sr-only, hiding the content for
@@ -1341,7 +1341,7 @@ footer {
 
 @media @mediaSm {
   .not-mobile {
-    display: none;
+    display: none !important;
   }
 }