From eee4cdd0a7b61ce30021720092599f9283ed4512 Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Thu, 30 Sep 2021 14:18:27 +0100
Subject: [PATCH] Rewrite media queries to be mobile-first

Also adds height: 100% which forces the SVG to scale, rather than just
setting width which widens the viewbox.
---
 app/assets/stylesheets/views/webauthn.scss | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/app/assets/stylesheets/views/webauthn.scss b/app/assets/stylesheets/views/webauthn.scss
index 2afc6e3fc..dd68a2ed7 100644
--- a/app/assets/stylesheets/views/webauthn.scss
+++ b/app/assets/stylesheets/views/webauthn.scss
@@ -26,13 +26,15 @@
 
 .webauthn-illustration {
 
-  @include media-down(mobile) {
-    box-sizing: border-box;
-    margin: govuk-spacing(6) auto 0 auto;
-    padding: 0 govuk-spacing(9) 0 govuk-spacing(9);
+  @include govuk-media-query($from: tablet) {
+    margin: govuk-spacing(9) auto 0 auto;
+    padding: 0;
   }
 
+  box-sizing: border-box;
   width: 100%;
-  margin: govuk-spacing(9) auto 0 auto;
+  height: 100%;
+  margin: govuk-spacing(6) auto 0 auto;
+  padding: 0 govuk-spacing(9) 0 govuk-spacing(9);
 
 }