fix: Mobile hover states make notifications unscrollable

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;
   }
 `;