Panels not collapsing completely at window edges

[philippklodt]

When trying to collapse a panel completely by dragging beyond the viewport/window, panels are sometimes not collapsed completely.

This happens when the panel-group's edge corresponds to the viewport edge (i.e. no margin).

I adapted one of the codesandbox samples and created a reproducible demo here:
https://codesandbox.io/p/sandbox/react-resizable-panels-forked-r78ckq?file=%2Fsrc%2FApp.js%3A18%2C19-18%2C41

Adding some margin/padding around the panel-group can be used as a workaround, but this is sometimes undesired -- especially in my case where I was trying to implement resizable app-sidebars.

[bvaughn]

Makes sense.

Open to reviewing a PR if you'd like to suggest a fix!

[philippklodt]

Thanks for the quick reply, would love to help, but currently I can't say when I'll have time to look into it.

[bvaughn]

I'm not able to repro the behavior described in the Code Sandbox you linked to. Any chance you could share a Replay of the bug?

[bvaughn]

Actually I think the reason I can't repro this is that I (hopefully) fixed it in 2.0.21. If it's still broken for you on the latest release, let me know. I think it might be good now though!

---

❤️ → ☕ givebrian.coffee

[philippklodt]

Thanks for looking into it again.
I updated the version in the codesandbox to 2.0.22 and can still observe the issue.
Unfortunately I wasn't able to get replay.io to work because of some auth issue.

I made a video which may help at least to better explain the steps to reproduce:
https://github.com/user-attachments/assets/c7757869-0a8a-4d93-9c44-815ad5116db5

As you can see in the video, when I start dragging over the resizer-element, everything works fine.
If I start dragging outside the resizer-element (to its right), and the panel-group as a whole is very close to the right viewport edge, the issue persists.
I guess it's because outside the viewport there are of course no mouse events.
I also tried setting the hitAreaMargins to 0 which improves the situation but I can still observe the issue then.

[bvaughn]

Interesting... 🤔 Can you share a few more details:

• What browser and OS are you using? (including versions)
• Is your browser full screen when this is happening? (If so, does it happen when you're not full screen?)

Unfortunately I wasn't able to get replay.io to work because of some auth issue.

Bummer. That would have been helpful. Thanks for trying.

[philippklodt]

I'm on a laptop running Windows 11 (Version 23H2 OS Build 22631.3880).
I can observe the issue on both

• Chrome Version 126.0.6478.183 (Official Build) (64-bit)
• Firefox 128.0 (64-bit)

The issue happens always when the browser is full-screen. It also happens when the browser is not full-screen and there's screen-space on the right. But in this case it seems less predictable and if I move the mouse really fast it sometimes collapses to 0. 😆

[philippklodt]

I shall also say that for us, adding a bit of margin at the window-edges is an acceptable workaround for this issue.

After all this is anyway recommendable, because otherwise the resize-handle can easily be confused with the browser's own resize handle (when not full-screen or a sidebar like dev-tools is open) -- which leads to frustrating UX..

[bvaughn]

Got it. Thanks for the extra context.

I was mostly trying fast movements, thinking that was the cause. It's really interesting to hear that slow movements may be more likely to trigger the behavior.

I'm not sure there's much I can do, ultimately, because I'm already listening for the "pointerleave" event (when the mouse leaves the window) and if I'm missing that event then I'm kind of stuck. (That's where a Replay would have come in handy, to confirm.) I'll give it some more thought.