[resumes][fix] fix expandable text not updating

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

@@ -54,7 +54,7 @@ export default function ResumeCommentListItem({
           </div>
 
           {/* Description */}
-          <ResumeExpandableText>{comment.description}</ResumeExpandableText>
+          <ResumeExpandableText text={comment.description} />
 
           {/* Upvote and edit */}
           <div className="flex flex-row space-x-1 pt-1 align-middle">

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

@@ -1,23 +1,24 @@
 import clsx from 'clsx';
-import type { ReactNode } from 'react';
+import { useEffect, useState } from 'react';
-import { useLayoutEffect, useRef, useState } from 'react';
 
 type ResumeExpandableTextProps = Readonly<{
-  children: ReactNode;
+  text: string;
 }>;
 
 export default function ResumeExpandableText({
-  children,
+  text,
 }: ResumeExpandableTextProps) {
-  const ref = useRef<HTMLSpanElement>(null);
   const [isExpanded, setIsExpanded] = useState(false);
   const [descriptionOverflow, setDescriptionOverflow] = useState(false);
 
-  useLayoutEffect(() => {
+  useEffect(() => {
-    if (ref.current && ref.current.clientHeight < ref.current.scrollHeight) {
+    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 (
     <div>
       <span
-        ref={ref}
         className={clsx(
-          'whitespace-pre-wrap text-sm',
+          'line-clamp-3 whitespace-pre-wrap text-sm',
-          'line-clamp-3',
           isExpanded ? 'line-clamp-none' : '',
         )}>
-        {children}
+        {text}
       </span>
       {descriptionOverflow && (
         <p

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

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