From 5058727587e443d510900547c2e2f213becafc6c Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Wed, 7 Oct 2020 22:53:03 +0100
Subject: [PATCH] Tweak template-list items on mobile

The font-size goes down to 16px on mobile. This
changes the line-height too which makes it too
small. This bumps it back up the be the same as on
desktop which makes space for the icon (if a
folder) and gives the link more space.

Also reduces the horizontal space between the icon
and its link by the same amount the font-size
changes.
---
 app/assets/stylesheets/components/message.scss | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/app/assets/stylesheets/components/message.scss b/app/assets/stylesheets/components/message.scss
index 9e5f8b312..75eb1f176 100644
--- a/app/assets/stylesheets/components/message.scss
+++ b/app/assets/stylesheets/components/message.scss
@@ -152,18 +152,25 @@ $message-type-bottom-spacing: govuk-spacing(4);
 
   &-folder,
   &-template {
-    @include govuk-font($size: 24, $weight: bold, $line-height: 1.25);
+    @include govuk-font($size: 24, $weight: bold, $line-height: 1.5);
+    @include govuk-media-query($from: tablet) {
+      line-height: 1.25;
+    }
   }
 
   &-folder {
 
     display: inline;
-    padding-left: 40px;
+    padding-left: 35px;
     background-image: file-url('folder-blue-bold.svg');
     background-repeat: no-repeat;
     background-size: auto 20px;
     background-position: 0px 4px;
 
+    @include govuk-media-query($from: tablet) {
+      padding-left: 40px;
+    }
+
     &:hover {
       background-image: file-url('folder-blue-bold-hover.svg');
     }