Fix: make addon panel content scrollable

[Giada-De-Martino]

Closes #33856

What I did

Wrapped the addon panel content in a ScrollArea component to enable both vertical and horizontal scrolling when the panel is positioned on the right.

File modified: ./code/core/src/components/components/addon-panel/addon-panel.tsx

Change introduced:

<ScrollArea vertical horizontal>
  {useUpdate(active, children)}
</ScrollArea>

Checklist for Contributors

Testing

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

• stories
• unit tests
• integration tests
• end-to-end tests

No automated tests were added, as this is a UI behavior fix. Verified manually.

Manual testing

• Start Storybook.
• Open the Addon panel.
• Move the panel to the right side.
• Go to the "Controls" tab.
• Confirm that overflowing content is scrollable vertically and horizontally.

Documentation

• Add or update documentation reflecting your changes
• If you are deprecating/removing a feature, make sure to update
  MIGRATION.MD
• No documentation update required (internal UI fix)

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

• [x ] 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.

Summary by CodeRabbit

• New Features
  • Enabled horizontal scrolling in the addon panel alongside vertical scrolling for improved content visibility.

[coderabbitai]

📝 Walkthrough

Walkthrough

The addon-panel component's ScrollArea configuration is modified to enable horizontal scrolling when a scrollbar is present. The content rendering structure is also reorganized for consistency, with no changes to error handling or control flow logic.

Changes

Cohort / File(s)	Summary
ScrollArea Configuration code/core/src/components/components/addon-panel/addon-panel.tsx	Added horizontal prop to ScrollArea when hasScrollbar is true; restructured child content placement within ScrollArea component.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~5 minutes

Possibly related PRs

• storybookjs/storybook#33326: Removes the hasScrollbar prop usage for AddonPanel, creating a direct relationship with this change that modifies the behavior controlled by that prop.

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

Tip

Issue Planner is now in beta. Read the docs and try it out! Share your feedback on Discord.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

🧹 Nitpick comments (1)

code/core/src/components/components/addon-panel/addon-panel.tsx (1)

40-46: Confirm no double-scrollbar regression for addon content that manages its own horizontal overflow.

Enabling horizontal on the outer ScrollArea is correct for the stated fix. The only scenario to sanity-check is whether any addon (e.g., a data-grid-style Controls table) already wraps its content in its own horizontal scroll container — the outer ScrollArea horizontal would then produce a nested horizontal scrollbar. Given that AriaTabPanel intentionally suppresses its own overflow (overflowY: hidden when hasScrollbar=false) to delegate scroll responsibility entirely to this ScrollArea, the design intent is consistent. Manual verification against a few different addons (not just Controls) is recommended.

Based on learnings from AriaTabPanel.tsx:27-30: "the Panel container intentionally maintains overflowY: hidden… forcing consumers to implement their own scrolling within tab content rather than relying on automatic browser scrolling, preventing double scrollbars and giving full control over scroll behavior."

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@code/core/src/components/components/addon-panel/addon-panel.tsx` around lines
40 - 46, The change enabling horizontal on the outer ScrollArea can cause a
nested horizontal scrollbar for addons that already implement their own
horizontal scrolling; test relevant addons (e.g., Controls data-grid, tables) by
opening them in the panel and verifying there is only one horizontal scrollbar.
If you observe double scrollbars, modify addon-panel.tsx to avoid nesting by
either conditionally passing horizontal to ScrollArea (only when the child does
not manage horizontal overflow) or by forcing the outer container to hide
overflowX (e.g., set overflowX: hidden on the ScrollArea wrapper) so the child’s
scrollbar is the single control; use the identifiers ScrollArea, useUpdate,
hasScrollbar, active, children and remember AriaTabPanel’s overflow behavior
when making this change.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@code/core/src/components/components/addon-panel/addon-panel.tsx`:
- Around line 40-46: The change enabling horizontal on the outer ScrollArea can
cause a nested horizontal scrollbar for addons that already implement their own
horizontal scrolling; test relevant addons (e.g., Controls data-grid, tables) by
opening them in the panel and verifying there is only one horizontal scrollbar.
If you observe double scrollbars, modify addon-panel.tsx to avoid nesting by
either conditionally passing horizontal to ScrollArea (only when the child does
not manage horizontal overflow) or by forcing the outer container to hide
overflowX (e.g., set overflowX: hidden on the ScrollArea wrapper) so the child’s
scrollbar is the single control; use the identifiers ScrollArea, useUpdate,
hasScrollbar, active, children and remember AriaTabPanel’s overflow behavior
when making this change.