Style improvements for mobile

imports/ui/components/SelectionMap/SelectionMap.js

@@ -162,9 +162,9 @@ class SelectionMap extends Component {
     return (
       <div>
         { this.isValidState() &&
-          <div className="leaflet-container">
+          <Fragment>
             <Map
-                /* className="sidebar-map" */
+                className="selectionmap-leaflet-container"
                 center={this.state.center}
                 zoom={this.state.zoom}
                 ref={(map) => {
@@ -251,7 +251,7 @@ class SelectionMap extends Component {
                  </ButtonGroup>
                </Control>
             </Map>
-          </div>
+          </Fragment>
         }
       </div>
     );

imports/ui/components/SelectionMap/SelectionMap.scss

@@ -1,21 +1,23 @@
-.leaflet-container {
+@import '../../stylesheets/mixins';
+
+.selectionmap-leaflet-container {
   height: 100%;
   min-height: 60vh;
   width: 100%;
-  min-width: 75vw;
+  /* min-width: 75vw; */
   display: flex;
-  margin: 30px auto;
+  margin: 20px auto;
 }
 
-div.leaflet-container {
+div.selectionmap-leaflet-container {
   position: relative;
   margin: 0;
 }
 
-@media only screen and (max-width: 400px) {
-  .leaflet-container {
-     height: 400px;
-     width: 85vw;
+@include breakpoint(mobile) {
+  .selectionmap-leaflet-container {
+     height: 80%;
+     min-width: 90vw;
   }
 }