made list scrollable

src/App.css

@@ -19,7 +19,12 @@ body {
     width: 99% !important;
 }
 
-.sighting-details {
+.sighting-list {
+    height: calc(100vh - 64px);
+    overflow-y: scroll;
+}
+
+.sighting-details-content {
     margin-top: 330px;
 }
 

src/components/SightingDetail.js

@@ -15,7 +15,7 @@ class SightingDetail extends Component {
         return (
             <Fragment>
                 <SightingDetailMap lat={this.props.detail.lat} lng={this.props.detail.lng}/>
-                <div className='sighting-details'>
+                <div className='sighting-details-content'>
                     <p>{`Confidence: ${this.props.detail.confidence}`}</p>
                     <p>{`When: ${this.props.detail.date}, ${this.props.detail.time}`}</p>
                     <p>{`Where: ${this.props.detail.lat} degrees N, and ${this.props.detail.lng} degrees E`}</p>

src/components/ViewSightings.js

@@ -70,7 +70,7 @@ class ViewSightings extends Component {
         return (
             <Fragment>
                 <Grid container>
-                    <Grid item xs={12} md={6}>
+                    <Grid item xs={12} md={6} className='sighting-list'>
                         <Fragment>
                             <List>
                             { 
@@ -86,7 +86,7 @@ class ViewSightings extends Component {
                             </List>
                         </Fragment>
                     </Grid>
-                    <Grid item xs={12} md={6}>
+                    <Grid item xs={12} md={6} className='sighting-details'>
                         {this.state.clicked === true && <SightingDetail detail={ this.state.selectedSighting }/>}
                     </Grid>
                 </Grid>