Two components overlap each other when screen size is reduced

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>
  );
}