From c9a7b9e17c15be332fa76d64af1db514fd9a5ac2 Mon Sep 17 00:00:00 2001
From: Athou <jeremiepanzer@gmail.com>
Date: Sun, 22 Feb 2026 11:47:13 +0100
Subject: [PATCH] ensure the indicator is not shown above the app header

---
 .../src/components/sidebar/UnreadCount.tsx         | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/commafeed-client/src/components/sidebar/UnreadCount.tsx b/commafeed-client/src/components/sidebar/UnreadCount.tsx
index c138dae0..3be03b98 100644
--- a/commafeed-client/src/components/sidebar/UnreadCount.tsx
+++ b/commafeed-client/src/components/sidebar/UnreadCount.tsx
@@ -8,6 +8,10 @@ const useStyles = tss.create(() => ({
         // for some reason, mantine Badge has "cursor: 'default'"
         cursor: "inherit",
     },
+    indicator: {
+        // ensure the indicator is not shown above the app header
+        zIndex: 0,
+    },
 }))
 
 export function UnreadCount(
@@ -23,7 +27,15 @@ export function UnreadCount(
     const count = props.unreadCount >= 10000 ? "10k+" : props.unreadCount
     return (
         <Tooltip label={props.unreadCount} disabled={props.unreadCount === count} openDelay={Constants.tooltip.delay}>
-            <Indicator disabled={!props.showIndicator} size={4} offset={10} position="middle-start">
+            <Indicator
+                disabled={!props.showIndicator}
+                size={4}
+                offset={10}
+                position="middle-start"
+                classNames={{
+                    indicator: classes.indicator,
+                }}
+            >
                 <Badge className={`${classes.badge} cf-badge`} variant="light" fullWidth>
                     {count}
                 </Badge>