From c63313e839832911df57261904a3a5092c56852f Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Fri, 3 Sep 2021 16:00:00 +0100
Subject: [PATCH] Give WebAuthn illustration a fixed size
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The browser uses the `width` and `height` attributes of the image tag to
allocate space on the page for the image.

If these aren’t provided then the browser will assume the image takes up
no space, until it’s downloaded it and had a look at what the file’s
dimensions are. This causes the layout of the page to jump once the
image downloads.

`149 × 150px` is the native size of the image. But we don’t want it to
display at that size, so this commit also adds some extra CSS which
keeps it looking the same, namely:
- the full width of the 1/4 page column on desktop
- the full width of the column minus a `40px` gutter either side on
  mobile (by using `box-sizing: border-box` the `40px` of padding is
  subtracted from the 100% width, rather than added to it)
---
 app/assets/stylesheets/views/webauthn.scss          | 5 ++++-
 app/templates/views/two-factor-webauthn.html        | 2 +-
 app/templates/views/user-profile/security-keys.html | 2 +-
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/app/assets/stylesheets/views/webauthn.scss b/app/assets/stylesheets/views/webauthn.scss
index 7f47049b0..2afc6e3fc 100644
--- a/app/assets/stylesheets/views/webauthn.scss
+++ b/app/assets/stylesheets/views/webauthn.scss
@@ -27,9 +27,12 @@
 .webauthn-illustration {
 
   @include media-down(mobile) {
-    margin: govuk-spacing(6) govuk-spacing(9) 0 govuk-spacing(9);
+    box-sizing: border-box;
+    margin: govuk-spacing(6) auto 0 auto;
+    padding: 0 govuk-spacing(9) 0 govuk-spacing(9);
   }
 
+  width: 100%;
   margin: govuk-spacing(9) auto 0 auto;
 
 }
diff --git a/app/templates/views/two-factor-webauthn.html b/app/templates/views/two-factor-webauthn.html
index fe311c3e8..08bfb63b7 100644
--- a/app/templates/views/two-factor-webauthn.html
+++ b/app/templates/views/two-factor-webauthn.html
@@ -65,7 +65,7 @@
       }) }}
     </div>
     <div class="govuk-grid-column-one-quarter">
-      <img src="{{ asset_url('images/security-key.svg') }}" alt="" class="webauthn-illustration">
+      <img src="{{ asset_url('images/security-key.svg') }}" alt="" class="webauthn-illustration" width="149" height="150">
     </div>
   </div>
 {% endblock %}
diff --git a/app/templates/views/user-profile/security-keys.html b/app/templates/views/user-profile/security-keys.html
index 3026156a4..612a9d8ee 100644
--- a/app/templates/views/user-profile/security-keys.html
+++ b/app/templates/views/user-profile/security-keys.html
@@ -99,7 +99,7 @@
         {{ webauthn_button }}
       </div>
       <div class="govuk-grid-column-one-quarter">
-        <img src="{{ asset_url('images/security-key.svg') }}" alt="" class="webauthn-illustration">
+        <img src="{{ asset_url('images/security-key.svg') }}" alt="" class="webauthn-illustration" width="149" height="150">>
       </div>
       {% endif %}
     </div>