Fix notification bell position to remain consistent regardless of badge presence

Author: whosthatguy

src/components/common/LiquidBlueBadge/LiquidBlueBadge.styles.ts

@@ -61,9 +61,21 @@ export const StyledLiquidBadge = styled(Badge)`
   }
   
   &.notification-badge {
+    position: relative;
+    display: inline-block;
+    
     & .ant-badge-count {
-      right: 6px;
-      top: -12px;
+      position: absolute;
+      right: -8px;
+      top: -8px;
+      transform: none;
+    }
+    
+    /* Ensure the wrapper doesn't shift when badge appears/disappears */
+    & .ant-badge-count-sm {
+      position: absolute;
+      right: -8px;
+      top: -8px;
     }
   }
 `;

src/components/header/components/notificationsDropdown/NotificationsDropdown.tsx

@@ -169,8 +169,10 @@ export const NotificationsDropdown: React.FC = () => {
           icon={
             <LiquidBlueBadge
               count={totalUnreadCount > 0 ? totalUnreadCount : 0}
+              showZero={false}
               overflowCount={99}
               dot={false}
+              style={{ lineHeight: 1 }}
             >
               <BellOutlined />
             </LiquidBlueBadge>