clamp comments

xvvvyz · Jul 12, 2024 · 380c3e9 · 380c3e9
1 parent 88bb6cb
commit 380c3e9
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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}