Post Revisions: Rework layout of main post revisions containers

[frontdevde]

This PR

• adds a rework of the layout of the main post revisions containers
• resolves several cross-browser issues incl. diff content not showing in Safari

How to test

Repeat the following in Chrome, Safari, Firefox & Edge
(if you're missing any you could use browserstack.com)

• Use the calypso.live link below or check out locally
• Navigate to or create a post with revisions
• Click on the History button to trigger the Post Revisions modal
• The revisions should load including their content
• Open wpcalypso.wordpress.com in a second tab
• Repeat the same process in the second tab as described above
• The visual appearance of tab 1 and tab 2 should basically be identical

Cross-browser testing

Chrome
Everything should look like before.
In addition, all content should now always stay in the modal, even when resizing erratically.

Safari
Safari should now always display the diff content after it's been computed.
No weird hardware acceleration hack needed anymore, it just works. Fixes #20000 .

Firefox
Surf around, any intermittent glitches observed previously should be gone.
If you don't spot anything that's a good sign :)

Edge
Yep, even Edge should look good now. 🎉

[matticbot]

Test live: https://calypso.live/?branch=update/post-revisions/layout-rework

[frontdevde]

On desktop the flex-basis defines the width.

[frontdevde]

On mobile the flex-basis defines the height thanks to flex-direction: column-reverse;

[jblz]

@shaunandrews -- I'd appreciate a quick pass on this if you have a second.

[jblz]

This is working well on Chrome for me -- we should test on Edge once #20186 is merged & this rebased.

[frontdevde]

@jblz PR #20186 was merged and this PR rebased with master.
Should be good to test in Edge now as well 👍

[shaunandrews]

I managed to break the site switcher with this PR. Steps to reproduce:

1. View a revision
2. Cancel out of the revisions modal
3. Click the back arrow in the top-left of the editor
4. Open the site switch (click Switch Site in the sidebar)

You'll get something like this:

You should get something like this, with a search input and a message about hidden sites (if you have any):

There's a little scrolling lag in Safari as the revisions load, but after a few seconds it seems to resolve itself. I'm sad mobile is still "turned off," but I get the reasoning (performance issues related to client-side diff'ing).

Otherwise, this looks good.

[frontdevde]

Thanks for having a look at the PR and reporting this issue, @shaunandrews!
As the issue mentioned is reproducible on wpcalypso, it appears to be unrelated to the changes introduced in this PR. It, therefore, shouldn't block this PR. The issue has been noted either way and we've created a task for further investigation.

[jblz]

Looks good to me!