Properties panel adjustable heights to accommodate app resizing

[DivyaPrabhakar]

Issue #3824

There was a minimum height on multiple panels in the properties panel. This pushed the entire UI upwards to accommodate each of them. Media queries now detect the app height and adjust the panels accordingly.

[iwehrman]

Can you explain the fix a little more? And, ideally, can you describe how to repro? I tried just reducing the height of the window, but couldn't figure out how to trigger it. That the min-height queries go as low as 200px is kind of surprising. In the gif in #3824 it doesn't seem like the window is that shallow?

[chadrolfs]

Resizing in this branch, specifically wrt single-column is worse. I was also able to repro the bug in 16.1.2 with the app frame smaller than screen, so this is EPV. Here are comparisons (first frames are with/without artboard selected):

16.1.2 (current shipping), Libraries is fixed and add asset to library icons remain until min is reached:

17.0 current master, similar to 16.1.2 but add Lib asset collapses sooner:

This branch, note extra space above Effects, collapsing is different from 16.1.2 and current Main:

[chadrolfs]

@iwehrman the easiest way for me to trigger it is to make the app frame smaller, then:

• select an artboard
• add as asset to a CC Library
• repeat

[DivyaPrabhakar]

@iwehrman This fix changes the fact that there were strict min-heights on many of the sections in the properties panel. Thus when the app size was reduced and the UI would re-render, it would align the overflow of the section contents with the bottom of the app frame and that causes the push up. Now we use media queries to detect the size of the app frame and adjust the min-heights accordingly. The original bug detected the problem but the gif was not indicative of the fact that the problem exists as long as the libraries add asset icons are visible. In addition, I talked to @placegraphichere about what the UI should look like as the app frame gets smaller, regardless of the libraries add assets icons show, and that is another reason our media queries cover so much ground. The way to repro this fix is 1.) just reduce the height of the app frame which will result in the sections adjusting in size and offer scrolling one it hits the benchmarks defined in the media queries 2.) and then you can verify the fix for the libraries problem by reducing the app height, and then clicking add library assets, and the jump should not be there any more. We have decided that any oddities that occur at less than 30% of the app size are not cases we need to worry about.

http://cl.ly/1j1D0i1F0P45

This is the fix for the single column mode -- this is less about the libraries asset icons and more to test if the sections scale properly.

[chadrolfs]

I like the fix. This works great on Mac. Verifying on Win now...

[ktaki]

I see original issue was fixed. Very nice scaling handling as the height of the window decreases. Only draw back I saw was Export panel only showed the title when Effects panel had enough effects to push the Export panel down. I needed to double clicking Effects panel title to collapse the panel to see the contents of Export panel.

[DivyaPrabhakar]

@ktaki can you show me a screen recording of your issue?

[ktaki]

@DivyaPrabhakar https://files.slack.com/files-pri/T024KQMLM-F1AAZ0U1H/download/adjustable_panel_heights.mov.

[DivyaPrabhakar]

@ktaki I have made a slight change to hopefully solve the problem you are seeing.

[ktaki]

Yes, it looks good now.

[iwehrman]

Looks good on a 5k iMac. Merging away!