How to fix ButtonGroup bleeding out of Grid container Material UI - reactjs

Question

Here is the code and the output it's pretty self-explanatory: I am trying to build a responsive layout and for some reason the button group will bleed out of the container and even get bigger when the screen size decreases.
<Container className="container">
<Grid container>
<Grid item xs={12} md={12} lg={6}>
<Chessboard
position={tour.fen}
isDraggablePiece={isDraggable}
onPieceDrop={onDrop}
customArrows={arrows}
onSquareClick={dropPiece}
onMouseOverSquare={mouseOver}
onMouseOutSquare={mouseOut}
customSquareStyles={{ ...options }}
customBoardStyle={{
borderRadius: "4px",
boxShadow: "0 5px 15px rgba(0, 0, 0, 0.5)",
}}
customDarkSquareStyle={{ background: "#90a2ad" }}
customLightSquareStyle={{ background: "#dfe3e6" }}
/>
<ButtonGroup variant="contained" className="controls">
{isFirst ? (
<Button onClick={randomStart}>Random Start</Button>
) : null}
{tour.visited.length !== 0 ? (
<Button
disabled={tour.completed !== null}
onClick={finishTour}
>
Complete Tour
</Button>
) : null}
{tour.completed !== null ? (
<Button onClick={visualiseComplete}>
Visualise
</Button>
) : null}
{tour.visited.length !== 0 ? (
<Button
onClick={() =>
setArrows(genArrows(tour.visitedStr))
}
>
Show path
</Button>
) : null}
{tour.visited.length !== 0 ? (
<Button onClick={undo}>Undo</Button>
) : null}
{tour.visited.length !== 0 ? (
<Button onClick={reset}>Reset</Button>
) : null}
</ButtonGroup>
</Grid>
<Grid item xs={12} md={12} lg={6}>
<Moves tour={tour} />
</Grid>
</Grid>
{/* <CompletedPanel tour={tour} impossible={impossible} /> */}
</Container>
Desktop version
Mobile version
I expect the the button group to fit inside the container and become stacked vertically

Answer 1

Perhaps make a responsive size value with useTheme and useMediaQuery from Material UI, and try with one or more of the following approaches.
Simplified live demo: stackblitz
Import the helper hooks:
import { useTheme } from '#mui/material/styles';
import useMediaQuery from '#mui/material/useMediaQuery';
In the component, create responsive condition:
const theme = useTheme();
// 👇 Customize this with preferred breakpoints
const matches = useMediaQuery(theme.breakpoints.up('sm'));
In the output, try one or more of these approaches for responsive values:
<ButtonGroup
// 👇 Make size based on responsive value
size={matches ? "medium" : "small"}
variant="contained"
aria-label="outlined primary button group"
// 👇 Define maxWidth for the group
sx={{ maxWidth: "100%" }}
// 👇 Conditional shorter text
>
<Button>{`${matches ? "complete " : ""}tour`}</Button>
<Button>{`${matches ? "show " : ""}path`}</Button>
<Button>undo</Button>
<Button>reset</Button>
</ButtonGroup>
As an alternative option, perhaps also consider to make the ButtonGroup layout horizontal when in smaller screen size:
<ButtonGroup
size={matches ? "medium" : "small"}
// 👇 Conditional orientation
orientation={matches ? "horizontal" : "vertical"}
variant="contained"
aria-label="outlined primary button group"
sx={{ maxWidth: "100%" }}
>
<Button>complete tour</Button>
<Button>show path</Button>
<Button>undo</Button>
<Button>reset</Button>
</ButtonGroup>