Two components overlap each other when screen size is reduced - css

Question

My site has a component (NavPanel) that consists of two components (a back button (BackToButton ) and a search field (SearchTextField )). With a standard screen size, they are positioned as they should be, but if the screen sizes are reduced, then these two components overlap each other.
The most optimal for me would be if, with a compressed screen size, the second component (SearchTextField ) will be located under the first (BackToButton ). Tell me how you can solve this problem?
const Style = {
paddingLeft: '8%',
paddingRight: '8%',
minHeight: '70px',
alignItems: 'center',
flexWrap: 'nowrap',
whiteSpace: 'nowrap'
}
export default function NavPanel() {
return (
<Grid container sx={Style}>
<BackToButton />
<SearchTextField />
</Grid>
);
}

Answer 1

Here you go...
You didn't use the grid correctly.
See the forked snippet here.
EDIT 1
A:
B:
EDIT 2
You can change the breakpoint from sm to md. It means that PageNameBackToButton and FilterButtonSearchTextField will be stacked earlier, but A will not happen.
See the forked snippet here.
PageNameBackToButton.jsx
import React from "react";
import { Tooltip } from "#mui/material";
import BackToButton from "./BackToButton";
const PageName = {
color: "#000000",
fontSize: "20px",
fontWeight: "700",
letterSpacing: "0.2px",
paddingRight: "20px"
};
const PageNameBackToButtonContainerStyle = {
width: "50%",
justifyContent: "start",
alignContent: "center"
};
export default function PageNameBackToButton(props) {
return (
<div sx={PageNameBackToButtonContainerStyle}>
<BackToButton />
<div style={{ marginTop: "5px", display: "inline-block" }}>
<span style={PageName}>Some Text</span>
<span>
<Tooltip title={`Here long long text`} placement="right">
<span
style={{ fontSize: "18px", color: "#ef1400", userSelect: "none" }}
>
Live
</span>
</Tooltip>
</span>
</div>
</div>
);
}
FilterButtonSearchTextField.jsx
import { TextField } from "#mui/material";
const FilterButtonSearchTextFieldContainerStyle = {};
const SearchTextField = {};
export default function FilterButtonSearchTextField() {
return (
<div sx={FilterButtonSearchTextFieldContainerStyle}>
<TextField
required
label="Search Search"
size="small"
style={SearchTextField}
/>
</div>
);
}
Filter.jsx
import React from "react";
import { Grid } from "#mui/material";
import FilterButtonSearchTextField from "./FilterButtonSearchTextField";
import PageNameBackToButton from "./PageNameBackToButton";
import { styled } from "#mui/material/styles";
const FilterContainerStyle = {};
const Root = styled("div")(({ theme }) => ({
padding: theme.spacing(1),
[theme.breakpoints.up("md")]: {
display: "flex",
justifyContent: "flex-end"
}
}));
export default function Filter(props) {
const pageName = props.pageName !== undefined ? props.pageName : "";
const showBackToButton =
props.showBackToButton !== undefined ? props.showBackToButton : false;
return (
<Grid container spacing={2} sx={FilterContainerStyle}>
<Grid item md={6} xs={12}>
<PageNameBackToButton
showBackToButton={showBackToButton}
pageName={pageName}
/>
</Grid>
<Grid item md={6} xs={12}>
<Root>
<FilterButtonSearchTextField table={props.table} />
</Root>
</Grid>
</Grid>
);
}

Answer 2

<Grid container> is meaningless without some <Grid item>s inside it.
Just like the Bootstrap,
The grid creates visual consistency between layouts while allowing flexibility across a wide variety of designs. Material Design's responsive UI is based on a 12-column grid layout.
Your code would be like this:
<Grid container spacing={1} sx={Style}>
<Grid item xs={12} sm={6}>
<BackToButton />
</Grid>
<Grid item xs={12} sm={6}>
<SearchTextField />
</Grid>
</Grid>
I strongly recommend reading the MUI Grid Docs.