Fix unread badges in minimized sidebar

renderer/app.css

@@ -42,9 +42,24 @@
     width: calc(100% - 64px);
   }
 
+  .sidebar-menu-item {
+    position: relative;
+  }
+
   .sidebar-menu-item > span {
     display: none;
   }
+
+  .sidebar-toolchip {
+    position: absolute;
+    top: 2px;
+    right: 2px;
+    font-size: 7px;
+  }
+
+  .sidebar-toolchip > div {
+    padding: 2px 4px;
+  }
 }
 
 @media screen and (max-width: 996px) {

renderer/components/layouts/timelines.tsx

@@ -92,7 +92,7 @@ export default function Layout({ children }: LayoutProps) {
               <ListItemPrefix>{page.icon}</ListItemPrefix>
               <span className="sidebar-menu text-ellipsis whitespace-nowrap overflow-hidden">{page.title}</span>
               {page.id === 'notifications' && unreads[account?.id?.toString()] ? (
-                <ListItemSuffix>
+                <ListItemSuffix className="sidebar-toolchip">
                   <Chip
                     value={unreads[account.id.toString()]}
                     variant="ghost"