Skip to content

Core: Fix horizontal scrollbar covering part of the toolbar #31704

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jun 16, 2025

Conversation

Sidnioulz
Copy link
Member

@Sidnioulz Sidnioulz commented Jun 7, 2025

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

Copy link
Contributor

@greptile-apps greptile-apps bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

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

Copy link

nx-cloud bot commented Jun 7, 2025

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-pr-benchmarking
Copy link

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

@valentinpalkovic valentinpalkovic merged commit a57459e into next Jun 16, 2025
56 of 57 checks passed
@valentinpalkovic valentinpalkovic deleted the sidnioulz/issue-31703 branch June 16, 2025 13:11
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Bug]: Horizontal scrollbar messes up with the toolbar in mobile view (and on small screens in desktop)
3 participants