Fix opening points widget breaks layout

dappforce · Jun 11, 2024 · 810fc20 · 810fc20
1 parent 490a243
commit 810fc20
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 6 deletions.
diff --git a/src/hooks/useTgNoScroll.ts b/src/hooks/useTgNoScroll.ts
@@ -5,14 +5,14 @@ export default function useTgNoScroll() {
   useEffect(() => {
     const overflow = 500
     document.body.style.overflowY = 'hidden'
-    document.body.style.marginTop = `${overflow}px`
-    document.body.style.height = window.innerHeight + overflow + 'px'
+    document.body.style.paddingTop = `${overflow}px`
+    document.body.style.height = window.innerHeight + overflow + 'px !important'
     document.body.style.paddingBottom = `${overflow}px`
     window.scrollTo(0, overflow)
 
     return () => {
       document.body.style.overflowY = 'initial'
-      document.body.style.marginTop = '0'
+      document.body.style.paddingTop = '0'
       document.body.style.height = 'auto'
       document.body.style.paddingBottom = '0'
     }

diff --git a/src/modules/chat/HomePage/ChatContent.tsx b/src/modules/chat/HomePage/ChatContent.tsx
@@ -26,7 +26,10 @@ export default function ChatContent({ chatId, hubId, className }: Props) {
       />
       <ChatRoom
         topElement={
-          <PointsWidget className='absolute left-0 top-0 z-10 w-full' />
+          <PointsWidget
+            className='absolute left-0 top-0 z-10 w-full'
+            isNoTgScroll
+          />
         }
         scrollableContainerClassName='pt-12'
         asContainer

diff --git a/src/modules/points/PointsWidget.tsx b/src/modules/points/PointsWidget.tsx
@@ -21,7 +21,9 @@ import { HiChevronRight, HiXMark } from 'react-icons/hi2'
 import SlotCounter from 'react-slot-counter'
 import { Drawer } from 'vaul'
 
-export default function PointsWidget(props: ComponentProps<'div'>) {
+export default function PointsWidget(
+  props: ComponentProps<'div'> & { isNoTgScroll?: boolean }
+) {
   const sendEvent = useSendEvent()
 
   return (
@@ -30,7 +32,13 @@ export default function PointsWidget(props: ComponentProps<'div'>) {
       direction='top'
       onOpenChange={(open) => {
         // To make bottom menu still clickable when this drawer is open
-        if (open) setTimeout(() => (document.body.style.pointerEvents = ''), 0)
+        setTimeout(() => {
+          if (open) {
+            document.body.style.pointerEvents = ''
+          } else if (props.isNoTgScroll) {
+            document.body.style.paddingTop = '500px'
+          }
+        }, 0)
       }}
     >
       <Drawer.Trigger asChild>