fixed mobile styles

src/App.css

@@ -2,14 +2,15 @@ body {
     margin: 0;
 }
 
-@media (min-width: 960px) {
+@media (min-width: 600px) {
     .sighting-google-map-container > div {
-        width: calc(100% - 241px) !important;
+        width: calc(100% - 240px) !important;
+        height: calc(100% - 64px) !important;
     }
 }
 
 @media (min-width: 960px) {
     .report-google-map-container > div {
-        width: 50% !important;
+        width: calc(100% - 50% - 120px) !important;
     }
 }

src/components/Main.js

@@ -60,7 +60,8 @@ const styles = theme => ({
         width: drawerWidth,
     },
     content: {
-        flexGrow: 1
+        flexGrow: 1,
+        width: '60%'
     },
 });
 
@@ -153,7 +154,6 @@ class ResponsiveDrawer extends React.Component {
                     </Toolbar>
                 </AppBar>
                 <nav className={classes.drawer}>
-                    {/* The implementation can be swap with js to avoid SEO duplication of links. */}
                     <Hidden smUp implementation="css">
                         <Drawer
                             container={this.props.container}