Improve maps on mobile

- reduce spacing on mobile for popups, prevent collision with headings and close icons
- set maximum width of popups to prevent overlap on mobile
- set maximum height of map on mobile to not be more than screen height, to help with scrolling
- remove in-house leaflet CSS and use one from package instead, move overrides into main stylesheet

Author: andysellick

app/assets/javascripts/modules/landing-page-map.js

@@ -206,6 +206,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 
       const popupHeading = document.createElement('h3')
       popupHeading.classList.add('govuk-heading-m')
+      popupHeading.classList.add('map-popup__heading')
       popupHeading.setAttribute('data-ga4-text', '')
       const popupBody = document.createElement('div')
 
@@ -250,7 +251,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
       popupContainer.appendChild(popupHeading)
       popupContainer.appendChild(popupBody)
 
-      const popup = layer.bindPopup(popupContainer)
+      const popup = layer.bindPopup(popupContainer, { maxWidth: 250 })
       popup.on('popupopen', (e) => {
         if (ftGeomType === 'Point') e.target.setIcon(this.context.icons[lyrPane].active)
         else e.target.setStyle({ fillOpacity: 0.3 })

app/assets/stylesheets/views/_landing_page/map.scss

@@ -1,4 +1,5 @@
 @import "govuk_publishing_components/individual_component_support";
+@import "leaflet/dist/leaflet";
 
 .map {
   display: none;
@@ -20,6 +21,10 @@
   padding: 0;
   height: 800px;
   background-color: #d7e0e5;
+
+  @include govuk-media-query($until: tablet) {
+    max-height: 80vh;
+  }
 }
 
 .map__key {
@@ -56,3 +61,35 @@
 .map__key-item--ics::before {
   background-image: url("landing_page/map/IC-symbol-key.svg");
 }
+
+.map-popup__heading {
+  @include govuk-media-query($until: tablet) {
+    padding-right: govuk-spacing(4);
+  }
+}
+
+// leaflet plugin default style overrides
+
+.leaflet-container img.leaflet-tile { // stylelint-disable-line selector-no-qualifying-type
+  // See: https://bugs.chromium.org/p/chromium/issues/detail?id=600120
+  mix-blend-mode: normal;
+  width: 256px !important; // stylelint-disable-line declaration-no-important
+  height: 256px !important; // stylelint-disable-line declaration-no-important
+}
+
+.leaflet-popup-content {
+  @include govuk-media-query($until: tablet) {
+    margin: govuk-spacing(2);
+  }
+
+  p {
+    margin: 0 0 govuk-spacing(1);
+  }
+}
+
+.leaflet-container a.leaflet-popup-close-button { // stylelint-disable-line selector-no-qualifying-type
+  width: 35px;
+  height: 35px;
+  font: 24px/35px Tahoma, Verdana, sans-serif;
+  font-weight: bold;
+}