Gutter width is not factored in to the minSize, leading to overflow

I have a 3 pane horizontal view configured this way:

sizes: [10, 15, 75],
minSize: [0, 0, 0],
gutterSize: 2

I’ve added a button that when clicked “collapses” the first pane via setSizes([0, 15, 85]). (I did this instead of collapse so that I could allocate space to the last pane and not the second pane)

The problem is, when the first panel is collapsed, the third panel will get pushed down under the first two. This is happening because the size of the panels is calculated in an uneven way as follows:

Pane 1: width: calc(10% - 1px) Pane 2: width: calc(15% - 2px) Pane 3: width: calc(75% - 1px)

The width of the first gutter is being split in half across the first and last panes, which works perfectly fine when all 3 panes are in view, but once the first pane gets collapsed (Which renders the width of pane 1 to calc(0% - 1px) that half of that gutter isn’t being subtracted from anywhere anymore which causes the series to add up to 1px more than 100%, and the third pane to get pushed down to a new line.

Looking over the API I see it’s possible to interact with how the elements are sized via elementStyle, though I’m not sure if there’s a supported way to interact with the sizing in a way that targets specific elements rather than the whole set (In my case the problem would be solved if pane 2 and 3 subtracted 2px each while the first subtracted none)

[nathancahill]

Definitely something to consider 👍

[Autre31415]

Yeah changing up the math a bit handles the shrinking problem, but it is worth noting that since this update required a code change to account for with my silly edge case there could be other examples of getSizes usage across other apps in the wild that this could unintentionally effect as well. It might be worth considering to dynamically account for the gutter size by padding out the - #px side of the CSS calc instead (if possible), since the value that getSizes returns is only the bare percentage pre calc.

Thanks for looking into this issue so quickly by the way! 😁 I’m glad my silly edge cases provided you with useful test cases