frontend: Better style for welcome map on mobile

frontend/src/pages/HomePage.js

@@ -1,6 +1,6 @@
 import _ from 'lodash'
 import React from 'react'
-import {Tab, Message, Grid, Loader, Statistic, Segment, Header, Item} from 'semantic-ui-react'
+import {Message, Grid, Loader, Statistic, Segment, Header, Item} from 'semantic-ui-react'
 import {useObservable} from 'rxjs-hooks'
 import {of, pipe, from} from 'rxjs'
 import {map, switchMap, distinctUntilChanged} from 'rxjs/operators'
@@ -11,6 +11,7 @@ import api from '../api'
 import {Map, Page} from '../components'
 
 import {TrackListItem} from './TracksPage'
+import styles from './HomePage.module.scss'
 
 function formatDuration(seconds) {
   return Duration.fromMillis((seconds ?? 0) * 1000)
@@ -20,7 +21,7 @@ function formatDuration(seconds) {
 
 function WelcomeMap() {
   return (
-    <Map style={{height: '60rem', maxHeight: '80vh'}}>
+    <Map className={styles.welcomeMap}>
       <Map.TileLayer />
       <Map.View maxZoom={22} zoom={6} center={fromLonLat([10, 51])} />
     </Map>
@@ -70,7 +71,7 @@ function MostRecentTrack() {
     () =>
       of(null).pipe(
         switchMap(() => from(api.fetch('/tracks?limit=1'))),
-        map(({tracks}) => tracks[0])
+        map((response) => response?.tracks?.[0])
       ),
     null,
     []
@@ -94,7 +95,7 @@ function MostRecentTrack() {
 export default function HomePage() {
   return (
     <Page>
-      <Grid>
+      <Grid stackable>
         <Grid.Row>
           <Grid.Column width={10}>
             <WelcomeMap />

frontend/src/pages/HomePage.module.scss

@@ -0,0 +1,9 @@
+.welcomeMap {
+  height: 60rem;
+  max-height: 80vh;
+
+  @media screen and (max-width: 767px) {
+    margin: -35px -32px 0 -32px;
+  max-height: 70vh;
+  }
+}

frontend/src/styles.scss

@@ -1,4 +1,5 @@
 @mixin container {
   max-width: 1200px;
   margin: 0 auto;
+  padding: 0 16px;
 }