[UX] Create a consistent and responsive step wizard for update.php and install.php

The problem

I've been working on issues like #2858, #512, #3960, #2873 etc. and in many cases it seems that we are "squeezing" the rest of the page for the sake of the sidebar that holds the various steps of the wizard.

After some breakpoint, we are switching to a very simple "Step x of 5" indication at the top-right of the page:

The above works well space-wise, and it solves the problem of not having enough horizontal space to fit all content of the page and style it in a nice/readable way, but we are sacrificing the indications of which step is the current and what are the previous/next steps.

While working on those other issues, this is the best responsive solution for the table added to these pages that I could come up with...

Here's the page as rendered in a wide screen, with as much horizontal real estate as possible (OK ):

Then, as the screen gets narrower, the main content area gets progressively squeezed till just before the breakpoint that hides the sidebar kicks in (horrible! ...notice all the wasted whitespace bellow the sidebar):

Then once the sidebar is hidden and replaced by the page indicator at the top-right, we have this (we're back to OK again ):

Proposed solution

Considering the following: - It seems to be more sensible UX-wise to always keep the steps indicator in a specific place rather than have it jump around. - Having the steps at the top of the page frees up all the horizontal space to be available for the main content of the page. - Indicating the name of each step and denoting the current/previous/next steps is preferred than only indicating the step number.

How about we implement a responsive step wizard that we consistently keep at the top of the page, which looks like a breadcrumb of sorts? There's various examples we can consider. Here are some I found around the internet:

https://codepen.io/kaiv/pen/jKajvB (colors tweaked in the screenshot below to match ours)