Improve UI real-estate at smaller resolutions

[dekimsey]

Consul 1.1.0 Beta UI

Describe the problem you're having

We embed the status page in our chat program, Teams. Our only real issue is it could make better use of the smaller screen real-estate.

Scrolling is also an issue, but that's reported in #4230.

Describe the solution you'd like

I'd like to see the UI be a bit tighter in it's use of whitespace. The footer is too large and really should be pinned to the end of the page anyhow.

Whitespace at the top of the page could use a reduction. Maybe collapsing into the header bar entirely since it's already selected.

For instance in a small window, the state filters could be collapsed to just their $symbol ($cnt) in a horizontal tab banner. At this smaller screen, tags are probably worth discarding from the view.

On the service details page, nodes could turn into a list instead. Same whitespace issue as before.

Share inspiration

Maybe StackOverflow, Trello, GitHub status come to mind.

[hannahhearth]

Hi @dekimsey, thanks again for always providing awesome, detailed feedback. Two follow-up questions:

1. How often do you view the Consul UI on narrow screens? When you do, is it because you're using a mobile device, or because you're using a small portion of a larger screen? (Would love for anyone else reading this to answer as well! Sounds like most people are using large screens, but would love to hear from the small screen crowd, if there is one.)

2. Are you interested in doing any usability interviews/testing with us on future feature designs? These usually take 30-60 minutes, conducted remotely through video calls. We have quite a few coming up and would love more of your feedback on earlier iterations. If so, do you mind if we reach out to the email listed on your github account?

[dekimsey]

Mostly, we embed the status page with failing services in our chat software, Teams. Which has an absurd obsession with whitespace. It's great to have that a click away. (I need to file another ticket about making status a toggle instead of a tab view).

I don't currently have mobile access set up very easily due to the way our company sets up the wireless. So it's mostly the embedded (or kiosk) view that concerns me.

It'd be fun to participate. Yes, feel free to reach out to my github's email.

[hannahhearth]

We're definitely going to continue improving the mobile-friendliness of Consul, but the specific issues brought up here have been resolved by the PRs above. Thanks again for your input.