[Bug]: Mobile navigation does not work on screens below 600px

[nerdyman]

Describe the bug

When switching between Sidebar and Canvas on smaller screens (<=600px) the selected story is not maintained and another is selected. This means you cannot view most stories on mobile devices without opening them in new tabs.

Storybook v6 doesn't have this issue - I thought #24292 may have introduced this bug but 7.4.6 also suffers from this issue so I'm not sure when it was introduced.

To Reproduce

https://github.com/nerdyman/storybook-redirects

pnpm i
# Run each SB v6 (:6006) and v7 (:7007).
pnpm run -r storybook

v6

1. Set the browser window width to 600px or lower
2. Go to http://localhost:6006/?path=/story/example-button--secondary
3. Switch between Sidebar and Canvas in the bottom navigation
4. Currently selected story is maintained ✅

v7

1. Set the browser window width to 600px or lower
2. Go to http://localhost:7007/?path=/story/example-button--secondary
3. Switch between Sidebar and Canvas in the bottom navigation
4. http://localhost:7007/?path=/story/example-header--logged-in is selected instead ❌

System

v6

Environment Info:

  System:
    OS: macOS 14.0
    CPU: (8) arm64 Apple M1 Pro
  Binaries:
    Node: 20.9.0 - ~/Library/Caches/fnm_multishells/47573_1698493737022/bin/node
    npm: 10.1.0 - ~/Library/Caches/fnm_multishells/47573_1698493737022/bin/npm
  Browsers:
    Chrome: 118.0.5993.117
    Safari: 17.0
  npmPackages:
    @storybook/addon-essentials: ^6.5.16 => 6.5.16 
    @storybook/addon-interactions: ^6.5.16 => 6.5.16 
    @storybook/addon-links: ^6.5.16 => 6.5.16 
    @storybook/react: ^6.5.16 => 6.5.16 

v7

Storybook Environment Info:

  System:
    OS: macOS 14.0
    CPU: (8) arm64 Apple M1 Pro
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.9.0 - ~/Library/Caches/fnm_multishells/47573_1698493737022/bin/node
    npm: 10.1.0 - ~/Library/Caches/fnm_multishells/47573_1698493737022/bin/npm
    pnpm: 8.5.1 - ~/Library/Caches/fnm_multishells/47573_1698493737022/bin/pnpm <----- active
  Browsers:
    Chrome: 118.0.5993.117
    Safari: 17.0
  npmPackages:
    @storybook/addon-essentials: ^7.5.1 => 7.5.1 
    @storybook/addon-interactions: ^7.5.1 => 7.5.1 
    @storybook/addon-links: ^7.5.1 => 7.5.1 
    @storybook/addon-onboarding: ^1.0.8 => 1.0.8 
    @storybook/blocks: ^7.5.1 => 7.5.1 
    @storybook/react: ^7.5.1 => 7.5.1 
    @storybook/react-vite: ^7.5.1 => 7.5.1 
    @storybook/testing-library: ^0.2.2 => 0.2.2 
    storybook: ^7.5.1 => 7.5.1

Additional context

No response

[jphawk]

Same happens with storybook 7.5.2, upgraded and tested today.

[shilman]

Please try upgrading to the latest 8.0 alpha. We've completely redone the mobile UI for 8.0

npx storybook@next upgrade --prerelease

[mis6ko13]

I've just migrated our corporate storybook to lates v.8.0.5 and mobile navigation seams to freez the whole page.
Specificaly when navigating from search results.

[vanessayuenn]

Fixed in #26807