feat(devtools): expose calculated main panel height as CSS variable

[SeanCassiere]

🎯 Changes

Exposes the calculated height for the main panel as a CSS variable named --tsd-main-panel-height on the rendered div.

✅ 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).

[changeset-bot]

🦋 Changeset detected

Latest commit: 18fd9d3

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 5 packages

Name	Type
@tanstack/devtools	Patch
@tanstack/preact-devtools	Patch
@tanstack/react-devtools	Patch
@tanstack/solid-devtools	Patch
@tanstack/vue-devtools	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 18fd9d3

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

---

☁️ Nx Cloud last updated this comment at 2025-12-24 09:07:36 UTC

[pkg-pr-new]

More templates

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

@tanstack/devtools

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

@tanstack/devtools-client

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

@tanstack/devtools-ui

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

@tanstack/devtools-utils

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

@tanstack/devtools-vite

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

@tanstack/devtools-event-bus

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

@tanstack/devtools-event-client

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

@tanstack/preact-devtools

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

@tanstack/react-devtools

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

@tanstack/solid-devtools

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

@tanstack/vue-devtools

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

commit: 18fd9d3

[SeanCassiere]

Got to this part and spent way too long trying to figure out what to do with the changesets here 😅

[AlemTuzlak]

@SeanCassiere just an fyi in the future, you click yes on that screen and it generates a file, it gets patch bumped once merged and a PR for changesets is merged so no worries