How to get Canvas reliably responsive? (Not coping well with resizing windows with mui.com - Material UI react library)

[alankent]

The <Canvas> component I am finding is not coping with window resizing very well. It also sometimes gets the aspect ratio wrong on first page load. Is there a way to nudge it to recompute better on resize?

1. I start with a narrow window. It appears, looks good.
2. I widen the window. It continues to expand and looks good.
3. I get to a wider position (I think the mui.com 'lg' breakpoint). The "animation list" is now beside the Canvas. If I edit the source code and delete the <Canvas> element, the canvas area and animation table (side by side) correct get 50% each. When I put the <Canvas> back in, the table on the right is super shrunk.
4. Doing a page reload, the 50/50 ratio comes out correct, but the model is now stretched very tall (aspect ratio is wrong).
5. I make the window one pixel wider, and the aspect ratio gets fixed (the resize event fixed the aspect ratio calculation).
6. I make the window really wide and it looks good.
7. I start narrowing the window - the Canvas does not get smaller. The "Animations" table is forced to squeeze up again.
8. Going narrower still, the Canvas has not resized down - the Animations table is below the character (vertical scroll bar appears) and the "Upload" button in top right corner is now off the screen (horizontal scroll bar appears).
9. Scrolling down you can see the "Animations" table is down there (from the resizing breakpoint).
10. Reloading the page without resizing the window, it comes out right.

So basically it seems like the resizing calculation can be correct, but maybe the order of calculations of different sizes is wrong. Maybe it is half way through other MUI resizing calculations? Also, reducing the window size seems to have more problems than making it bigger. (The Canvas does not like giving up space once it has it.)

My question: Is there a way to tickle the Canvas resizing to recompute after window resizing? I think "reload" gets it right, but I don't want to have to reload after each window resize. I have tried a number of online suggestions (width/height: auto, overflow: hidden auto, etc) without luck. The screenshots are <Canvas> without attributes, and after reload it works well. It just does not cope with window resizes very well.