From 51d03271172b07013e1f31832d6941db36c58902 Mon Sep 17 00:00:00 2001
From: Josh Wong <joshuarwong@gmail.com>
Date: Sun, 10 Nov 2024 12:41:58 +0900
Subject: [PATCH] Fix transparent notification dropdown menu on mobile (#143)

* Make notification dropdown cover icons

Change `position` and `width` so that, when `notification-dropdown` is active, the dropdown window covers the icons behind the dropdown menu.

* Adjust spacing for notification count
---
 src/css/custom.css | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/css/custom.css b/src/css/custom.css
index 3e7e2ed5..4071891b 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -156,7 +156,7 @@ html[data-theme="dark"] .badge {
   background-image: url("/img/rss-mark.svg");
   background-size: contain;
   content: "";
-  position: relative;
+  position: inherit;
   width: 24px;
   height: 24px;
 }
@@ -229,7 +229,7 @@ html[data-theme="dark"] g[class^='label'] text {
   height: 20px;
   justify-content: center;
   position: absolute;
-  right: -5px;
+  right: -2px;
   top: 2px;
   width: 20px;
 }
@@ -238,9 +238,10 @@ html[data-theme="dark"] g[class^='label'] text {
   background-color: white;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   border-radius: 4px;
+  left: 12px;
   position: absolute;
   top: 38px;
-  width: 300px;
+  width: 293px;
   z-index: 1000;
 }
 
@@ -274,9 +275,10 @@ html[data-theme="dark"] .notification-dropdown {
   border-bottom: 1px solid invert(90%);
   border-radius: 4px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.9);
+  left: 12px;
   position: absolute;
   top: 38px;
-  width: 300px;
+  width: 293px;
   z-index: 1000;
 }
 
@@ -292,7 +294,7 @@ html[data-theme="dark"] .notification-dropdown {
 @media (max-width: 997px) {
   .navbar-sidebar .notification-wrapper {
     display: flex; /* Make it visible only in the sidebar on mobile */
-    position: sticky;
+    position: relative;
   }
 
   .notification-count {
@@ -305,7 +307,7 @@ html[data-theme="dark"] .notification-dropdown {
     height: 20px;
     justify-content: center;
     position: relative;
-    right: 0px;
+    right: 2px;
     top: 2px;
     width: 20px;
   }