Rename CSS classes for consistency

This prefixes everything to do with areas/the map with `area-list`, so
from looking at one element you know which `.scss` file will contain the
relevant code.

app/templates/views/broadcast/macros/area-map.html

@@ -1,7 +1,7 @@
 {% macro map(broadcast_message) %}
-  <div id="map"></div>
+  <div id="area-list-map"></div>
   <ul>
-    <li class="area-key area-key--certain">
+    <li class="area-list-key area-list-key--certain">
       <span class="visually-hidden">
         An area of {{ "{:,.1f}".format(broadcast_message.simple_polygons.estimated_area) }} square miles
       </span>
@@ -9,7 +9,7 @@
       <span class="visually-hidden">the</span>
       alert
     </li>
-    <li class="area-key area-key--likely">
+    <li class="area-list-key area-list-key--likely">
       <span class="visually-hidden">
         An extra area of {{ "{:,.1f}".format(broadcast_message.simple_polygons.bleed.estimated_area - broadcast_message.simple_polygons.estimated_area) }} square miles is
       </span>
@@ -19,7 +19,7 @@
       </span>
       alert
     </li>
-    <li class="area-key area-key--phone-estimate">
+    <li class="area-list-key area-list-key--phone-estimate">
       {% if broadcast_message.count_of_phones == broadcast_message.count_of_phones_likely %}
         {{ broadcast_message.count_of_phones|format_thousands }} phones estimated
       {% else %}

app/templates/views/broadcast/partials/area-map-javascripts.html

@@ -28,7 +28,7 @@
   {% endfor %}
 
 
-  var mapElement = document.getElementById('map');
+  var mapElement = document.getElementById('area-list-map');
 
   // if element is inside a details element then to make the map render correctly we open the details element
   // and set up the map before closing the details map after
@@ -41,7 +41,7 @@
   mapElement.style.height = Math.max(320, window.innerHeight - mapElement.offsetTop - 100) + 'px';
 
   var mymap = L.map(
-    'map',
+    'area-list-map',
     {
       scrollWheelZoom: false
     }

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

@@ -138,7 +138,7 @@
     {% endif %}
   {% endfor %}
 
-  <div class="map-details">
+  <div class="area-list-map-details">
     {{ govukDetails({
       "summaryText": "Show map of areas",
       "html": map(broadcast_message)