Looking to enhance the responsiveness of my web design project, I aim to create a horizontally scrollable ToggleButton using Mui. The goal is to have the buttons adjust when the screen width becomes too narrow to display all three buttons at once, allowing for horizontal scrolling. Here is how it currently appears with enough width to display 3 buttons: https://i.stack.imgur.com/r3ofH.png
In situations where the screen width is insufficient, the idea is to move the right button off-screen and enable horizontal scrolling as shown below: https://i.stack.imgur.com/Woure.png
This is the implementation of the ToggleButton:
export const StyledToggleButtonGroupWheelsMobile = styled(ToggleButtonGroup)`
display: flex;
margin: 12px 16px 9px 11px;
align-items: center;
justify-content: center;
color: ${({ theme }) => theme.palette.white};
`;
export const StyledToggleButtonWheelsMobile = styled(ToggleButton)`
font-size: 16px;
font-weight: bold;
font-family: Poppins;
margin: 5px;
padding: 5px 14px 6px 13px;
border-radius: 4px !important;
border: none;
height: 35px;
`;