UI: Fix overflowing addon panel when hidden on initial render

[Sidnioulz]

Closes #30420

What I did

• Reworked the Layout grid to use flex instead, which allows us to have a container above the PanelContainer where we can enforce overflow rules, without actually setting overflow rules on PanelContainer itself (which would break Drag)
• Made the actual addon panel content hidden when the addon is 0px wide/tall, to ensure addons cannot be focused into

I keep thinking a better solution would be not to render those addons. But then of course, users would need to wait for addon UIs to reload when reopening the addon panel. We'd need some data to understand if people who hide the panel tend to keep it hidden, or to hide and show it in quick successions.

Checklist for Contributors

Testing

Not easily testable as it only triggers with particularly large sidebars.

Manual testing

1. Visit http://localhost:6006/?path=/story/example-button--primary
2. Ensure the addon panel points to the bottom area
3. Close it
4. Reload the page
5. Without this PR, the panel should partially re-appear; with this PR, it shouldn't
6. Ensure dragging the addon into / out of the viewport keeps working
7. Ensure scroll area dimensions are well computed within the addon panel when it is reopened

Documentation

ø

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

Summary by CodeRabbit

• Refactor
  • Restructured layout system from grid-based to flex-based architecture for improved responsiveness and code maintainability.
  • Reorganized panel positioning and sizing logic to enable more dynamic layout adjustments and better component encapsulation.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 6195afe

Command	Status	Duration	Result
nx run-many -t compile,check,knip,test,pretty-d...	⛔ Cancelled	5h 3m 17s	View ↗

---

☁️ Nx Cloud last updated this comment at 2026-01-17 18:35:01 UTC

[coderabbitai]

📝 Walkthrough

Walkthrough

This PR restructures the layout system in Layout.tsx by migrating from a grid-based to a flex-based layout architecture. It introduces a new ContentPanelWrapper component to encapsulate main content and optional panels, simplifies LayoutContainer by removing multiple props, and applies inline styling for responsive sizing.

Changes

Cohort / File(s)

Summary

Layout System Refactoring code/core/src/manager/components/layout/Layout.tsx

Migrated desktop layout from grid to flex architecture; introduced ContentPanelWrapper component to handle panel positioning and visibility logic; moved layout orchestration from LayoutContainer to new wrapper and inline styles; updated SidebarContainer with inline width styling; removed typed generic from LayoutContainer signature; adjusted PanelContainer sizing logic for right/bottom panel positioning

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• UI: Allow showing or hiding the addon panel #32348 — Modifies Layout.tsx to refactor how the addon panel's visibility and layout are determined alongside CustomisationControls integration.
• UI: Keep preview frame stable in overall layout #33447 — Alters layout rendering in Layout.tsx to restructure composition of main content and PanelContainer conditional rendering.

✨ Finishing touches

• 📝 Generate docstrings

---

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

[coderabbitai]

Actionable comments posted: 1

📜 Review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 7f193d3 and 0b694f2.

📒 Files selected for processing (1)

• code/core/src/manager/components/layout/Layout.tsx

🧰 Additional context used

📓 Path-based instructions (5)

**/*.{js,jsx,ts,tsx,json,md,html,css,scss}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Format code using Prettier with yarn prettier --write <file>

Files:

• code/core/src/manager/components/layout/Layout.tsx

**/*.{js,jsx,json,html,ts,tsx,mjs}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Run ESLint checks using yarn lint:js:cmd <file> or the full command cross-env NODE_ENV=production eslint --cache --cache-location=../.cache/eslint --ext .js,.jsx,.json,.html,.ts,.tsx,.mjs --report-unused-disable-directives to fix linting errors before committing

Files:

• code/core/src/manager/components/layout/Layout.tsx

**/*.{ts,tsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Enable TypeScript strict mode across all packages

Files:

• code/core/src/manager/components/layout/Layout.tsx

**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

**/*.{ts,tsx,js,jsx}: Export functions from modules if they need to be tested
Do not use console.log, console.warn, or console.error directly unless in isolated files where importing loggers would significantly increase bundle size

Files:

• code/core/src/manager/components/layout/Layout.tsx

code/{core,lib,addons,builders,frameworks,presets}/**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Use logger from storybook/internal/node-logger for server-side logging in Node.js code

Files:

• code/core/src/manager/components/layout/Layout.tsx

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)

• GitHub Check: normal
• GitHub Check: Core Unit Tests, windows-latest
• GitHub Check: nx

🔇 Additional comments (6)

code/core/src/manager/components/layout/Layout.tsx (6)

174-174: LGTM - Dynamic sidebar width applied correctly.

The navSize prop is correctly passed to SidebarContainer and applied in the styled component definition below (lines 244-253).

---

238-238: LGTM - Flex layout correctly applied for desktop.

The migration from grid to flex layout is correctly implemented with flexDirection: 'row' for desktop viewports.

---

244-253: LGTM - SidebarContainer properly refactored for flex layout.

The component correctly accepts and applies the width prop, and flexShrink: 0 ensures the sidebar maintains its size in the flex layout.

---

255-266: LGTM - ContentPanelWrapper layout implementation is solid.

The flex-based layout with overflow: hidden and minWidth: 0 correctly addresses the overflow issue described in #30420. The dynamic flexDirection based on panelPosition properly supports both right and bottom panel layouts.

---

274-274: LGTM - Minimum content width prevents layout collapse.

The minWidth constraint ensures the content area doesn't shrink below a usable size (100px), which is a good defensive measure in the flex layout.

---

209-216: The hidden attribute implementation is correct and will prevent focus across supported browsers.

The HTML hidden attribute is a standard feature specified by WHATWG that prevents element rendering and removes the element from keyboard focus order. Browsers implement this via display:none or content-visibility:hidden, and this behavior is consistently supported across Chrome, Brave, and Safari—no special handling or workarounds required. The React pattern hidden={condition || undefined} correctly toggles the attribute presence. The implementation will work as intended for your use case.

[ghengeveld]

@Sidnioulz please cross-reference this work with #33326
But also I think the original issue is already resolved. Were you able to reproduce?

[Sidnioulz]

@Sidnioulz please cross-reference this work with #33326 But also I think the original issue is already resolved. Were you able to reproduce?

Yes I could repro consistently on next when selecting the last stories before the icons composed SB on our monorepo instance.

[storybook-app-bot]

Package Benchmarks

^{Commit: 6195afe, ran on 17 January 2026 at 13:38:03 UTC}

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

@storybook/react-native-web-vite

	Before	After	Difference
Dependency count	159	159	0
Self size	30 KB	30 KB	🚨 +26 B 🚨
Dependency size	23.00 MB	23.12 MB	🚨 +115 KB 🚨
Bundle Size Analyzer	Link	Link

@storybook/cli

	Before	After	Difference
Dependency count	183	183	0
Self size	775 KB	775 KB	🚨 +139 B 🚨
Dependency size	67.38 MB	67.45 MB	🚨 +69 KB 🚨
Bundle Size Analyzer	Link	Link

@storybook/codemod

	Before	After	Difference
Dependency count	176	176	0
Self size	30 KB	30 KB	🎉 -4 B 🎉
Dependency size	65.95 MB	66.02 MB	🚨 +69 KB 🚨
Bundle Size Analyzer	Link	Link

[ghengeveld]

This was resolved with #33557

Sorry I couldn't get this one to pass CI so I took another approach.