Do not clip statuses in the middle of a paragraph

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

app/soapbox/components/status-content.tsx

@@ -48,7 +48,7 @@ const StatusContent: React.FC<IStatusContent> = ({
 }) => {
   const history = useHistory();
 
-  const [collapsed, setCollapsed] = useState(false);
+  const [visibleElementsHeight, setVisibleElementsHeight] = useState<number>();
   const [onlyEmoji, setOnlyEmoji] = useState(false);
 
   const node = useRef<HTMLDivElement>(null);
@@ -108,9 +108,20 @@ const StatusContent: React.FC<IStatusContent> = ({
   const maybeSetCollapsed = (): void => {
     if (!node.current) return;
 
-    if (collapsable && onClick && !collapsed) {
+    if (collapsable && !visibleElementsHeight) {
       if (node.current.clientHeight > MAX_HEIGHT) {
-        setCollapsed(true);
+        let visibleElements = 0;
+        let visibleElementsHeight = -16;
+        for (const child of [...node.current.children]) {
+          if (visibleElementsHeight + (child as HTMLDivElement).offsetHeight + 16 <= MAX_HEIGHT) {
+            visibleElements += 1;
+            visibleElementsHeight += (child as HTMLDivElement).offsetHeight + 16;
+          } else {
+            break;
+          }
+          if (visibleElements === node.current.children.length) setVisibleElementsHeight(undefined);
+          setVisibleElementsHeight(visibleElementsHeight);
+        }
       }
     }
   };
@@ -147,7 +158,7 @@ const StatusContent: React.FC<IStatusContent> = ({
   const className = clsx(baseClassName, {
     'cursor-pointer': onClick,
     'whitespace-normal': withSpoiler,
-    'max-h-[640px]': collapsed,
+    'overflow-hidden': !!visibleElementsHeight,
     'leading-normal big-emoji': onlyEmoji,
   });
 
@@ -172,10 +183,13 @@ const StatusContent: React.FC<IStatusContent> = ({
         dangerouslySetInnerHTML={content}
         lang={status.language || undefined}
         size={textSize}
+        style={{
+          maxHeight: visibleElementsHeight,
+        }}
       />,
     ]);
 
-    if (collapsed) {
+    if (visibleElementsHeight) {
       output.push(<ReadMoreButton onClick={onClick} key='read-more' />);
     }