BottomNavigation in MUI cannot resize smaller than 400px if containing 5 items

Question

I have a bottom navigation that contains 5 elements. When you resize the window lower than 400px, the bottom navigation doesn't "squeeze", so to say; it remains at a minimum 400px which means a scrollbar appears for the x axis.

You can see a minimal reproducible example here: https://codesandbox.io/s/eloquent-sanderson-epuhdf?file=/src/index.js&resolutionWidth=400&resolutionHeight=675

In the example, the min width actually seems to be marginally wider and it always overflows a little, but the principle is still the same.

What I need to do is ensure the padding/whitespace ebtween the elements squeezes together when there's a screen smaller than 400px. I've tried manually overriding the padding both in the sx of the BottomNavigation component, and with the styled utility. With styled I removed the padding from the last child, but then all of the padding of the rest of the items grew to always fill 400px.

I understand there's always a limit; I can't expect to have 5 items on a 200px wide screen. But I should be able to go a bit lower than 400px. Note: If I jsut have 4 items, it resizes jsut fine.

Here' my code currently:

<BottomNavigation
      value={value}
      onChange={(_, index) => {
        getPageIndex(index);
      }}
      sx={{ maxWidth: "100vw" }}
    >
      // 5 nav icons
    </BottomNavigation>

Answer 1

I found a solution: change the minWidth of action items to 70px. By default it's 80px.

const CustomisedBottomNavigationAction = (props: any) => (
  <BottomNavigationAction sx={{ minWidth: "70px" }} {...props} />
);

then, each child of your BottomNavigation:

<CustomisedBottomNavigationAction
        label={PageNames.Home}
        icon={<HomeIcon />}
        component={RouterLink}
        to={NavigationRoutes.Home}
      />