Core: Fix horizontal scrollbar covering part of the toolbar

[Sidnioulz]

Closes #31703

What I did

Fixed the horizontal scrollbar of the toolbar eating up part of the UI real estate

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

Note

This section of the UI doesn't appear to have dedicated UTs or stories. Please let me know if you'd like me to add some.

Manual testing

1. Open your fav Storybook instance
2. Resize the window until a scrollbar appears for the toolbar
3. Notice that the toolbar appears below the toolbar and not over it

-->

Documentation

not relevant

Checklist for Maintainers

• When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli-storybook/src/sandbox-templates.ts

• Make sure this PR contains one of the labels below:

  Available labels

  • bug: Internal changes that fixes incorrect behavior.
  • maintenance: User-facing maintenance tasks.
  • dependencies: Upgrading (sometimes downgrading) dependencies.
  • build: Internal-facing build tooling & test updates. Will not show up in release changelog.
  • cleanup: Minor cleanup style change. Will not show up in release changelog.
  • documentation: Documentation only changes. Will not show up in release changelog.
  • feature request: Introducing a new feature.
  • BREAKING CHANGE: Changes that break compatibility in some way with current major version.
  • other: Changes that don't fit in the above categories.

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=<PR_NUMBER>

Greptile Summary

Fixed layout issue in the preview toolbar where horizontal scrollbars were overlapping with content by removing fixed height constraints and adjusting positioning logic.

• Modified code/core/src/manager/components/preview/Toolbar.tsx to prevent scrollbar overlap with toolbar content
• Removed fixed height from main Toolbar container while maintaining 40px height for inner content
• Adjusted absolute positioning of ToolbarInner component for better scrollbar placement
• Improved mobile and small screen usability by ensuring scrollbar appears below toolbar
• Enhanced overall UI real estate usage by fixing scrollbar positioning

[greptile-apps]

LGTM

_{1 file reviewed, no comments
Edit PR Review Bot Settings | Greptile}

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 3e26994.

Command	Status	Duration	Result
nx run-many -t build --parallel=3	✅ Succeeded	1m 15s	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-06-16 10:55:11 UTC

[storybook-app-bot]

Package Benchmarks

^{Commit: 3e26994, ran on 16 June 2025 at 11:00:46 UTC}

The following packages have significant changes to their size or dependencies:

storybook

	Before	After	Difference
Dependency count	49	49	0
Self size	31.85 MB	31.87 MB	🚨 +15 KB 🚨
Dependency size	17.41 MB	17.41 MB	0 B
Bundle Size Analyzer	Link	Link

sb

	Before	After	Difference
Dependency count	50	50	0
Self size	1 KB	1 KB	0 B
Dependency size	49.26 MB	49.27 MB	🚨 +15 KB 🚨
Bundle Size Analyzer	Link	Link

@storybook/cli

	Before	After	Difference
Dependency count	216	216	0
Self size	582 KB	582 KB	0 B
Dependency size	94.58 MB	94.59 MB	🚨 +15 KB 🚨
Bundle Size Analyzer	Link	Link

@storybook/codemod

	Before	After	Difference
Dependency count	185	185	0
Self size	31 KB	31 KB	0 B
Dependency size	78.71 MB	78.72 MB	🚨 +15 KB 🚨
Bundle Size Analyzer	Link	Link