diff --git a/web/components/ui/Content/Content.tsx b/web/components/ui/Content/Content.tsx index 48e61baf9..ece7800ec 100644 --- a/web/components/ui/Content/Content.tsx +++ b/web/components/ui/Content/Content.tsx @@ -1,6 +1,6 @@ import { useRecoilState, useRecoilValue } from 'recoil'; import { Layout, Tabs, Spin } from 'antd'; -import { FC, useEffect, useState } from 'react'; +import { FC, MutableRefObject, useEffect, useRef, useState } from 'react'; import cn from 'classnames'; import dynamic from 'next/dynamic'; import { LOCAL_STORAGE_KEYS, getLocalStorage, setLocalStorage } from '../../../utils/localStorage'; @@ -84,6 +84,27 @@ const DesktopContent = ({ name, streamTitle, summary, tags, socialHandles, extra ); }; +function useHeight(ref: MutableRefObject) { + const [contentH, setContentH] = useState(0); + const handleResize = () => { + if (!ref.current) return; + const fromTop = ref.current.getBoundingClientRect().top; + const { innerHeight } = window; + setContentH(innerHeight - fromTop); + }; + + useEffect(() => { + handleResize(); + window.addEventListener('resize', handleResize); + + return () => { + window.removeEventListener('resize', handleResize); + }; + }, []); + + return contentH; +} + const MobileContent = ({ name, streamTitle, @@ -98,6 +119,9 @@ const MobileContent = ({ if (!currentUser) { return null; } + + const mobileContentRef = useRef(); + const { id, displayName } = currentUser; const chatContent = showChat && ( @@ -106,7 +130,6 @@ const MobileContent = ({ usernameToHighlight={displayName} chatUserId={id} isModerator={false} - height="40vh" /> ); @@ -131,8 +154,10 @@ const MobileContent = ({ { label: 'Followers', key: '3', children: followersTabContent }, ]; + const height = `${useHeight(mobileContentRef)}px`; + return ( -
+
);