fix: Mobile hover states make notifications unscrollable

app/components/DocumentCard.tsx

@@ -14,6 +14,7 @@ import Flex from "~/components/Flex";
 import NudeButton from "~/components/NudeButton";
 import Time from "~/components/Time";
 import useStores from "~/hooks/useStores";
+import { hover } from "~/styles";
 import CollectionIcon from "./Icons/CollectionIcon";
 import EmojiIcon from "./Icons/EmojiIcon";
 import Squircle from "./Squircle";
@@ -179,7 +180,7 @@ const Fold = styled.svg`
 const PinButton = styled(NudeButton)`
   color: ${s("textTertiary")};
 
-  &:hover,
+  &:${hover},
   &:active {
     color: ${s("text")};
   }
@@ -209,7 +210,7 @@ const Reorderable = styled.div<{ $isDragging: boolean }>`
   z-index: ${(props) => (props.$isDragging ? 1 : "inherit")};
   pointer-events: ${(props) => (props.$isDragging ? "none" : "inherit")};
 
-  &:hover ${Actions} {
+  &: ${hover} ${Actions} {
     opacity: 1;
   }
 `;
@@ -248,7 +249,7 @@ const DocumentLink = styled(Link)<{
     opacity: 0;
   }
 
-  &:hover,
+  &:${hover},
   &:active,
   &:focus,
   &:focus-within {

app/components/DocumentListItem.tsx

@@ -181,8 +181,7 @@ const Actions = styled(EventBoundary)`
   color: ${s("textSecondary")};
 
   ${NudeButton} {
-    &:hover,
-    &[aria-expanded="true"] {
+    &: ${hover}, &[aria-expanded= "true" ] {
       background: ${s("sidebarControlHoverBackground")};
     }
   }
@@ -234,7 +233,7 @@ const DocumentLink = styled(Link)<{
     ${AnimatedStar} {
       opacity: 0.5;
 
-      &:hover {
+      &:${hover} {
         opacity: 1;
       }
     }

app/components/EventListItem.tsx

@@ -25,6 +25,7 @@ import Item, { Actions } from "~/components/List/Item";
 import Time from "~/components/Time";
 import useStores from "~/hooks/useStores";
 import RevisionMenu from "~/menus/RevisionMenu";
+import { hover } from "~/styles";
 import Logger from "~/utils/Logger";
 import { documentHistoryPath } from "~/utils/routeHelpers";
 
@@ -220,7 +221,7 @@ const ItemStyle = css`
   ${Actions} {
     opacity: 0.5;
 
-    &:hover {
+    &: ${hover} {
       opacity: 1;
     }
   }

app/components/GroupListItem.tsx

@@ -14,6 +14,7 @@ import ListItem from "~/components/List/Item";
 import Modal from "~/components/Modal";
 import useBoolean from "~/hooks/useBoolean";
 import useStores from "~/hooks/useStores";
+import { hover } from "~/styles";
 import NudeButton from "./NudeButton";
 
 type Props = {
@@ -87,7 +88,7 @@ const Image = styled(Flex)`
 `;
 
 const Title = styled.span`
-  &:hover {
+  &: ${hover} {
     text-decoration: underline;
     cursor: var(--pointer);
   }

app/components/Notifications/NotificationListItem.tsx

@@ -8,6 +8,7 @@ import { s } from "@shared/styles";
 import Notification from "~/models/Notification";
 import CommentEditor from "~/scenes/Document/components/CommentEditor";
 import useStores from "~/hooks/useStores";
+import { hover } from "~/styles";
 import Avatar from "../Avatar";
 import { AvatarSize } from "../Avatar/Avatar";
 import Flex from "../Flex";
@@ -87,7 +88,7 @@ const Container = styled(Flex)<{ $unread: boolean }>`
   margin: 0 8px;
   border-radius: 4px;
 
-  &:hover,
+  &:${hover},
   &:active {
     background: ${s("listItemHoverBackground")};
     cursor: var(--pointer);

app/components/Notifications/Notifications.tsx

@@ -9,6 +9,7 @@ import { navigateToNotificationSettings } from "~/actions/definitions/navigation
 import { markNotificationsAsRead } from "~/actions/definitions/notifications";
 import useActionContext from "~/hooks/useActionContext";
 import useStores from "~/hooks/useStores";
+import { hover } from "~/styles";
 import Empty from "../Empty";
 import Flex from "../Flex";
 import NudeButton from "../NudeButton";
@@ -86,7 +87,7 @@ const EmptyNotifications = styled(Empty)`
 const Button = styled(NudeButton)`
   color: ${s("textSecondary")};
 
-  &:hover,
+  &:${hover},
   &:active {
     color: ${s("text")};
     background: ${s("sidebarControlHoverBackground")};
@@ -102,7 +103,7 @@ const Header = styled(Flex)`
     transition: opacity 250ms ease-in-out;
   }
 
-  &:hover,
+  &:${hover},
   &:focus-within {
     ${Button} {
       opacity: 1;

app/components/Tab.tsx

@@ -3,6 +3,7 @@ import * as React from "react";
 import styled, { useTheme } from "styled-components";
 import { s } from "@shared/styles";
 import NavLink from "~/components/NavLink";
+import { hover } from "~/styles";
 
 type Props = Omit<React.ComponentProps<typeof NavLink>, "children"> & {
   to: string;
@@ -21,7 +22,7 @@ const TabLink = styled(NavLink)`
   margin-right: 24px;
   padding: 6px 0;
 
-  &:hover {
+  &: ${hover} {
     color: ${s("textSecondary")};
   }
 `;

app/scenes/Document/components/CommentThread.tsx

@@ -19,6 +19,7 @@ import useCurrentUser from "~/hooks/useCurrentUser";
 import useOnClickOutside from "~/hooks/useOnClickOutside";
 import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
+import { hover } from "~/styles";
 import { sidebarAppearDuration } from "~/styles/animations";
 import CommentForm from "./CommentForm";
 import CommentThreadItem from "./CommentThreadItem";
@@ -230,7 +231,7 @@ const Thread = styled.div<{
   position: relative;
   transition: opacity 100ms ease-out;
 
-  &:hover {
+  &: ${hover} {
     ${Reply} {
       opacity: 1;
     }

app/scenes/Document/components/CommentThreadItem.tsx

@@ -18,6 +18,7 @@ import Time from "~/components/Time";
 import useBoolean from "~/hooks/useBoolean";
 import useToasts from "~/hooks/useToasts";
 import CommentMenu from "~/menus/CommentMenu";
+import { hover } from "~/styles";
 import CommentEditor from "./CommentEditor";
 
 /**
@@ -244,8 +245,7 @@ const Menu = styled(CommentMenu)<{ dir?: "rtl" | "ltr" }>`
   transition: opacity 100ms ease-in-out;
   color: ${s("textSecondary")};
 
-  &:hover,
-  &[aria-expanded="true"] {
+  &: ${hover}, &[aria-expanded= "true" ] {
     opacity: 1;
     background: ${s("sidebarActiveBackground")};
   }
@@ -296,7 +296,7 @@ export const Bubble = styled(Flex)<{
     margin-bottom: 0;
   }
 
-  &:hover ${Menu} {
+  &: ${hover} ${Menu} {
     opacity: 1;
   }
 

app/scenes/Search/Search.tsx

@@ -24,6 +24,7 @@ import Scene from "~/components/Scene";
 import Switch from "~/components/Switch";
 import Text from "~/components/Text";
 import withStores from "~/components/withStores";
+import { hover } from "~/styles";
 import Logger from "~/utils/Logger";
 import { searchPath } from "~/utils/routeHelpers";
 import { decodeURIComponentSafe } from "~/utils/urls";
@@ -453,7 +454,7 @@ const Filters = styled(Flex)`
     padding: 0;
   `};
 
-  &:hover {
+  &: ${hover} {
     opacity: 1;
   }
 `;