Add layout and mobile design

Add a proper UI layout that makes the most of the screen space available and organises the data/UI to enhance the user experience.

- On small screens, no functionality should be lost, a vertical design should be used, displayed stats should be streamlined or hidden by default
- On large screens, a horizontal layout should be used and data should be displayed cleanly and thoroughly.
- Using hover over elements to display more information (primarily for large screens)
- Using tooltip buttons to expand on element data in-place.

Start by inspecting the existing UI at small and large viewport sizes. Compare its screen-space use, displayed stats, hover details, and tooltip interactions with the requested responsive layout. Done means functionality is preserved on small screens, while large screens present the data cleanly and thoroughly.

Written by the indexing model from the issue text.