Improve layout on smaller screens

[ChrisBAshton]

I often have the 2nd line dashboard open on my Macbook, now that
we're no longer in the office and have it on the big screen.
I tend to have it on half my external monitor, leaving the other
half for another window such as Nagstamon.

Currently, even on this relatively large real estate of ~980px,
content is cut-off. This commit attempts to improve the UI using
media queries.

Before	After

Rather than hack the existing layout-2x1-75-25 class used by
the 2nd line dashboard (and risk introducing unexpected changes
for other teams), I've created a new layout-2x1-responsive class.
It looks identical on the build.html screen, so I've added an
animation to differentiate the preview:

Untitled.mov

Once this is merged, we'll need to edit the 2nd line dashboard
link here:
https://github.com/alphagov/govuk-developer-docs/blame/800ed1f6a45ee0ab3493d4f4e33e249e5ac80470/source/manual/2nd-line.html.md#L20

[kevindew]

Nice work, your screenshot looks a nice improvement

Do we use this for anything other than GOV.UK 2nd line? I'm a bit uneasy about this change as it feels like an introduction of a coupling to a particular project (2nd line dashboard) when this was previously a very generic project.

I wonder if this should instead have an approach like modern CSS frameworks where there are classes specified for different viewport sizes that override more generic ones (for example where tachyons has suffixes on classes to indicate what media queries they apply to: https://tachyons.io/docs/layout/widths/) - I appreciate that increases this scope though (maybe one day I'll finish the 2nd line dashboard I started that is responsive)

[ChrisBAshton]

I'm a bit uneasy about this change as it feels like an introduction of a coupling to a particular project (2nd line dashboard) when this was previously a very generic project.
I wonder if this should instead have an approach like modern CSS frameworks where there are classes specified for different viewport sizes that override more generic ones (for example where tachyons has suffixes on classes to indicate what media queries they apply to: https://tachyons.io/docs/layout/widths/) - I appreciate that increases this scope though

A CSS viewport framework approach is a nice idea, but does increase the scope and feels a bit over-engineered to me, given this is just to scratch a personal itch. However, I do share your concern about changing the behaviour of a class that may be being relied upon by other teams (and also muddying its intent). I've created a new class which hopefully gives us the freedom to build it how we like - and it gave me an excuse to play around with CSS animations for the build page!

(maybe one day I'll finish the 2nd line dashboard I started that is responsive)

Nice project! It looks like a good first step to replacing the current dashboard, which apart from being desktop-centric is also a bit of a pain to set up initially, as you need to dig out the Zendesk credentials to load that portion of the dash. I did experiment with passing a username:password HTTP Authentication header but this is no longer supported in iframes (see related issue). I did also play around with using a xhr request instead and setting iframe srcdoc to its response, but got a No 'Access-Control-Allow-Origin' header is present on the requested resource error, so called it a night.

[kevindew]

Nice one Chris - fancy work on the animation. This seems a good pragmatic approach.