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]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 9593e9f0-fcd8-4435-9ae9-2eed390922a7

📥 Commits

Reviewing files that changed from the base of the PR and between 604c96d and eff24eb.

📒 Files selected for processing (3)

• packages/devtools-a11y/src/core/styles/styles.ts
• packages/devtools-ui/src/styles/use-styles.ts
• packages/devtools/src/styles/use-styles.ts

---

📝 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 is largely empty, with the author stating uncertainty ('I'm not super convinced by the fix') without explaining what changes were made or their rationale, and all checklist items are unchecked.	Provide a detailed explanation of the changes made, why they fix the scrolling issue, potential side effects, and complete the checklist items to confirm testing and contribution guide compliance.

✅ 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

📝 Coding Plan

• Generate coding plan for human review comments

---

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

[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