fix map header and scrolling (#11054)

Checked across browsers and platforms. Crossing fingers now :D haha

client/less/map.less

@@ -54,13 +54,25 @@
   width: 100%;
 }
 
+.map-fixed-header {
+  position: fixed;
+  background: white;
+  width: 100%;
+  padding-top: 5px;
+  z-index: 1;
+  left: 0;
+  top: 0;
+}
 
 .drawer .map-fixed-header {
   padding-top: 30px;
+  position: static;
+  margin-bottom: -100px;
 }
 
 .map-accordion {
   width: 100%;
+  margin-top: 100px;
   max-width: 700px;
   overflow-y: auto;
 
@@ -237,7 +249,7 @@
     padding-left: 0;
   }
   .map-accordion {
-    top: 180px;
+    top: 160px;
     h2 {
       margin: 15px 0;
       a {

common/app/routes/challenges/components/map/Map.jsx

@@ -61,13 +61,17 @@ export class ShowMap extends PureComponent {
   }
 
   render() {
-    const { height, superBlocks } = this.props;
+    const { superBlocks } = this.props;
+    let height = 'auto';
+    if (!this.props.params) {
+      height = this.props.height + 'px';
+    }
     return (
       <Col xs={ 12 }>
         <MapHeader />
         <div
           className='map-accordion center-block'
-          style={{ height: height + 'px' }}
+          style={{ height: height }}
           >
           { this.renderSuperBlocks(superBlocks) }
           <div className='spacer' />