From b32cd7c351eee0b2ec9271b88d3a7d28f044dc5b Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Tue, 1 Mar 2022 12:26:05 +0000
Subject: [PATCH] Prevent scrolling of branding previews
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

In user research we quite often saw people accidentally scroll the
branding preview `<iframe>` when trying to scroll the page.

This is suboptimal because they:
- were confused why the page wasn’t scrolling
- lost visibility of the branding they were trying to preview because
  it scrolled outside the bounds of the `<iframe>`
---
 app/assets/javascripts/previewPane.js          | 2 +-
 app/templates/components/branding-preview.html | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/previewPane.js b/app/assets/javascripts/previewPane.js
index 9c6bd50e3..e327687bf 100644
--- a/app/assets/javascripts/previewPane.js
+++ b/app/assets/javascripts/previewPane.js
@@ -13,7 +13,7 @@
   const $paneWrapper = $('<div class="govuk-grid-column-full"></div>');
   const $form = $('form');
   const previewType = $form.data('previewType');
-  const $previewPane = $(`<iframe src="/_${previewType}?${buildQueryString(['branding_style', branding_style])}" class="branding-preview"></iframe>`);
+  const $previewPane = $(`<iframe src="/_${previewType}?${buildQueryString(['branding_style', branding_style])}" class="branding-preview" scrolling="no"></iframe>`);
 
   function buildQueryString () {
     return $.map(arguments, (val, idx) => encodeURI(val[0]) + '=' + encodeURI(val[1])).join('&');
diff --git a/app/templates/components/branding-preview.html b/app/templates/components/branding-preview.html
index d6a55782d..67d59ed79 100644
--- a/app/templates/components/branding-preview.html
+++ b/app/templates/components/branding-preview.html
@@ -1,5 +1,5 @@
 {% macro branding_preview(branding_style, endpoint) %}
-  <iframe src="{{ url_for(endpoint, branding_style=branding_style) }}" class="branding-preview"></iframe>
+  <iframe src="{{ url_for(endpoint, branding_style=branding_style) }}" class="branding-preview" scrolling="no"></iframe>
 {% endmacro %}
 
 {% macro email_branding_preview(branding_style) %}