Use CSS class for mobile map not overlapping form.

This fixes an issue with the footer navigation display.

3 files changed, 6 insertions, 9 deletions

diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js
index f1dda5f91..9368d8cc9 100644
--- a/web/cobrands/fixmystreet/fixmystreet.js
+++ b/web/cobrands/fixmystreet/fixmystreet.js
@@ -991,8 +991,8 @@ fixmystreet.display = {
                 translation_strings.ok +
             '</a>' +
             '</p>')
+        .addClass('above-form') // Stop map being absolute, so reporting form doesn't get hidden
         .css({
-            position: 'relative', // Stop map being absolute, so reporting form doesn't get hidden
             width: width,
             height: height
         });
diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index 87e474136..65abd8421 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -1741,14 +1741,11 @@ a:hover.rap-notes-trigger {
     height: auto; // override `.mobile #map_box` height:10em
     margin: 0;
     z-index: 1; // stack above positioned elements later on the page (eg: .report-list-filters)
-  }
-
-  .container {
-    padding: 0; // map_box needs to be full width, so remove page gutter
-  }
 
-  #map_sidebar {
-    padding: 1em; // reinstate page gutter, but on sidebar, so map_box is unaffected
+    &.above-form {
+      position: relative;
+      margin: 0 -1em;
+    }
   }
 }
 
diff --git a/web/cobrands/sass/_layout.scss b/web/cobrands/sass/_layout.scss
index f3ce64f37..e251a6208 100644
--- a/web/cobrands/sass/_layout.scss
+++ b/web/cobrands/sass/_layout.scss
@@ -162,7 +162,7 @@ body.mappage {
 
   #site-header {
     // With the exception of the #site-logo child, the rest of
-    // #site-header gets entirely hidden behind .nav-wrapper-2
+    // #site-header gets entirely hidden behind the navigation
     position: absolute;
     z-index: auto;
     top: 0;