Panel Resize Handle Scrolls Up with List Content

[Christopher-Hayes]

Description

The resize handle on a PCUI Container scrolls up with content, when it should be fixed in place as the user scrolls. The problem being you can no longer resize the panel if you scroll down enough.

Note: I'm putting this issue in this repo, but wasn't really sure if this was a PCUI issue or an PlayCanvas editor implementation issue.

To Reproduce

1. Create a list of items inside a PCUI Container configured to be resizable to the right. Make sure there are enough items to force the container to scroll.
2. Scroll down the content.
3. The resize handle will move up with the content.

Expected Behavior

The resize handle should not move with the content.

Screenshots

Scrolled to top	Scrolled halfway down	Scroll to bottom

Desktop

• OS: Ubuntu 20.04
• Browsers: Firefox 90, Chrome 91
• Version: Whatever version of PCUI the PlayCanvas Editor is using as of 06/30/2021

Potential Fixes

This is a common dilemma. The resizable handle uses position: absolute which will cause it to move with the content. One would expect position: fixed would solve the issue, but fixed ignores the position: relative of the parent. There's a few hacky workarounds mentioned in this stackoverflow post.
The ideal solution would be to separate the content into a div container, so the pcui-resizable-handle would no longer be impacted by the scrolling. However, that may require undesirable refactoring. I'm not well-versed in PCUI, but it seems like you may be able to apply that solution on the implementation side of things, just by using an additional nested PCUI Container for the content. So, this issue may belong in PlayCanvas/editor instead if it's more implementation.