Resizing browser window causes left or right panel to cover center panel

[Saira-A]

UV version:

 universalviewer@4.2.0

I'm submitting a:

• bug report => please fork one of these codesandbox examples with a repro of your issue and include a link to it below
• feature request => please use the user stories repo
• support request => Please do not submit support requests here, use stackoverflow

Current behavior:
If the left or right panel is open, reducing the width of the browser window causes the panel to cover the width of the entire page.

Expected behavior:
The panels shouldn't be visible when the window size is reduced.

[LlGC-jop]

Hi @demiankatz @Saira-A @jamesmisson

Could you give me some feedback on the below please? I've got a couple of possible solutions but am not sure what's preferable.

I've created a branch to work on this (https://github.com/LlGC-jop/universalviewer/tree/fix-1370), but it's been much more tricky than I thought because the resize events get triggered all over the place, and I suspect it quite easily causes an infinite loop.

So rather than close the panels, I've tweaked the CSS so the panels aren't full width any more. They look better at mid sizes, and I think if the user has, for example, opened a panel and then decided to re-orient to view it better, they wouldn't want it to auto-close anyway.

That said, at the bottom of BaseExpandPanel.ts::create() I've left a commented out bit of code that uses the window's resize event to toggle the panels, but it's a little dirty as it's got 768 hard-coded. It works though if anyone wants to try it out.

[demiankatz]

@LlGC-jop, I agree that if feasible, tweaking the CSS to make the panels look better is probably preferable to responding to resize events -- the event-based approach is always going to cause weird situations where shrinking and re-growing a window causes unexpected side effects, whereas a CSS-based solution should maintain the expected state.

I'd suggest opening a PR with your CSS-based approach so that we can easily see it in action, and then we can continue the discussion there.