From 70007fcb8fd94b7c2a83ac52950c6b5507b4173d Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Wed, 26 Aug 2020 14:24:00 +0100
Subject: [PATCH] Fix spacing in pill items

At maximum zoom, the text in the items gets
cropped horizontally.

This removes the padding on their containers to
give them more space and, instead, puts it on the
content items instead.

Left-aligned content still needs some padding on
the left-hand side but centrally-aligned can grow
into the whole space.

This also reduces the padding applied below 420px
width or when the screen is zoomed below 300%.
Above that, our content needs more space between
items but below that, the space allocated to the
content is more important.
---
 app/assets/stylesheets/components/big-number.scss | 11 +++++++++++
 app/assets/stylesheets/components/pill.scss       | 14 +++++++++++++-
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/components/big-number.scss b/app/assets/stylesheets/components/big-number.scss
index bed587724..45e006327 100644
--- a/app/assets/stylesheets/components/big-number.scss
+++ b/app/assets/stylesheets/components/big-number.scss
@@ -16,6 +16,17 @@
 
 }
 
+.pill .big-number-number {
+
+  // reduce padding until screen is bigger than 420px / zoomed below 300%
+  padding-left: govuk-spacing(1);
+
+  @include govuk-media-query($from: 420px) {
+    padding-left: govuk-spacing(2);
+  }
+
+}
+
 .big-number-dark {
   @extend %big-number;
   padding: govuk-spacing(3);
diff --git a/app/assets/stylesheets/components/pill.scss b/app/assets/stylesheets/components/pill.scss
index 72004fa1a..952155057 100644
--- a/app/assets/stylesheets/components/pill.scss
+++ b/app/assets/stylesheets/components/pill.scss
@@ -31,7 +31,7 @@
     float: left;
     box-sizing: border-box;
     width: 100%;
-    padding: 10px;
+    padding: 10px 0;
   }
 
   a {
@@ -76,8 +76,20 @@
 
   }
 
+  &-label {
+
+    // reduce padding until screen is above 420px / zoomed below 300%
+    padding-left: govuk-spacing(1);
+
+    @include govuk-media-query($from: 420px) {
+      padding-left: govuk-spacing(2);
+    }
+
+  }
+
   &-centered-item {
     text-align: center;
+    padding-left: 0;
   }
 
 }