[resumes][fix] fix expandable text bug

apps/portal/src/components/resumes/comments/ResumeCommentListItem.tsx

@@ -86,7 +86,10 @@ export default function ResumeCommentListItem({
               setIsEditingComment={setIsEditingComment}
             />
           ) : (
-            <ResumeExpandableText text={comment.description} />
+            <ResumeExpandableText
+              key={comment.description}
+              text={comment.description}
+            />
           )}
 
           {/* Upvote and edit */}

apps/portal/src/components/resumes/shared/ResumeExpandableText.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import { useEffect, useState } from 'react';
+import { useLayoutEffect, useRef, useState } from 'react';
 
 type ResumeExpandableTextProps = Readonly<{
   text: string;
@@ -8,17 +8,17 @@ type ResumeExpandableTextProps = Readonly<{
 export default function ResumeExpandableText({
   text,
 }: ResumeExpandableTextProps) {
+  const ref = useRef<HTMLSpanElement>(null);
   const [isExpanded, setIsExpanded] = useState(false);
   const [descriptionOverflow, setDescriptionOverflow] = useState(false);
 
-  useEffect(() => {
-    const lines = text.split(/\r\n|\r|\n/);
-    if (lines.length > 3) {
+  useLayoutEffect(() => {
+    if (ref.current && ref.current.clientHeight < ref.current.scrollHeight) {
       setDescriptionOverflow(true);
     } else {
       setDescriptionOverflow(false);
     }
-  }, [text]);
+  }, [ref]);
 
   const onSeeActionClicked = () => {
     setIsExpanded((prevExpanded) => !prevExpanded);
@@ -27,6 +27,7 @@ export default function ResumeExpandableText({
   return (
     <div>
       <span
+        ref={ref}
         className={clsx(
           'line-clamp-3 whitespace-pre-wrap text-sm',
           isExpanded ? 'line-clamp-none' : '',

apps/portal/src/pages/resumes/[resumeId].tsx

@@ -198,7 +198,10 @@ export default function ResumeReviewPage() {
                   aria-hidden="true"
                   className="mr-1.5 h-5 w-5 flex-shrink-0 text-gray-400"
                 />
-                <ResumeExpandableText text={detailsQuery.data.additionalInfo} />
+                <ResumeExpandableText
+                  key={detailsQuery.data.additionalInfo}
+                  text={detailsQuery.data.additionalInfo}
+                />
               </div>
             )}
             <div className="flex w-full flex-col py-4 lg:flex-row">