From 6bd55a99fb8806cb66cef68cf83405dba9e91df9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Wed, 20 Sep 2023 21:50:38 +0200
Subject: [PATCH] Do not clip statuses in the middle of a paragraph
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/components/status-content.tsx | 24 ++++++++++++++++++-----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/app/soapbox/components/status-content.tsx b/app/soapbox/components/status-content.tsx
index 269e736be..3a2f4aadc 100644
--- a/app/soapbox/components/status-content.tsx
+++ b/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' />);
     }