From e583cf0f62d714563169ac0c59d7f824c2921ffb Mon Sep 17 00:00:00 2001
From: ShittyKopper <shittykopper@w.on-t.work>
Date: Thu, 2 Nov 2023 01:35:07 +0300
Subject: [PATCH 1/2] fix: notification indicator styling

the width change does not feel like the correct solution but it works
surprisingly well
---
 packages/frontend/src/style.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/src/style.scss b/packages/frontend/src/style.scss
index 39c0a4c56b..d79c0c1d76 100644
--- a/packages/frontend/src/style.scss
+++ b/packages/frontend/src/style.scss
@@ -188,10 +188,10 @@ hr {
 	font-weight: 700;
 	background: var(--indicator);
 	height: 1.5em;
-	min-width: 1.5em;
+	min-width: 1em;
 	align-items: center;
 	justify-content: center;
-	border-radius: 99rem;
+	border-radius: var(--radius-ellipse);
 	padding: 0.3em 0.5em;
 }
 

From 4f0bc185af86096c1337d35119e6444253b69682 Mon Sep 17 00:00:00 2001
From: ShittyKopper <shittykopper@w.on-t.work>
Date: Thu, 2 Nov 2023 02:08:34 +0300
Subject: [PATCH 2/2] fix: fix: notification count position

:has is not yet supported by firefox stable. can be reverted with the
release of firefox 121 (assuming we don't want to keep supporting older
versions)

reverts commit fb3a2bef67411b4025d817bc2b655adc6487d76a
---
 packages/frontend/src/ui/_common_/navbar.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/frontend/src/ui/_common_/navbar.vue b/packages/frontend/src/ui/_common_/navbar.vue
index 5cd9d66b82..e8a1aa4f14 100644
--- a/packages/frontend/src/ui/_common_/navbar.vue
+++ b/packages/frontend/src/ui/_common_/navbar.vue
@@ -29,7 +29,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					v-on="navbarItemDef[item].action ? { click: navbarItemDef[item].action } : {}"
 				>
 					<i class="ti-fw" :class="[$style.itemIcon, navbarItemDef[item].icon]"></i><span :class="$style.itemText">{{ navbarItemDef[item].title }}</span>
-					<span v-if="navbarItemDef[item].indicated" :class="$style.itemIndicator">
+					<span v-if="navbarItemDef[item].indicated" :class="[$style.itemIndicator, { [$style.hasItemIndicateValueIcon]: navbarItemDef[item].indicateValue }]">
 						<span v-if="navbarItemDef[item].indicateValue" class="_indicateCounter" :class="$style.itemIndicateValueIcon">{{ navbarItemDef[item].indicateValue }}</span>
 						<i v-else class="_indicatorCircle"></i>
 					</span>
@@ -311,12 +311,12 @@ function more(ev: MouseEvent) {
 	.itemIndicator {
 		position: absolute;
 		top: 0;
-		right: 20px;
+		left: 20px;
 		color: var(--navIndicator);
 		font-size: 8px;
 		animation: blink 1s infinite;
 
-		&:has(.itemIndicateValueIcon) {
+		&.hasItemIndicateValueIcon {
 			animation: none;
 			left: auto;
 			right: 40px;