fix: restore attached panel scrolling for plugins

[beaussan]

🎯 Changes

I'm not super convinced by the fix, but it seems to work. It may break unrelated things however, so I'm not sure how to review this one

✅ Checklist

• I have followed the steps in the Contributing guide.
• I have tested this code locally with pnpm test:pr.

🚀 Release Impact

• This change affects published code, and I have generated a changeset.
• This change is docs/CI/dev-only (no release).

Summary by CodeRabbit

• Style
  • Improved layout stability and flexbox rendering across devtools panels with enhanced sizing constraints and container properties for better visual consistency and overflow handling.

[coderabbitai]

📝 Walkthrough

Walkthrough

Three styling files across devtools packages receive flexbox layout enhancements. Changes add min-width: 0 and min-height: 0 constraints to flex containers, set explicit display: flex and flex-direction properties, and define overflow behavior to improve layout stability and prevent unwanted growth in flex zones.

Changes

Cohort / File(s)	Summary
Flexbox Layout Constraints packages/devtools-a11y/src/core/styles/styles.ts, packages/devtools-ui/src/styles/use-styles.ts, packages/devtools/src/styles/use-styles.ts	Added min-width: 0 and min-height: 0 to flex containers, explicit display: flex and flex-direction properties, and overflow rules across root, content, panel, and tab-related containers to stabilize flex layout behavior and ensure proper child element sizing.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐰 With flex containers now constrained and tight,
Zero minimums banish sizing fright,
Column flows and overflow so neat,
Layout harmony, the fix complete! ✨

🚥 Pre-merge checks | ✅ 1 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.
Description check	❓ Inconclusive	The PR description lacks specific details about what changes were made, why they were needed, and their technical impact. The author expresses uncertainty ('not super convinced') without clarifying the actual problem or solution.	Provide clear details about the scrolling issue being fixed, explain the CSS changes (min-height/min-width constraints and flex properties), describe the root cause, and clarify whether this is a proper fix or a temporary workaround.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly summarizes the main change: restoring attached panel scrolling for plugins, which aligns with the CSS modifications addressing layout and scrolling behavior across multiple style files.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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.}

Tip

CodeRabbit can enforce grammar and style rules using `languagetool`.

Configure the reviews.tools.languagetool setting to enable/disable rules and categories. Refer to the LanguageTool Community to learn more.

[nx-cloud]

View your CI Pipeline Execution ↗ for commit eff24eb

Command	Status	Duration	Result
nx affected --targets=test:eslint,test:sherif,t...	✅ Succeeded	1m 48s	View ↗
nx run-many --targets=build --exclude=examples/**	✅ Succeeded	26s	View ↗

---

☁️ Nx Cloud last updated this comment at 2026-03-17 22:50:51 UTC

[pkg-pr-new]

More templates

• ssr
• @tanstack/devtools-example-preact-basic
• @tanstack/devtools-custom-devtools-preact
• @tanstack/react-devtools-a11y-example
• @tanstack/devtools-example-react-basic
• start-repro
• @tanstack/devtools-custom-devtools
• tanstack-start-example-counter
• @tanstack/devtools-example-react-https
• start
• @tanstack/devtools-example-react-time-travel
• @tanstack/solid-devtools-a11y-example
• @tanstack/devtools-example-solid-basic
• @tanstack/devtools-example-devtools-ui
• @tanstack/devtools-example-solid-start
• @tanstack/query-example-vue-basic

@tanstack/devtools

npm i https://pkg.pr.new/@tanstack/devtools@396

@tanstack/devtools-a11y

npm i https://pkg.pr.new/@tanstack/devtools-a11y@396

@tanstack/devtools-client

npm i https://pkg.pr.new/@tanstack/devtools-client@396

@tanstack/devtools-ui

npm i https://pkg.pr.new/@tanstack/devtools-ui@396

@tanstack/devtools-utils

npm i https://pkg.pr.new/@tanstack/devtools-utils@396

@tanstack/devtools-vite

npm i https://pkg.pr.new/@tanstack/devtools-vite@396

@tanstack/devtools-event-bus

npm i https://pkg.pr.new/@tanstack/devtools-event-bus@396

@tanstack/devtools-event-client

npm i https://pkg.pr.new/@tanstack/devtools-event-client@396

@tanstack/preact-devtools

npm i https://pkg.pr.new/@tanstack/preact-devtools@396

@tanstack/react-devtools

npm i https://pkg.pr.new/@tanstack/react-devtools@396

@tanstack/solid-devtools

npm i https://pkg.pr.new/@tanstack/solid-devtools@396

@tanstack/vue-devtools

npm i https://pkg.pr.new/@tanstack/vue-devtools@396

commit: eff24eb