Switch the order of the sections on the Interop dashboard

[jensimmons]

I'd like to propose we switch the order of the Interop dashboard sections to be

1. Main top section with the big numbers and browser logos
2. "How are these scores calculated?" — The list of categories and %
3. "Focus Areas" — with the graph over time & dropdown to drill into specific graphs

Basically putting what's current second into third place, and taking what's currently third and putting it second.

I find the Main scores and the list of categories with percentages the most useful. It seems most others do too — for instance, a presentation at Reactathon highlighted those two parts of the dashboard (https://twitter.com/stubbornella/status/1521664091604979713)

It's also very hard to click back and forth from stable to experimental and see the list of how each browser is doing by % for the category — because it requires scrolling up & down & up & down...

Can we flop the order? @argyleink

[argyleink]

sgtm, flop it 👍🏻 does anyone else want to weigh in with their thoughts?
my dev env isn't setup anymore, anyone else able to do the swap? cc @foolip 😅

[foolip]

@DanielRyanSmith could you give this a shot? Looking at the Interop 2022 dashboard a bit in the process might be helpful context for your work on scoring updates.

[DanielRyanSmith]

Sure! I made a PR for the swap (and did some poking around as you suggested @foolip 😆 )

[foolip]

Thanks @DanielRyanSmith, that was quick!

https://interop-section-swap-dot-wptdashboard-staging.uk.r.appspot.com/interop-2022 is a staging instance for this.

With the swapped order I think the title of the graph should probably change from "Focus Areas" to "Scores over time", since preciously that title functioned a bit as a heading for everything that followed, but not now.

[DanielRyanSmith]

Updated with suggested graph title 👍

[jensimmons]

I think this looks great!

I wonder if we can put a min-height on the element that contains the browser names, so that the page doesn't jump up & down when flipping back and forth between stable and experimental. That would make it easier to see what's changing between preview browsers and shipped browsers.

(The jump is caused by the longer names wrapping. A min-height that's vaguely a bit more than two times one line would keep it from doing that most of the time. Don't use height, however!)

[foolip]

This was resolved in web-platform-tests/wpt.fyi#2865. The min-height was fixed in web-platform-tests/wpt.fyi#2883 but hasn't been deployed yet.