From f3c3f397ebf5bac49eb3d6d65e0e8426e408744e Mon Sep 17 00:00:00 2001
From: Dennis Reimann <mail@dennisreimann.de>
Date: Wed, 21 Apr 2021 17:38:17 +0200
Subject: [PATCH] UI: Fix unread count badge on mobile

---
 .../NotificationsDropdown/Default.cshtml           |  8 ++++----
 BTCPayServer/wwwroot/main/site.css                 | 14 ++++++++------
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/BTCPayServer/Components/NotificationsDropdown/Default.cshtml b/BTCPayServer/Components/NotificationsDropdown/Default.cshtml
index e5c5fdbac..829c4aed7 100644
--- a/BTCPayServer/Components/NotificationsDropdown/Default.cshtml
+++ b/BTCPayServer/Components/NotificationsDropdown/Default.cshtml
@@ -3,17 +3,17 @@
 @inject CssThemeManager CssThemeManager
 @using BTCPayServer.HostedServices
 @using BTCPayServer.Views.Notifications
-@using Microsoft.AspNetCore.Http.Extensions
 @model BTCPayServer.Components.NotificationsDropdown.NotificationSummaryViewModel
 @addTagHelper *, BundlerMinifier.TagHelpers
 
 @if (Model.UnseenCount > 0)
 {
     <li class="nav-item dropdown" id="notifications-nav-item">
-        <a class="nav-link js-scroll-trigger @ViewData.IsActiveCategory(typeof(NotificationsNavPages))" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" id="Notifications">
-            <span class="d-lg-none d-sm-block">Notifications</span><i class="fa fa-bell d-lg-inline-block d-none"></i>
+        <a class="nav-link js-scroll-trigger @ViewData.IsActiveCategory(typeof(NotificationsNavPages))" href="#" id="navbarDropdown" role="button" data-toggle="dropdown">
+            <span class="d-inline-block d-lg-none">Notifications</span>
+            <i class="fa fa-bell d-lg-inline-block d-none"></i>
+            <span class="notification-badge badge badge-pill badge-danger">@Model.UnseenCount</span>
         </a>
-        <span class="alerts-badge badge badge-pill badge-danger">@Model.UnseenCount</span>
         <div class="dropdown-menu dropdown-menu-right text-center notification-dropdown" aria-labelledby="navbarDropdown">
             <div class="d-flex align-items-center justify-content-between py-3 px-4 border-bottom border-light"> 
                 <h5 class="m-0">Notifications</h5>
diff --git a/BTCPayServer/wwwroot/main/site.css b/BTCPayServer/wwwroot/main/site.css
index d1bd1850e..08131b5bf 100644
--- a/BTCPayServer/wwwroot/main/site.css
+++ b/BTCPayServer/wwwroot/main/site.css
@@ -225,12 +225,6 @@ pre {
   color: inherit;
 }
 
-.alerts-badge {
-  position: absolute;
-  margin-top: -36px;
-  margin-left: 16px;
-}
-
 .alert hr {
     display: block;
     width: unset;
@@ -252,6 +246,14 @@ pre {
     }
 }
 
+@media (min-width: 992px) {
+    .notification-badge {
+        position: relative;
+        top: -10px;
+        left: -10px;
+    }
+}
+
 .btn-outline-onion {
     background-image: none;
     background-color: transparent;