In the theme, allow for width and height to take part in a breakpoint definition

Summary 💡

We can already define custom breakpoints, like:

    const theme = createTheme({
      breakpoints: {
        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
        //@ts-ignore
        values: {
          mobile: 0,
          tablet: 640,
          laptop: 1024,
          desktop: 1280,
        },
      },
    });

that works ok when devices are in portrait. But what if people rotate their phones?
They would suddenly get the tablet-designs, since now width > 640 for most modern phones but we still might not want to show the tablet-designs on mobile phones.

I would love if we could define mobile as:

@media (max-width: 600px), (max-height: 600px) so phones in both landscape and portrait are under the mobile breakpoint.

Examples 🌈

With the <Grid> component for example we can do:

              <Grid item xs={12} sm={3}>

now, I would like this grid to not change, when going from Portrait to Landscape on iPhones.

Motivation 🔦

Keeping designs consistent between landscape and portrait on mobile phones.

Start by tracing how createTheme handles breakpoints.values and how the Grid xs/sm example consumes those breakpoint definitions. Check the existing breakpoint behavior for portrait and landscape viewport dimensions, then define the width-and-height breakpoint behavior so the mobile layout remains unchanged when an iPhone rotates.