From 856a8403b3d0e37be027fc794794f647a6cf8025 Mon Sep 17 00:00:00 2001
From: StarFleetCPTN <starfleetcptn@protonmail.com>
Date: Fri, 11 Apr 2025 18:14:41 -0700
Subject: [PATCH] feat: Update notification count display with improved styling
 and accessibility

- Enhanced the notification count element with a border for better visibility.
- Added a hidden span element to maintain layout consistency when the notification count is zero.
---
 components/dashboard_notifications.templ | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/components/dashboard_notifications.templ b/components/dashboard_notifications.templ
index 741069c..22dad7e 100644
--- a/components/dashboard_notifications.templ
+++ b/components/dashboard_notifications.templ
@@ -177,12 +177,15 @@ templ NotificationDropdown(data NotificationsData) {
 
 templ NotificationCount(count int64) {
 	if count > 0 {
-		<div class="absolute inline-flex items-center justify-center w-5 h-5 text-xs font-bold text-white bg-red-500 rounded-full -top-1 -right-1" id="notification-count">
+		<div class="absolute inline-flex items-center justify-center w-5 h-5 text-xs font-bold text-white bg-red-500 border border-white dark:border-gray-800 rounded-full -translate-y-1/2 translate-x-1/2" style="top: 0; right: 0;" id="notification-count">
 			if count > 99 {
 				99+
 			} else {
 				{ fmt.Sprintf("%d", count) }
 			}
 		</div>
+	} else {
+		<!-- Empty element to ensure proper swap when count is zero -->
+		<span class="hidden"></span>
 	}
 } 
\ No newline at end of file