Unable to resize smaller than widest component

[wesbos]

If a component has a couple of props, React Dev Tools makes the DOM pane as wide as the widest one. This makes it really hard to use them when docked to the side.

Ideally something like this would just cause wrapping or horizontal scroll. I don't think this was an issue until about the last week.

[sophiebits]

Weird, it should do a horizontal scroll.

[sophiebits]

This is what I see on the React site:

[jaredly]

flexbox implementations are evolving (well, coming more in line with the spec), and result in issues like this. I think adding a min-width: 0 or two would fix this problem. What version of Chrome are you running?

[wesbos]

I'm on Chrome Canary - I think I've figured out why its doing it. When I try resize, either to the left or the right, the width of the props/state panel just grows indefinitely.

If I take the inline width off, it snaps to overflow scroll again. But upon resizing it, the inline width comes back.

Here is a video: http://wes.io/dl31

[FutureKode]

I am also seeing this issue Chrome Version 48.0.2552.0 dev (64-bit)

[wesbos]

Anyone else having this issue? It still persists for me.

[ESWAT]

Yup, still see this in 49.0.2568.0 canary.

FWIW this doesn’t happen in Firefox.

[sillero]

Still an issue on Chrome (Mac) Version 49.0.2572.0 canary (64-bit)

[revolunet]

Same here :)

The panel shows a resize cursor but doesnt work at all, stucked on the longer line width.

[Ajwah]

Same here as well.
The panel doesn't allow me to resize.

[wesbos]

@spicyj Do you know where in the codebase the resizing code is? This is still an issue for me and a pretty big pain on smaller screens.

[revolunet]

i bet on here : https://github.com/facebook/react-devtools/blob/master/frontend/SplitPane.js

anyone knows how to inspect the inspector ? :p

[wesbos]

@revolunet Open dev tools in a new window and hit ⌘ + Shift + C

[revolunet]

OK thanks, looks like its ⌘ + Alt + C here

[jaredly]

@revolunet yeah it's the styles -- the flex-box stuff needs tweaking.
Use the plain html shell to "inspect the inspector"