🐉 Drawers on mobile (#4903)

* Make selects scrollable on mobile * Fix bottom drawer layout * Make drawer consider atlas height instead of viewport
Joystream · Sep 21, 2023 · 43aab28 · 43aab28
1 parent bb2f469
commit 43aab28
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 31 deletions.
diff --git a/packages/atlas/src/components/List/List.tsx b/packages/atlas/src/components/List/List.tsx
@@ -15,7 +15,7 @@ type ListProps = {
 
 export const List: FC<ListProps> = ({ items, size, className, scrollable = false }) => {
   return (
-    <ListWrapper className={className} scrollable={scrollable} size={size}>
+    <ListWrapper data-scroll-lock-scrollable className={className} scrollable={scrollable} size={size}>
       {items.map((item, index) => {
         const component = <ListItem key={index} {...item} size={size} />
 

diff --git a/packages/atlas/src/components/_overlays/BottomDrawer/BottomDrawer.styles.ts b/packages/atlas/src/components/_overlays/BottomDrawer/BottomDrawer.styles.ts
@@ -1,6 +1,5 @@
 import styled from '@emotion/styled'
 
-import { ActionBar } from '@/components/ActionBar'
 import { cVar, zIndex } from '@/styles'
 
 export const DrawerOverlay = styled.div`
@@ -43,7 +42,7 @@ export const Container = styled.div`
   top: var(--size-topbar-height);
   left: 0;
   right: 0;
-  height: calc(100vh - var(--size-topbar-height));
+  height: calc(100% - var(--size-topbar-height));
   display: flex;
   flex-direction: column;
   background-color: ${cVar('colorBackground')};
@@ -75,20 +74,15 @@ export const Container = styled.div`
   }
 `
 
-type ScrollContainerProps = {
-  actionBarHeight?: number
-  fixedScrollbar?: boolean
-}
-export const ScrollContainer = styled.div<ScrollContainerProps>`
+export const Outer = styled.div`
+  position: relative;
   flex: 1;
-  margin-bottom: ${({ actionBarHeight = 0 }) => actionBarHeight}px;
-  overflow-y: ${({ fixedScrollbar }) => (fixedScrollbar ? 'scroll' : 'auto')};
-  overflow-x: hidden;
+  width: 100%;
 `
 
-export const StyledActionBar = styled(ActionBar)`
-  position: fixed;
-  bottom: 0;
-  right: 0;
-  left: 0;
+export const Inner = styled.div<{ fixedScrollbar?: boolean }>`
+  position: absolute;
+  inset: 0;
+  overflow-x: hidden;
+  overflow-y: ${({ fixedScrollbar }) => (fixedScrollbar ? 'scroll' : 'auto')};
 `
diff --git a/packages/atlas/src/components/_overlays/BottomDrawer/BottomDrawer.tsx b/packages/atlas/src/components/_overlays/BottomDrawer/BottomDrawer.tsx
@@ -1,14 +1,13 @@
 import { FC, PropsWithChildren, useEffect, useState } from 'react'
 import { CSSTransition } from 'react-transition-group'
-import useResizeObserver from 'use-resize-observer'
 
-import { ActionBarProps } from '@/components/ActionBar'
+import { ActionBar, ActionBarProps } from '@/components/ActionBar'
 import { DrawerHeader } from '@/components/DrawerHeader'
 import { useHeadTags } from '@/hooks/useHeadTags'
 import { useOverlayManager } from '@/providers/overlayManager'
 import { cVar } from '@/styles'
 
-import { Container, DrawerOverlay, ScrollContainer, StyledActionBar } from './BottomDrawer.styles'
+import { Container, DrawerOverlay, Inner, Outer } from './BottomDrawer.styles'
 
 export type BottomDrawerProps = PropsWithChildren<{
   isOpen: boolean
@@ -36,10 +35,6 @@ export const BottomDrawer: FC<BottomDrawerProps> = ({
   const { lastOverlayId, decrementOverlaysOpenCount, incrementOverlaysOpenCount } = useOverlayManager()
   const [overlayId, setOverlayId] = useState<string | null>(null)
 
-  const actionBarActive = actionBar?.isActive ?? true
-  const { ref: actionBarRef, height: _actionBarHeight } = useResizeObserver({ box: 'border-box' })
-  const actionBarHeight = actionBarActive ? _actionBarHeight : 0
-
   useEffect(() => {
     if (isOpen === cachedIsOpen) return
 
@@ -92,14 +87,13 @@ export const BottomDrawer: FC<BottomDrawerProps> = ({
       >
         <Container role="dialog">
           <DrawerHeader title={title} label={titleLabel} onCloseClick={onClose} />
-          <ScrollContainer
-            data-scroll-lock-scrollable
-            actionBarHeight={actionBarHeight}
-            fixedScrollbar={fixedScrollbar}
-          >
-            {children}
-          </ScrollContainer>
-          {actionBar ? <StyledActionBar ref={actionBarRef} {...actionBar} /> : null}
+          <Outer>
+            <Inner fixedScrollbar={fixedScrollbar} data-scroll-lock-scrollable>
+              {children}
+            </Inner>
+          </Outer>
+
+          {actionBar ? <ActionBar {...actionBar} /> : null}
         </Container>
       </CSSTransition>
     </>