fix: Hover state is lost on sidebar items when context menu is open (#11054)

* fix: Unread badge position

* fix: Hover state with active context menu

app/components/Notifications/NotificationListItem.tsx

@@ -87,7 +87,7 @@ function NotificationListItem({ notification, onNavigate }: Props) {
               />
             )}
           </Flex>
-          {notification.viewedAt ? null : <UnreadBadge style={{ right: 12 }} />}
+          {notification.viewedAt ? null : <UnreadBadge />}
         </Container>
       </StyledLink>
     </ContextMenu>

app/components/Sidebar/components/SidebarLink.tsx

@@ -107,7 +107,7 @@ function SidebarLink(
 
   const unreadStyle = React.useMemo(
     () => ({
-      right: -12,
+      right: -20,
     }),
     []
   );
@@ -165,7 +165,6 @@ function SidebarLink(
       ref={ref}
       {...rest}
     >
-      {" "}
       <ContextMenu action={contextAction} ariaLabel={t("Link options")}>
         <Content>
           {hasDisclosure && (
@@ -243,7 +242,8 @@ const Link = styled(NavLink)<{
   $disabled?: boolean;
 }>`
   &:hover,
-  &:active {
+  &:active,
+  &:has([data-state="open"]) {
     --background: ${s("sidebarHoverBackground")};
   }
 

app/components/UnreadBadge.tsx

@@ -8,5 +8,5 @@ export const UnreadBadge = styled.div`
   border-radius: 8px;
   align-self: center;
   position: absolute;
-  right: 4px;
+  right: 12px;
 `;