From 380c3e995389c291b7ece13bc2035f8a6b02b5d1 Mon Sep 17 00:00:00 2001
From: cade <git@cade.me>
Date: Fri, 12 Jul 2024 12:55:38 -0600
Subject: [PATCH] clamp comments

---
 app/_components/event-comment.tsx         | 7 ++++++-
 app/_components/event-comments.tsx        | 3 +++
 app/_components/notifications.tsx         | 2 +-
 app/_components/timeline-event-card.tsx   | 3 ++-
 app/_components/timeline-session-card.tsx | 7 ++++---
 5 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/app/_components/event-comment.tsx b/app/_components/event-comment.tsx
index ebd0bcae..a53b381d 100644
--- a/app/_components/event-comment.tsx
+++ b/app/_components/event-comment.tsx
@@ -10,8 +10,10 @@ import { Database } from '@/_types/database';
 import EllipsisVerticalIcon from '@heroicons/react/24/outline/EllipsisVerticalIcon';
 import TrashIcon from '@heroicons/react/24/outline/TrashIcon';
 import { useToggle } from '@uidotdev/usehooks';
+import { twMerge } from 'tailwind-merge';
 
 interface EventCommentProps {
+  clamp?: boolean;
   content: string;
   createdAt: string;
   hideCommentTimestamp?: boolean;
@@ -24,6 +26,7 @@ interface EventCommentProps {
 }
 
 const EventComment = ({
+  clamp,
   content,
   createdAt,
   hideCommentTimestamp,
@@ -81,7 +84,9 @@ const EventComment = ({
               </DropdownMenu>
             )}
         </div>
-        <DirtyHtml className="mt-1">{content}</DirtyHtml>
+        <DirtyHtml className={twMerge('mt-1', clamp && 'line-clamp-5')}>
+          {content}
+        </DirtyHtml>
       </div>
     </div>
   );
diff --git a/app/_components/event-comments.tsx b/app/_components/event-comments.tsx
index b6af0402..a261ea02 100644
--- a/app/_components/event-comments.tsx
+++ b/app/_components/event-comments.tsx
@@ -5,6 +5,7 @@ import { twMerge } from 'tailwind-merge';
 import EventComment from './event-comment';
 
 interface EventCommentsProps {
+  clamp?: boolean;
   className?: string;
   comments: Array<{
     content: string;
@@ -20,6 +21,7 @@ interface EventCommentsProps {
 }
 
 const EventComments = ({
+  clamp,
   className,
   comments,
   hideCommentTimestamp,
@@ -34,6 +36,7 @@ const EventComments = ({
     <div className={twMerge('space-y-4', className)}>
       {comments.map(({ content, created_at, id, profile }) => (
         <EventComment
+          clamp={clamp}
           content={content}
           createdAt={created_at}
           hideCommentTimestamp={hideCommentTimestamp}
diff --git a/app/_components/notifications.tsx b/app/_components/notifications.tsx
index 298167ad..c185bac6 100644
--- a/app/_components/notifications.tsx
+++ b/app/_components/notifications.tsx
@@ -96,7 +96,7 @@ const Notifications = ({ notifications }: NotificationsProps) => {
                   )}
                 </p>
                 {n?.comment && (
-                  <DirtyHtml className="text-fg-2">
+                  <DirtyHtml className="line-clamp-2 text-fg-2">
                     {n?.comment.content}
                   </DirtyHtml>
                 )}
diff --git a/app/_components/timeline-event-card.tsx b/app/_components/timeline-event-card.tsx
index 765a5f87..e1f84fb7 100644
--- a/app/_components/timeline-event-card.tsx
+++ b/app/_components/timeline-event-card.tsx
@@ -7,11 +7,11 @@ import EventMenu from '@/_components/event-menu';
 import TimelineEventInputsTable from '@/_components/timeline-event-inputs-table';
 import { ListEventsData } from '@/_queries/list-events';
 import ArrowUpRightIcon from '@heroicons/react/24/outline/ArrowUpRightIcon';
+import { twMerge } from 'tailwind-merge';
 
 import EventComments, {
   EventCommentsProps,
 } from '@/_components/event-comments';
-import { twMerge } from 'tailwind-merge';
 
 interface TimelineEventCardProps {
   event: NonNullable<ListEventsData>[0];
@@ -77,6 +77,7 @@ const TimelineEventCard = ({
         {!!event.comments.length && (
           <div className="space-y-4 pt-4">
             <EventComments
+              clamp
               comments={event.comments as EventCommentsProps['comments']}
               hideCommentTimestamp
               isArchived={isArchived}
diff --git a/app/_components/timeline-session-card.tsx b/app/_components/timeline-session-card.tsx
index 14566b4f..a8933b40 100644
--- a/app/_components/timeline-session-card.tsx
+++ b/app/_components/timeline-session-card.tsx
@@ -3,16 +3,16 @@
 import Avatar from '@/_components/avatar';
 import Button from '@/_components/button';
 import DateTime from '@/_components/date-time';
+import EventMenu from '@/_components/event-menu';
+import TimelineEventInputsTable from '@/_components/timeline-event-inputs-table';
 import { ListEventsData } from '@/_queries/list-events';
 import firstIfArray from '@/_utilities/first-if-array';
 import ArrowUpRightIcon from '@heroicons/react/24/outline/ArrowUpRightIcon';
+import { twMerge } from 'tailwind-merge';
 
 import EventComments, {
   EventCommentsProps,
 } from '@/_components/event-comments';
-import EventMenu from '@/_components/event-menu';
-import TimelineEventInputsTable from '@/_components/timeline-event-inputs-table';
-import { twMerge } from 'tailwind-merge';
 
 interface TimelineSessionCardProps {
   group: NonNullable<ListEventsData>;
@@ -116,6 +116,7 @@ const TimelineSessionCard = ({
               {!!event.comments.length && (
                 <div className="space-y-4 pt-4">
                   <EventComments
+                    clamp
                     comments={event.comments as EventCommentsProps['comments']}
                     hideCommentTimestamp
                     isArchived={isArchived}