Restyle map and controls

app/src/frontend/map/map.css

@@ -8,25 +8,34 @@
     box-shadow: 0px 0px 1px 1px #222;
     visibility: hidden;
 }
+
+.map-container {
+    flex: 1;
+    position: relative;
+}
 .leaflet-container {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
+    height: 100%;
+    width: 100%;
 }
 .leaflet-container .leaflet-control-zoom {
     border: 1px solid #fff;
     box-shadow: 0 0 1px 1px #222;
 }
+
+.leaflet-container .leaflet-control-attribution {
+    width: 100%;
+    background: #fff;
+    background: rgba(255, 255, 255, 0.7);
+}
+
 .leaflet-grab {
     cursor: crosshair;
 }
 @media (min-width: 768px){
     /* Only show the "Click a building ..." notice for larger screens */
     .map-notice {
-        left: 25.5rem;
-        top: 0.5rem;
+        left: 0.5rem;
+        top: 3.5rem;
         visibility: visible;
     }
 }

app/src/frontend/map/map.tsx

@@ -143,7 +143,7 @@ class ColouringMap extends Component<any, ColouringMapState> { // TODO: add prop
             : '/tiles/base_night/{z}/{x}/{y}.png'
 
         return (
-            <Fragment>
+            <div className="map-container">
                 <Map
                     center={position}
                     zoom={this.state.zoom}
@@ -177,7 +177,7 @@ class ColouringMap extends Component<any, ColouringMapState> { // TODO: add prop
                         </Fragment>
                     ) : null
                 }
-            </Fragment>
+            </div>
         );
     }
 }

app/src/frontend/map/search-box.css

@@ -46,11 +46,6 @@
    margin-right: 0.1rem;
 }
 @media (min-width: 768px) {
-    /* for large screens adopt the conventional search box position */
-    .search-box{
-        top: 3.625rem;
-        left: 25.5rem;
-    }
     /* The following is a fix (?) for the truncation of the "Search for postcode" text  */
     .form-inline .form-control {
         width: 200px;