UI: 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

• Style
  • Enhanced the Controls Panel to enable automatic scrolling when content exceeds available space, ensuring improved usability and seamless access to all controls without compromising the interface layout or functionality.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 238dc5d and 31d8cda.

📒 Files selected for processing (1)

• code/core/src/controls/components/ControlsPanel.tsx

✅ Files skipped from review due to trivial changes (1)

• code/core/src/controls/components/ControlsPanel.tsx

---

📝 Walkthrough

Walkthrough

A single-line UI styling change was added to the ControlsPanel component. The AddonWrapper element now includes an overflow: 'auto' property to enable scrolling when content exceeds the container dimensions. No logic or data flow modifications were made.

Changes

Cohort / File(s)	Summary
UI Styling code/core/src/controls/components/ControlsPanel.tsx	Added overflow: 'auto' to AddonWrapper to enable scrolling for overflowing content.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Tip

Try Coding Plans. Let us write the prompt for your AI agent so you can ship faster (with fewer bugs).
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.

[storybook-app-bot]

Package Benchmarks

^{Commit: 31d8cda, ran on 26 February 2026 at 18:24:12 UTC}

No significant changes detected, all good. 👏

[Sidnioulz]

Thanks for the PR @Giada-De-Martino!

The AddonPanel component affects many addons, including third-party community addons, and we usually want to avoid two-side scrollable areas because they're less usable.

So instead of changing AddonPanel, could you please look at the Controls addon, remove the AddonPanel dependency it might have, and add a two-way ScrollArea inside that specific addon panel? I think we already do that for the ActionLogger which you could use as an example.

Thanks,

[Giada-De-Martino]

Hi @Sidnioulz,
I’ve just pushed a new commit implementing the suggested modifications. Please let me know if anything still needs adjustment.
Thank you for the review!

[Sidnioulz]

Could you please try using <ScrollArea horizontal vertical> as suggested? Our preferred style for most scrollbars is to have them appear on hover/focus instead of all the time. With overflow: auto, we end up with a very visible scrollbar at the bottom.

I'm also gonna cc @MichaelArestad to get a second design opinion here. Thinking back on this, I think enabling dual-direction scrolling would lead to a WCAG Reflow violation.

@MichaelArestad do you reckon we can adjust layout in the ArgsTable to make it display in a more list-like style when there is too little space, using a container query? This would eliminate the need to scroll horizontally, and also fix the same layout issue in MDX ArgsTables.

@Giada-De-Martino I suggest waiting for Michael to give us confirmation before you resume work, so we don't waste any of your time :)

[Sidnioulz]

Hi @Giada-De-Martino,

We've talked with Michael and decided to go with a temporary horizontal scrollbar, but using a slightly different architecture. To avoid more back and forth on this small issue, I've opened a PR at #34248. So I'm gonna go ahead and close this one.

Looking forward to your next PR!