PostContent: height detect refactor, adding space
Fixes urbit/landscape#739
@@ -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%"
