Implement Media Library Widget Designs

"alpha blocker" was a typo. This is a blocker for beta.

Looks awesome in Chrome! But in Firefox (my default), the styling gets a little messed up

🤔 I checked this out in Firefox and spotted one thing in the screenshot more (the media titles were wrapping instead of elipsising...) but I'm not entirely sure that would explain how herky jerky that screenshot was... This is how it looks for me now in FF

If you're still having problems, would you be OK looking in the FF inspector and seeing if there are any styles (or lack of) that seem to be making the most nuisance?

In the process of reviewing this, I worked with @callumharrod to refine some of the designs to better account for the weights fields and improve the look of the "remove" button.

In working with him, we decided to change the media items to stack in rows instead of the 3 columns. It provides better readability, a better use of space and accounts for media items with longer file names much better.

I've gone ahead and implemented his suggested changes in this MR. I've also given it some pretty thorough testing and a code review and it's all looking good!

(I found one bug that is also present in 0.x - if you have a media widget on the page data side bar, pick some images and then switch to a different sidebar and come back the selected images are no longer shown).

#9

(I found one bug that is also present in 0.x - if you have a media widget on the page data side bar, pick some images and then switch to a different sidebar and come back the selected images are no longer shown).

Good catch. I created 🐛 Page data form values-in-progress not retained for Media Library (and perhaps other) fields Active for this.

@jessebaker reviewed my parts, I reviewed his and @hooroomoo did a pass as well so this is gonna go in.

Automatically closed - issue fixed for 2 weeks with no activity.