fix: Show max 3 lines of content on notification items

app/components/Notifications/NotificationListItem.tsx

@@ -8,7 +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 { hover, truncateMultiline } from "~/styles";
 import Avatar from "../Avatar";
 import { AvatarSize } from "../Avatar/Avatar";
 import Flex from "../Flex";
@@ -76,6 +76,8 @@ function NotificationListItem({ notification, onNavigate }: Props) {
 const StyledCommentEditor = styled(CommentEditor)`
   font-size: 0.9em;
   margin-top: 4px;
+
+  ${truncateMultiline(3)}
 `;
 
 const StyledAvatar = styled(Avatar)`

app/styles/index.ts

@@ -38,3 +38,16 @@ export const fadeOnDesktopBackgrounded = () => {
     body.backgrounded & { opacity: 0.75; }
   `;
 };
+
+/**
+ * Truncate multiline text.
+ *
+ * @returns string of CSS
+ */
+export const truncateMultiline = (lines: number) => `
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: ${lines};
+  overflow: hidden;
+  overflow-wrap: anywhere;
+`;