added hook to calculate height for btm content

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<HTMLDivElement>) {
+  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<HTMLDivElement>();
+
   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 (
-    <div className={cn(styles.lowerSectionMobile)}>
+    <div className={cn(styles.lowerSectionMobile)} ref={mobileContentRef} style={{ height }}>
       <Tabs defaultActiveKey="0" items={items} />
     </div>
   );