Able to resize a panel beyond collapse button

[ross-moug]

Describe the bug When using a Panel component which is resizable then the user can shrink the side pane to beyond the side pane header's width (including the collapse button).

Setting panelMinSize would solve this but we are using this in a generic way so we'd like to be able to set the min-width of the Panel (or the panelMinSize) dynamically based on the header content.

To Reproduce Steps to reproduce the behaviour:

1. Go to the Nova docs
2. Scroll to the "Enabling Resizability" example
3. Manually change the header text via Dev tools to a string which is longer than 150px
4. Click and drag the side pane

Expected behaviour The side pane prevents the user resizing it below the minimum width of the side header (including the collapse button).

Screenshots Clicking and dragging pane boundary

Click and drag released

Dev tools showing resizer min-width

Environment (please complete the following information):

• OS: MacOS Catalina
• Browser Chrome
• Browser 89

Additional context We have currently hit this issue on Nova 9 so a workaround, if available, would be appreciated until we can upgrade to Nova 11 (and Angular 11).

[ross-moug]

If you can access N-able repos, here is a proposed solution to workaround this issue on Nova 9: https://github.com/logicnow/msp-entity-module/compare/bugfix/RMM-40300_preventSidePaneShrinkingBelowHeaderMinWidth.

[ewok-janitor]

https://jira.solarwinds.com/browse/NUI-5966