From 94c39fdf98e089c525a0a5833e8a3a5859c70365 Mon Sep 17 00:00:00 2001
From: ikprk <168457495+ikprk@users.noreply.github.com>
Date: Thu, 11 Jul 2024 13:18:08 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=A5=87=20Token=20comments=20followup=20(#?=
 =?UTF-8?q?6419)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/CssDrawer/CssDrawer.tsx      | 17 ++++++++---------
 .../views/viewer/VideoView/CommentsSection.tsx  |  2 --
 2 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/packages/atlas/src/components/CssDrawer/CssDrawer.tsx b/packages/atlas/src/components/CssDrawer/CssDrawer.tsx
index 467ee4bfb7..9e3615b386 100644
--- a/packages/atlas/src/components/CssDrawer/CssDrawer.tsx
+++ b/packages/atlas/src/components/CssDrawer/CssDrawer.tsx
@@ -1,6 +1,7 @@
 import styled from '@emotion/styled'
 import { isPropValid } from '@storybook/theming'
-import { ReactNode, useRef } from 'react'
+import { ReactNode } from 'react'
+import useResizeObserver from 'use-resize-observer'
 
 import { SvgActionChevronT } from '@/assets/icons'
 import { cVar, sizes, transitions } from '@/styles'
@@ -14,15 +15,13 @@ type CssDrawerProps = {
 }
 
 export const CssDrawer = ({ children, isActive, className }: CssDrawerProps) => {
-  const drawer = useRef<HTMLDivElement>(null)
+  const { ref, height } = useResizeObserver<HTMLDivElement>({
+    // this is here to trigger the rerender when the children grows in height
+    onResize: () => undefined,
+  })
+
   return (
-    <Drawer
-      flow="column"
-      isActive={isActive}
-      ref={drawer}
-      maxHeight={drawer?.current?.scrollHeight}
-      className={className}
-    >
+    <Drawer flow="column" isActive={isActive} ref={ref} maxHeight={height} className={className}>
       {children}
     </Drawer>
   )
diff --git a/packages/atlas/src/views/viewer/VideoView/CommentsSection.tsx b/packages/atlas/src/views/viewer/VideoView/CommentsSection.tsx
index d269ef9d40..aad580db0e 100644
--- a/packages/atlas/src/views/viewer/VideoView/CommentsSection.tsx
+++ b/packages/atlas/src/views/viewer/VideoView/CommentsSection.tsx
@@ -24,7 +24,6 @@ import { getMemberAvatar } from '@/providers/assets/assets.helpers'
 import { useFee } from '@/providers/joystream'
 import { useUser } from '@/providers/user/user.hooks'
 import { createPlaceholderData } from '@/utils/data'
-import { InfiniteLoadingOffsets } from '@/utils/loading.contants'
 
 import { CommentThread } from './CommentThread'
 import { CommentsSectionHeader, CommentsSectionWrapper, CommentsStyledSection } from './VideoView.styles'
@@ -265,7 +264,6 @@ export const CommentsSection: FC<CommentsSectionProps> = ({
                     return
                   },
                   type: 'infinite',
-                  loadingTriggerOffset: InfiniteLoadingOffsets.VideoTile,
                 }
           }
         />