From 7736f3ff33fed65be3c6bdbcbac013e1544c69f9 Mon Sep 17 00:00:00 2001
From: Al Duncanson <alexjduncanson@gmail.com>
Date: Sat, 27 Oct 2018 16:59:36 -0400
Subject: [PATCH] made list scrollable

---
 src/App.css                      | 7 ++++++-
 src/components/SightingDetail.js | 2 +-
 src/components/ViewSightings.js  | 4 ++--
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/App.css b/src/App.css
index 0612f07..4e8368c 100644
--- a/src/App.css
+++ b/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;
 }
 
diff --git a/src/components/SightingDetail.js b/src/components/SightingDetail.js
index ffcaa27..73df886 100644
--- a/src/components/SightingDetail.js
+++ b/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>
diff --git a/src/components/ViewSightings.js b/src/components/ViewSightings.js
index 9abd481..fe59599 100644
--- a/src/components/ViewSightings.js
+++ b/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>