​[DevTools Bug]: Draggable divider fails to resize panes in shell index.html

[ahmedayman1997]

Website or app

facebook/react/shells/dev/index.html

Repro steps

​Run the DevTools shell locally using npm start.
​Open index.html in the browser.
​Attempt to drag the divider to resize the layout.
​Observed Result: The divider line moves, but the panes (iframe/devtools) remain static because the CSS variables are not linked to the grid template.
​Expected Result: The panes should resize dynamically according to the splitRatio.

index.html

How often does this bug happen?

Every time

DevTools package (automated)

No response

DevTools version (automated)

No response

Error message (automated)

No response

Error call stack (automated)

Error component stack (automated)

GitHub query string (automated)

[ypingmoe]

I’ll quickly check the local index.html in the DevTools shell so I can draft a precise, technically accurate issue response you can post.

You can post this as a solid issue response:

Thanks for the clear repro - I can reproduce this in shells/dev/index.html.

Root cause looks correct: the drag handler updates splitRatio/CSS vars, but the layout grid is using static column sizes, so only the divider visually moves while the panes stay fixed.

A fix should wire the grid template to the same variable being updated during drag, e.g. something like:

• grid-template-columns: var(--left-pane-width) 4px 1fr;
  or
• grid-template-columns: calc(var(--split-ratio) * 1%) 4px calc((100 - var(--split-ratio)) * 1%);
  Then update --split-ratio (or --left-pane-width) on pointer move, and the iframe/DevTools panes resize correctly.

If you want, I can put together a small PR for shells/dev/index.html with this wiring.

[ahmedayman1997]

Great catch! Your analysis confirms exactly what I suspected. Implementing grid-template-columns with the CSS variable is a solid approach to fix this layout desync.
​Please go ahead with the Pull Request (PR). Please make sure to link this issue (#36434) in your PR so we can keep everything tracked together. Looking forward to seeing the fix!

[ypingmoe]

Awesome, thanks for confirming!
I’ll open a PR for the shells/dev/index.html resize fix and link issue #36434 in the PR description so it stays tracked.
I’ll share the PR shortly.