Add mobile drawer

src/app/components/BuildBanner/index.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react'
+import { forwardRef, ForwardRefRenderFunction } from 'react'
 import { useTranslation } from 'react-i18next'
 import Alert from '@mui/material/Alert'
 import { styled } from '@mui/material/styles'
@@ -22,7 +22,7 @@ const StyledAlert = styled(Alert)(({ theme }) => ({
   },
 }))
 
-export const BuildBanner: FC = () => {
+const BuildBannerCmp: ForwardRefRenderFunction<Alert | null> = (_, ref) => {
   const { t } = useTranslation()
 
   if (window.location.origin === deploys.localhost) {
@@ -33,7 +33,7 @@ export const BuildBanner: FC = () => {
   }
   if (window.location.origin === deploys.staging) {
     return (
-      <StyledAlert severity="warning">
+      <StyledAlert ref={ref} severity="warning">
         {t('banner.buildStaging')}
         <Link
           component={RouterLink}
@@ -46,5 +46,11 @@ export const BuildBanner: FC = () => {
       </StyledAlert>
     )
   }
-  return <StyledAlert severity="warning">{t('banner.buildPreview')}</StyledAlert>
+  return (
+    <StyledAlert ref={ref} severity="warning">
+      {t('banner.buildPreview')}
+    </StyledAlert>
+  )
 }
+
+export const BuildBanner = forwardRef(BuildBannerCmp)

src/app/components/OfflineBanner/index.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react'
+import { FC, forwardRef, ForwardRefRenderFunction } from 'react'
 import { useTranslation } from 'react-i18next'
 import Alert from '@mui/material/Alert'
 import { styled } from '@mui/material/styles'
@@ -22,30 +22,39 @@ const StyledAlert = styled(Alert)(({ theme }) => ({
   },
 }))
 
-export const NetworkOfflineBanner: FC<{ wantedNetwork?: Network }> = ({ wantedNetwork }) => {
+const NetworkOfflineBannerCmp: ForwardRefRenderFunction<Alert | null, { wantedNetwork?: Network }> = (
+  { wantedNetwork },
+  ref,
+) => {
   const scope = useScopeParam()
   const { t } = useTranslation()
   const targetNetwork = wantedNetwork || scope?.network || Network.mainnet
   const isNetworkOffline = useIsApiOffline(targetNetwork)
   const networkNames = getNetworkNames(t)
   const target = networkNames[targetNetwork]
   return isNetworkOffline ? (
-    <StyledAlert severity="warning">{t('home.apiOffline', { target })}</StyledAlert>
+    <StyledAlert ref={ref} severity="warning">
+      {t('home.apiOffline', { target })}
+    </StyledAlert>
   ) : null
 }
 
-export const RuntimeOfflineBanner: FC = () => {
+export const NetworkOfflineBanner = forwardRef(NetworkOfflineBannerCmp)
+
+const RuntimeOfflineBannerCmp: ForwardRefRenderFunction<Alert | null> = (_, ref) => {
   const scope = useRequiredScopeParam()
   const { t } = useTranslation()
 
   const { outOfDate, lastUpdate } = useRuntimeFreshness(scope)
   if (!outOfDate) return null
   const target = getNameForScope(t, scope)
   return (
-    <StyledAlert severity="warning">
+    <StyledAlert ref={ref} severity="warning">
       {lastUpdate
         ? t('home.runtimeOutOfDateSince', { target, lastUpdate })
         : t('home.runtimeOutOfDate', { target })}
     </StyledAlert>
   )
 }
+
+export const RuntimeOfflineBanner = forwardRef(RuntimeOfflineBannerCmp)

src/app/components/PageLayout/Header.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react'
+import { FC, useLayoutEffect, useRef } from 'react'
 import AppBar from '@mui/material/AppBar'
 import Grid from '@mui/material/Unstable_Grid2'
 import useScrollTrigger from '@mui/material/useScrollTrigger'
@@ -10,6 +10,7 @@ import Box from '@mui/material/Box'
 import { useScopeParam } from '../../hooks/useScopeParam'
 import { BuildBanner } from '../BuildBanner'
 import { NetworkOfflineBanner, RuntimeOfflineBanner } from '../OfflineBanner'
+import Alert from '@mui/material/Alert'
 
 export const Header: FC = () => {
   const theme = useTheme()
@@ -19,6 +20,38 @@ export const Header: FC = () => {
     disableHysteresis: true,
     threshold: 0,
   })
+  const buildBannerRef = useRef<(typeof Alert & HTMLElement) | null>(null)
+  const networkOfflineBannerRef = useRef<(typeof Alert & HTMLElement) | null>(null)
+  const runtimeOfflineBannerRef = useRef<(typeof Alert & HTMLElement) | null>(null)
+
+  useLayoutEffect(() => {
+    if (!isMobile) {
+      return
+    }
+
+    const bodyStyles = document.body.style
+
+    if (buildBannerRef.current !== null) {
+      const buildBannerHeight = buildBannerRef.current?.clientHeight
+      bodyStyles.setProperty('--app-build-banner-height', `${buildBannerHeight?.toFixed(2) || 0}px`)
+    }
+
+    if (networkOfflineBannerRef.current !== null) {
+      const networkOfflineBannerHeight = networkOfflineBannerRef.current?.clientHeight
+      bodyStyles.setProperty(
+        '--app-network-offline-banner-height',
+        `${networkOfflineBannerHeight?.toFixed(2) || 0}px`,
+      )
+    }
+
+    if (runtimeOfflineBannerRef.current !== null) {
+      const runtimeOfflineBannerHeight = runtimeOfflineBannerRef.current?.clientHeight
+      bodyStyles.setProperty(
+        '--app-runtime-offline-banner-height',
+        `${runtimeOfflineBannerHeight?.toFixed(2) || 0}px`,
+      )
+    }
+  })
 
   return (
     <AppBar
@@ -36,9 +69,9 @@ export const Header: FC = () => {
           : 'none',
       }}
     >
-      <BuildBanner />
-      <NetworkOfflineBanner />
-      {scope && <RuntimeOfflineBanner />}
+      <BuildBanner ref={buildBannerRef} />
+      <NetworkOfflineBanner ref={networkOfflineBannerRef} />
+      {scope && <RuntimeOfflineBanner ref={runtimeOfflineBannerRef} />}
       <Box sx={{ px: '15px' }}>
         <Grid
           container

src/app/components/ParaTimePicker/index.tsx

@@ -2,7 +2,7 @@ import { FC, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Box from '@mui/material/Box'
 import Button from '@mui/material/Button'
-import Drawer from '@mui/material/Drawer'
+import Drawer, { drawerClasses } from '@mui/material/Drawer'
 import KeyboardDoubleArrowRightIcon from '@mui/icons-material/KeyboardDoubleArrowRight'
 import KeyboardDoubleArrowLeftIcon from '@mui/icons-material/KeyboardDoubleArrowLeft'
 import Divider from '@mui/material/Divider'
@@ -19,17 +19,24 @@ import { LayerMenu } from './LayerMenu'
 import { LayerDetails } from './LayerDetails'
 import HighlightOff from '@mui/icons-material/HighlightOff'
 import { RouteUtils } from '../../utils/route-utils'
+import { styled } from '@mui/material/styles'
 
 type ParaTimePickerProps = {
   onClose: () => void
   onConfirm: (network: Network, layer: Layer) => void
   open: boolean
 }
 
+const ParaTimePickerDrawer = styled(Drawer)(() => ({
+  [`.${drawerClasses.root}`]: {
+    height: '100vh',
+  },
+}))
+
 export const ParaTimePicker: FC<ParaTimePickerProps> = ({ onClose, onConfirm, open }) => (
-  <Drawer anchor="top" open={open} onClose={onClose}>
+  <ParaTimePickerDrawer anchor="top" open={open} onClose={onClose}>
     <ParaTimePickerContent onClose={onClose} onConfirm={onConfirm} />
-  </Drawer>
+  </ParaTimePickerDrawer>
 )
 
 type ParaTimePickerContentProps = Omit<ParaTimePickerProps, 'open'>

src/styles/index.css

@@ -1,6 +1,12 @@
 @import '../../node_modules/@fontsource/figtree/variable.css';
 @import '../../node_modules/@fontsource/roboto-mono/variable.css';
 
+:root {
+  --app-build-banner-height: 0px;
+  --app-network-offline-banner-height: 0px;
+  --app-runtime-offline-banner-height: 0px;
+}
+
 html {
   scroll-behavior: smooth;
 }

src/styles/theme/defaultTheme.ts

@@ -6,6 +6,8 @@ import { inputBaseClasses } from '@mui/material/InputBase'
 import { inputAdornmentClasses } from '@mui/material/InputAdornment'
 import { tabClasses } from '@mui/material/Tab'
 import { menuItemClasses } from '@mui/material/MenuItem'
+import { drawerClasses } from '@mui/material/Drawer'
+import { modalClasses, paperClasses } from '@mui/material'
 
 declare module '@mui/material/styles' {
   interface Palette {
@@ -35,6 +37,7 @@ declare module '@mui/material/styles' {
   }
 
   interface PaletteColor extends CustomLayoutPalette {}
+
   interface SimplePaletteColorOptions extends CustomLayoutPalette {}
 }
 
@@ -69,6 +72,7 @@ declare module '@mui/material/Chip' {
   export interface ChipPropsColorOverrides {
     tertiary: true
   }
+
   export interface ChipPropsVariantOverrides {
     ['outlined-selected']: true
   }
@@ -495,6 +499,23 @@ export const defaultTheme = createTheme({
           borderRadius: '0 0 12px 12px',
           padding: `${theme.spacing(4)} 5%`,
         }),
+        modal: ({ theme }) => ({
+          [theme.breakpoints.down('sm')]: {
+            [`& .${modalClasses.backdrop}`]: {
+              display: 'none',
+            },
+          },
+        }),
+        paper: ({ theme }) => ({
+          [theme.breakpoints.down('sm')]: {
+            height: `calc(100vh - var(--app-build-banner-height) - var(--app-network-offline-banner-height) - var(--app-runtime-offline-banner-height) - ${theme.spacing(
+              6,
+            )})`,
+            top: `calc(var(--app-build-banner-height) + var(--app-network-offline-banner-height) + var(--app-runtime-offline-banner-height) + ${theme.spacing(
+              6,
+            )})`,
+          },
+        }),
       },
     },
     MuiLink: {