diff --git a/packages/pl-fe/src/components/status-content.tsx b/packages/pl-fe/src/components/status-content.tsx index 79815b582..8c26f6062 100644 --- a/packages/pl-fe/src/components/status-content.tsx +++ b/packages/pl-fe/src/components/status-content.tsx @@ -1,6 +1,6 @@ import clsx from 'clsx'; import parse, { Element, type HTMLReactParserOptions, domToReact, type DOMNode } from 'html-react-parser'; -import React, { useState, useRef, useLayoutEffect, useMemo } from 'react'; +import React, { useState, useRef, useLayoutEffect, useMemo, useEffect } from 'react'; import { FormattedMessage } from 'react-intl'; import { Link } from 'react-router-dom'; @@ -66,8 +66,10 @@ const StatusContent: React.FC = React.memo(({ const [collapsed, setCollapsed] = useState(false); const [onlyEmoji, setOnlyEmoji] = useState(false); + const [lineClamp, setLineClamp] = useState(true); const node = useRef(null); + const spoilerNode = useRef(null); const maybeSetCollapsed = (): void => { if (!node.current) return; @@ -169,6 +171,10 @@ const StatusContent: React.FC = React.memo(({ return parse(parsedHtml, options); }, [parsedHtml]); + useEffect(() => { + setLineClamp(!spoilerNode.current || spoilerNode.current.clientHeight >= 96); + }, [spoilerNode.current]); + const withSpoiler = status.spoiler_text.length > 0; const spoilerText = status.spoilerMapHtml && status.currentLanguage @@ -191,8 +197,9 @@ const StatusContent: React.FC = React.memo(({ output.push( {expandable && (