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 && (
-
- {detailsQuery.data.additionalInfo}
-
+
)}