Fix ThemeSwitcher style and map click

app/src/frontend/map.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import { Map, TileLayer, ZoomControl, AttributionControl } from 'react-leaflet-universal';
 
 import '../../node_modules/leaflet/dist/leaflet.css'
@@ -71,6 +71,7 @@ class ColouringMap extends Component {
         ) : null;
 
         return (
+            <Fragment>
                 <Map
                     center={position}
                     zoom={this.state.zoom}
@@ -86,8 +87,9 @@ class ColouringMap extends Component {
                     { highlightLayer }
                     <ZoomControl position="topright" />
                     <AttributionControl prefix="" />
-                <ThemeSwitcher onSubmit={this.themeSwitch} currentTheme={this.state.theme} />
                 </Map>
+                <ThemeSwitcher onSubmit={this.themeSwitch} currentTheme={this.state.theme} />
+            </Fragment>
         );
     }
 };

app/src/frontend/theme-switcher.css

@@ -1,10 +1,22 @@
 .theme-switcher {
     z-index: 1000;
     position: absolute;
-    bottom: 30px;
+    bottom: 55px;
     right: 10px;
     float: right;
     background: white;
+    border-radius: 4px;
+}
+
+@media (min-width: 380px){
+    .theme-switcher {
+        bottom: 40px;
+    }
+}
+@media (min-width: 1020px){
+    .theme-switcher {
+        bottom: 24px;
+    }
 }
 .theme-switcher .btn {
     margin: 0;

app/src/frontend/theme-switcher.js

@@ -4,7 +4,8 @@ import './theme-switcher.css';
 
 const ThemeSwitcher = (props) => (
     <form class={`theme-switcher ${props.currentTheme}`} onSubmit={props.onSubmit}>
-        <button class="btn btn-outline btn-outline-dark" type="submit">
+        <button class="btn btn-outline btn-outline-dark"
+                type="submit">
             Switch theme ({(props.currentTheme === 'light')? 'Light' : 'Night'})
         </button>
     </form>