UI: Ensure Controls panel can scroll horizontally for now

[Sidnioulz]

Closes #33856

What I did

There were a few stale PRs not doing exactly what we needed, and we kinda need to own the decision to introduce a WCAG Reflow violation until we have time to design a narrower controls table for vertical addon panels with @MichaelArestad.

This PR allows AddonPanel to enable bidirectional scrolling, in a non-breaking way with existing code. Then, the Controls panel uses that new prop to fix the reported issue.

Checklist for Contributors

Manual testing

1. Go to a story with lots of controls, e.g. http://localhost:6006/?path=/story/core-controls-conditional--toggle-control&args=colorMode:!false;text:therearefrogseverywhere;dynamicText:evenwhereyoudontexpectthem
2. Make the addon panel vertical and narrow
3. Notice the horizontal scrollbar on hover/focus within the panel

🦋 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 publish.yml --field pr=<PR_NUMBER>

Summary by CodeRabbit

• New Features
  • Addon panels now support optional horizontal scrolling in addition to vertical scrolling. Users can enable independent horizontal scroll for wide content; the horizontal option is off by default to preserve existing behavior. Panels continue to respect the existing vertical-scroll setting.

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 59350a8

Command	Status	Duration	Result
nx run-many -t compile,check,knip,test,pretty-d...	✅ Succeeded	7m 49s	View ↗

---

☁️ Nx Cloud last updated this comment at 2026-03-23 20:52:24 UTC

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: bfd7be5f-c1c3-4ab7-ad02-57c27939cd72

📥 Commits

Reviewing files that changed from the base of the PR and between 25736c6 and 59350a8.

📒 Files selected for processing (2)

• code/core/src/components/components/addon-panel/addon-panel.tsx
• code/core/src/controls/manager.tsx

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

• code/core/src/controls/manager.tsx

🚧 Files skipped from review as they are similar to previous changes (1)

• code/core/src/components/components/addon-panel/addon-panel.tsx

---

📝 Walkthrough

Walkthrough

Adds an optional hasHorizontalScrollbar prop to AddonPanel and updates rendering to use ScrollArea when vertical or horizontal scrolling is enabled. The manager now forwards both scrollbar props to AddonPanel.

Changes

Cohort / File(s)	Summary
AddonPanel Component code/core/src/components/components/addon-panel/addon-panel.tsx	Added optional hasHorizontalScrollbar?: boolean to AddonPanelProps and component signature (default false). Render now uses ScrollArea when hasScrollbar or hasHorizontalScrollbar is true, passing vertical={hasScrollbar} and horizontal={hasHorizontalScrollbar}.
Manager Integration code/core/src/controls/manager.tsx	Updated AddonPanel usage to pass hasHorizontalScrollbar and hasScrollbar along with active.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

---

_{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)

30-30: Fix JSDoc article for readability.

The comment should read “a horizontal scrollbar” instead of “an horizontal scrollbar.”

🤖 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` at line 30,
Update the JSDoc for the horizontal-scrollbar property in the addon-panel
component: change the sentence that currently reads "Whether the panel has an
horizontal scrollbar, `false` by default" to "Whether the panel has a horizontal
scrollbar, `false` by default" so the article is grammatically correct; locate
the JSDoc comment above the horizontal scrollbar prop or related member in
addon-panel.tsx and replace "an" with "a".

🤖 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`:
- Line 30: Update the JSDoc for the horizontal-scrollbar property in the
addon-panel component: change the sentence that currently reads "Whether the
panel has an horizontal scrollbar, `false` by default" to "Whether the panel has
a horizontal scrollbar, `false` by default" so the article is grammatically
correct; locate the JSDoc comment above the horizontal scrollbar prop or related
member in addon-panel.tsx and replace "an" with "a".

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 72458e55-2f81-4ee2-ba0f-f6b88cc8db09

📥 Commits

Reviewing files that changed from the base of the PR and between 87733f1 and 8f02334.

📒 Files selected for processing (2)

• code/core/src/components/components/addon-panel/addon-panel.tsx
• code/core/src/controls/manager.tsx

[JReinhold]

Format is failing, but otherwise looks good.