diff --git a/apps/portal/src/components/resumes/comments/ResumeCommentListItem.tsx b/apps/portal/src/components/resumes/comments/ResumeCommentListItem.tsx index 537f3fc2..b331e7f6 100644 --- a/apps/portal/src/components/resumes/comments/ResumeCommentListItem.tsx +++ b/apps/portal/src/components/resumes/comments/ResumeCommentListItem.tsx @@ -54,7 +54,7 @@ export default function ResumeCommentListItem({ {/* Description */} - {comment.description} + {/* Upvote and edit */}
diff --git a/apps/portal/src/components/resumes/shared/ResumeExpandableText.tsx b/apps/portal/src/components/resumes/shared/ResumeExpandableText.tsx index 2e79eb51..5c78591b 100644 --- a/apps/portal/src/components/resumes/shared/ResumeExpandableText.tsx +++ b/apps/portal/src/components/resumes/shared/ResumeExpandableText.tsx @@ -1,23 +1,24 @@ import clsx from 'clsx'; -import type { ReactNode } from 'react'; -import { useLayoutEffect, useRef, useState } from 'react'; +import { useEffect, useState } from 'react'; type ResumeExpandableTextProps = Readonly<{ - children: ReactNode; + text: string; }>; export default function ResumeExpandableText({ - children, + text, }: ResumeExpandableTextProps) { - const ref = useRef(null); const [isExpanded, setIsExpanded] = useState(false); const [descriptionOverflow, setDescriptionOverflow] = useState(false); - useLayoutEffect(() => { - if (ref.current && ref.current.clientHeight < ref.current.scrollHeight) { + useEffect(() => { + const lines = text.split(/\r\n|\r|\n/); + if (lines.length > 3) { setDescriptionOverflow(true); + } else { + setDescriptionOverflow(false); } - }, [ref]); + }, [text]); const onSeeActionClicked = () => { setIsExpanded((prevExpanded) => !prevExpanded); @@ -26,13 +27,11 @@ export default function ResumeExpandableText({ return (
- {children} + {text} {descriptionOverflow && (
)}