I'm facing an issue with my ReactJS screen. Everything works perfectly until I resize the screen to mobile width (sm of Material UI) and then everything turns into a WhiteScreen. I've been trying to debug this but can't seem to find the root cause. Any assistance would be highly appreciated.
import { Hidden, IconButton, Typography } from '@material-ui/core'
import React, { useEffect, useState } from 'react'
import { useParams } from 'react-router-dom'
import useStyles from './styles/SubscribeNewRatePlans.styles'
return (
<div className={classes.root}>
<div className={classes.header}>
<Hidden mdUp>
<IconButton className={classes.backButton} onClick={onBackClick}>
<BackIcon />
</IconButton>
</Hidden>
<Typography variant="h3" className={classes.title}>
{getTranslate('Subscribe New Rate Plans')}
</Typography>
</div>
<SubscribeNewRatePlansFilters
acc={acc}
setacc={setacc}
dateObject={dateObject}
setdateObject={setdateObject}
inputValue={searchInputValue}
setinputVal={setsearchInputValue}
/>
{acc && dateObject.gregorianEndDate ? (
<SubscribeNewRatePlansItemsBox
rateplans={filteredRatePlans}
loading={loading}
accName={acc?.label || ''}
selectedRatePlans={selectedRatePlans}
setselectedRatePlans={setselectedRatePlans}
ChannelId={params.id}
EndDate={dateObject.gregorianEndDate || ''}
StartDate={dateObject.gregorianStartDate || ''}
onSubscribe={async () => {
await channelSubscribe({
variables: {
input: selectedRatePlans
}
})
.then(({ data: response }) => {
toast.success(response.subscribeChannel.message)
})
.catch((err) => toast.error(err.message))
}}
selectAllRatePlans={selectAllRatePlans}
setSelectAllRatePlans={setSelectAllRatePlans}
rateMultiplier={rateMultiplier}
setRateMultiplier={setRateMultiplier}
showSubmitPaper={showSubmitPaper}
setshowSubmitPaper={setshowSubmitPaper}
acc={acc?.value || ''}
propertyCode={acc?.code || ''}
/>
) : null}
</div>
)
}
This is my CSS:
import { makeStyles } from '@material-ui/core'
import { getDirection } from '../../../localization'
const useStyles = makeStyles((theme) => ({
root: {},
header: {
display: 'flex',
alignItems: 'center'
},
backButton: {
padding: '8px 8px 4px 0',
transform: `rotate(${getDirection() === 'rtl' ? '180deg' : '0deg'})`
},
filtersContainer: {
display: 'flex',
flexWrap: 'wrap',
justifyContent: 'space-between'
},
halfSizeField: {
width: '48%',
[theme.breakpoints.down('sm')]: {
width: '100%'
}
},
searchField: {
width: '100%'
},
itemsBox: {
paddingLeft: 16,
paddingRight: 16,
paddingBottom: 22,
border: '1px solid #e7e7e7',
borderRadius: 16,
minHeight: 350,
[theme.breakpoints.down('sm')]: {
height: 'unset',
paddingRight: 0
}
},
listView: {},
title: {
marginBottom: 20,
marginTop: 30,
paddingBottom: 5,
position: 'relative',
width: 'fit-content'
},
submitFormBox: {
position: 'fixed',
bottom: 50,
width: '60%',
left: 'calc(20% + 57px)',
borderRadius: 24,
padding: 24,
display: 'grid',
gridTemplateColumns: '1fr',
backgroundColor: theme.palette.background.default,
[theme.breakpoints.down('sm')]: {
width: '80%',
left: 'calc(10% + 57px)'
}
}
}))
export default useStyles