[Bug]: Mediquery problem with panelPosition on the right

[unleashit]

Describe the bug

When the panel (with controls, etc.) is set to the right, either manually by the user or as part of the manager config, it doesn't collapse as expected on medium screens.

See this screen cast:

On medium width screens, the panel should either collapse to the bottom (IMO best since the sidebar is still visible as a column) or be hidden.

When the panel is set to the bottom, there are no issues:

To Reproduce

When the panel is set to the right, use dev tools to slowly shink the window (or use a tablet). At some points, the viewport will be too narrow.

System

System:
    OS: Linux 5.15 Ubuntu 20.04.6 LTS (Focal Fossa)
    CPU: (8) x64 Intel(R) Core(TM) i7-4720HQ CPU @ 2.60GHz
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 20.12.2 - ~/.nvm/versions/node/v20.12.2/bin/node
    npm: 10.5.2 - ~/.nvm/versions/node/v20.12.2/bin/npm
    pnpm: 8.15.6 - ~/.nvm/versions/node/v20.12.2/bin/pnpm <----- active
  Browsers:
    Chrome: 123.0.6312.122
  npmPackages:
    @storybook/addon-a11y: ^8.0.8 => 8.0.8
    @storybook/addon-actions: ^8.0.8 => 8.0.8
    @storybook/addon-essentials: ^8.0.8 => 8.0.8
    @storybook/addon-interactions: ^8.0.8 => 8.0.8
    @storybook/addon-links: ^8.0.8 => 8.0.8
    @storybook/blocks: ^8.0.8 => 8.0.8
    @storybook/components: ^8.0.8 => 8.0.8
    @storybook/core-events: ^8.0.8 => 8.0.8
    @storybook/manager-api: ^8.0.8 => 8.0.8
    @storybook/preview-api: ^8.0.8 => 8.0.8
    @storybook/react: ^8.0.8 => 8.0.8
    @storybook/react-vite: ^8.0.8 => 8.0.8
    @storybook/test: ^8.0.8 => 8.0.8
    @storybook/theming: ^8.0.8 => 8.0.8
    eslint-plugin-storybook: ^0.8.0 => 0.8.0
    storybook: ^8.0.8 => 8.0.8

Additional context

No response