From 05075b5af53cb7a33a9f2e214615efd3b8dd63a5 Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Tue, 18 Aug 2020 09:51:52 +0100
Subject: [PATCH] Fix spacing between button and selected areas
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adding left margin to the button meant that when it wrapped onto a new
line it didn’t align flush with the left edge of its containing column.

Instead we can:
- move the link outside the list (which is better semantically anyway)
- then add the margin to the last item of the list (which is now the
  last selected area, not the link)
---
 app/assets/stylesheets/components/area-list.scss | 4 ++++
 app/templates/views/broadcast/preview-areas.html | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/components/area-list.scss b/app/assets/stylesheets/components/area-list.scss
index e6ac6ba74..0095c9071 100644
--- a/app/assets/stylesheets/components/area-list.scss
+++ b/app/assets/stylesheets/components/area-list.scss
@@ -55,6 +55,10 @@
 
     }
 
+    &:last-child {
+      margin-right: govuk-spacing(1) * 1.5;
+    }
+
     &--unremoveable {
       padding-right: govuk-spacing(2);
       background: $light-blue-25;
diff --git a/app/templates/views/broadcast/preview-areas.html b/app/templates/views/broadcast/preview-areas.html
index 11f019393..026a80aa5 100644
--- a/app/templates/views/broadcast/preview-areas.html
+++ b/app/templates/views/broadcast/preview-areas.html
@@ -82,13 +82,13 @@
           {{ area.name }} <a class="area-list-item-remove" href="{{ url_for('.remove_broadcast_area', service_id=current_service.id, broadcast_message_id=broadcast_message.id, area_slug=area.id) }}">remove</a>
         </li>
     {% if loop.last %}
+      </ul>
       {{ govukButton({
         "element": "a",
         "text": "Add another area",
         "href": url_for('.choose_broadcast_library', service_id=current_service.id, broadcast_message_id=broadcast_message.id),
         "classes": "govuk-button--secondary govuk-!-margin-bottom-5"
       }) }}
-      </ul>
     {% endif %}
   {% else %}
     <p class="govuk-body">