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

SeanCassiere · AlemTuzlak · web-flow · commit 28a3f56a19a0 · 2025-12-24T10:07:34.000+01:00
* feat(devtools): expose calculated main panel height as CSS variable

* changeset

---------

Co-authored-by: Alem Tuzlak &lt;t.zlak@hotmail.com&gt;
diff --git a/.changeset/lemon-roses-hammer.md b/.changeset/lemon-roses-hammer.md
@@ -0,0 +1,5 @@
+---
+'@tanstack/devtools': patch
+---
+
+Allow config on the height of the panel
diff --git a/packages/devtools/src/components/main-panel.tsx b/packages/devtools/src/components/main-panel.tsx
@@ -21,6 +21,7 @@ export const MainPanel = (props: {
       id={TANSTACK_DEVTOOLS}
       style={{
         height: pip().pipWindow ? '100vh' : height() + 'px',
+        '--tsd-main-panel-height': pip().pipWindow ? '100vh' : height() + 'px',
       }}
       class={clsx(
         styles().devtoolsPanelContainer(

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@tanstack/devtools': patch
 +---
++
 +Allow config on the height of the panel