Adjust spacing and border on details map

We hide the map inside a details element.

Because the map has such a strong shape I don’t think it needs the grey
border to contain it. This commit removes the border, and adjusts the
spacing to group things by proximity alone.

By removing the border and associated gutter we can give more space to
the map, and make the page look less busy.

app/assets/stylesheets/components/area-list.scss

@@ -88,7 +88,7 @@
   display: inline-block;
   position: relative;
   margin-right: govuk-spacing(3);
-  margin-bottom: govuk-spacing(5);
+  margin-bottom: govuk-spacing(4);
   height: govuk-spacing(7);
   padding-left: govuk-spacing(8);
   line-height: govuk-spacing(7);
@@ -132,3 +132,19 @@
   }
 
 }
+
+.map-details {
+  .govuk-details__summary {
+    display: block;
+    padding-top: govuk-spacing(1);
+    padding-bottom: govuk-spacing(1);
+    margin-top: 1px;
+  }
+
+  .govuk-details__text {
+    padding: 0;
+    border: none;
+    border-bottom: 1px solid $border-colour;
+    margin-top: -1px;
+  }
+}

app/templates/views/broadcast/preview-areas.html

@@ -53,7 +53,7 @@
 
   {% if broadcast_message.areas %}
     {{ map(broadcast_message) }}
-    <form action="{{ url_for('.preview_broadcast_message', service_id=current_service.id, broadcast_message_id=broadcast_message.id) }}" method="get">
+    <form action="{{ url_for('.preview_broadcast_message', service_id=current_service.id, broadcast_message_id=broadcast_message.id) }}" method="get" class="govuk-!-margin-top-1">
       {{ page_footer('Continue to preview') }}
     </form>
   {% endif %}

app/templates/views/broadcast/view-message.html

@@ -138,10 +138,12 @@
     {% endif %}
   {% endfor %}
 
-  {{ govukDetails({
-    "summaryText": "Show map",
-    "html": map(broadcast_message)
-  }) }}
+  <div class="map-details">
+    {{ govukDetails({
+      "summaryText": "Show map of areas",
+      "html": map(broadcast_message)
+    }) }}
+  </div>
 
   {{ broadcast_message.template|string }}