I attempted to apply styles to two components in order to create space between them, visible on both larger and smaller displays. The code snippet appears as follows:
<div>
<CustomPageHeader
pageTitle={t('offersPage.pageHeader')}
buttonLabel={t('offersPage.newRequestButton')}
buttonHandler={handleRequest}
/>
<Grid classes={{ root: classes.container }} container spacing={4}>
<Filter
onFilter={(payload) => {
// setSelectedFilters((prevState) => ({ ...prevState, ...payload }));
if (payload === null) {
setData(sourceData);
return null;
}
// filtering by offerId
if (payload.offerId !== undefined) {
const filteredData = sourceData.filter(
(item) => payload.offerId === item.offerId.toString(),
);
setData(filteredData);
return null;
}
// filtering by timestamp
if (payload.time !== undefined) {
const filteredData = sourceData.filter((item) => payload.time < item.timestamp);
setData(filteredData);
payload.time = null;
return null;
}
}}
>
<Grid item xs={2}>
<SingleSelection
fullWidth={false}
parameter={'time'}
className={classes.select}
defaultValue="1608969777"
items={[
['Last 30 days', 1608969777],
['Last 10 days', 1613548977],
['Last day', 1613462577],
]}
required
/>
</Grid>
<Grid item xs={2}>
<Autosuggestion
className={classes.autosuggestion}
parameter={'offerId'}
valueAsParameter={true}
options={sourceData.map((option) => option.offerId.toString())}
freeSolo
searchIcon
hintInDropdown
fullWidth={true}
placeholder={t('offersPage.searchForButton')}
/>
</Grid>
</Filter>
//data mapping here
</Grid>
</div>
View the result below:
https://i.stack.imgur.com/rQffa.gif
The margin applies correctly on a bigger display but not on a smaller one. Any suggestions on how to resolve this issue? The Grid component is sourced from the ui-material library.