From facf7f8cc96a8a1b516f550628614b1335070b45 Mon Sep 17 00:00:00 2001
From: Hunter Miller <hunter@thisdot.co>
Date: Fri, 16 Jul 2021 17:12:34 -0500
Subject: [PATCH] PostContent: height detect refactor, adding space

Fixes urbit/landscape#739
---
 .../components/Home/Post/PostItem/PostContent.tsx    | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/pkg/interface/src/views/landscape/components/Home/Post/PostItem/PostContent.tsx b/pkg/interface/src/views/landscape/components/Home/Post/PostItem/PostContent.tsx
index 30485a44f8..11836becfb 100644
--- a/pkg/interface/src/views/landscape/components/Home/Post/PostItem/PostContent.tsx
+++ b/pkg/interface/src/views/landscape/components/Home/Post/PostItem/PostContent.tsx
@@ -2,6 +2,7 @@ import { Col, ColProps } from '@tlon/indigo-react';
 import { Post } from '@urbit/api';
 import React, { ReactElement, useCallback, useState } from 'react';
 import styled, { css } from 'styled-components';
+import { useResize } from '~/logic/lib/useResize';
 import { GraphContent } from '~/views/landscape/components/Graph/GraphContent';
 
 type TruncateProps = ColProps & {
@@ -12,6 +13,7 @@ const TruncatedBox = styled(Col)<TruncateProps>`
   display: -webkit-box;
   -webkit-box-orient: vertical;
   ${p => p.truncate && css`
+    margin-bottom: ${p.theme.space[2]}px;
     max-height: 300px;
     mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 60%, transparent 100%);
   `}
@@ -27,15 +29,13 @@ const PostContent = ({ post, isParent }: PostContentProps): ReactElement => {
   const [height, setHeight] = useState(0);
   const showFade = !isParent && height >= 300;
 
-  const measuredRef = useCallback((node) => {
-    if (node !== null) {
-      setHeight(node.getBoundingClientRect().height);
-    }
-  }, []);
+  const resizer = useResize<HTMLDivElement>(useCallback((entry) => {
+    setHeight(entry.target.getBoundingClientRect().height);
+  }, []));
 
   return (
     <TruncatedBox
-      ref={measuredRef}
+      ref={resizer.ref}
       truncate={showFade}
       display="-webkit-box"
       width="90%"