Skip to content

[Bug]: Storybook addon panel visible when it should be hidden #30420

@psyrendust

Description

@psyrendust

Describe the bug

When viewing a story page, if you navigate directly to the page or refresh the
story you will notice that the Addons panel below the story will be visible if
it was previously hidden. This is causing the whole page to be pushed up by
40px. The shortcuts button in the sidebar and the toolbar above the story
become inaccessible.

This seems to only be a problem when you have a more than 53 stories and you
are viewing the 54+ story and do a refresh.

I was able to confirm this behavior on Storybook version 8.4.7 and 8.5.2, on Brave, Chrome, and Safari.

The example project was created with npx storybook@latest init. I then generated a
bunch of simple stories based on a template.

Image

Reproduction link

https://github.com/psyrendust/storybook-bug

Reproduction steps

  1. Clone the example repo https://github.com/psyrendust/storybook-bug
  2. yarn install
  3. yarn storybook
  4. Navigate to example-button--primary
  5. This only happens on initial page load, so refresh the page

If you navigate to example-button--docs
and then click on Example/Button/Primary button in the sidebar you'll notice the bug is not there
anymore.

System

Storybook Environment Info:

  System:
    OS: macOS 15.2
    CPU: (16) arm64 Apple M3 Max
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.13.0 - ~/.nvm/versions/node/v20.13.0/bin/node
    Yarn: 1.22.22 - ~/.nvm/versions/node/v20.13.0/bin/yarn <----- active
    npm: 10.9.0 - ~/.nvm/versions/node/v20.13.0/bin/npm
    pnpm: 9.0.5 - ~/.nvm/versions/node/v20.13.0/bin/pnpm
  Browsers:
    Chrome: 132.0.6834.111
    Edge: 132.0.2957.127
    Safari: 18.2
  npmPackages:
    @storybook/addon-essentials: 8.5.2 => 8.5.2
    @storybook/addon-interactions: 8.5.2 => 8.5.2
    @storybook/addon-onboarding: 8.5.2 => 8.5.2
    @storybook/addon-webpack5-compiler-swc: 2.0.0 => 2.0.0
    @storybook/blocks: 8.5.2 => 8.5.2
    @storybook/react: 8.5.2 => 8.5.2
    @storybook/react-webpack5: 8.5.2 => 8.5.2
    @storybook/test: 8.5.2 => 8.5.2
    storybook: 8.5.2 => 8.5.2

Additional context

No response

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions