2 files changed, 12 insertions, 4 deletions
diff --git a/client/modalImage/modal.css b/client/modalImage/modal.css
index d9180125..fb3c7ab5 100644
--- a/client/modalImage/modal.css
+++ b/client/modalImage/modal.css
@@ -25,8 +25,8 @@
   align-items: center;
 }
 .modal img {
-  max-width: 80vw;
-  max-height: 80vh;
+  max-width: 90vw;
+  max-height: 90vh;
 }
 .modal .caption {
   display: block;
diff --git a/client/modalImage/modalImage.container.js b/client/modalImage/modalImage.container.js
index a637deb6..55904c40 100644
--- a/client/modalImage/modalImage.container.js
+++ b/client/modalImage/modalImage.container.js
@@ -10,7 +10,7 @@ import csv from 'parse-csv'
 
 class ModalImage extends Component {
   state = {
-    visible: true,
+    visible: false,
     images: [],
     index: 0,
   }
@@ -26,8 +26,11 @@ class ModalImage extends Component {
       if (document.activeElement && document.activeElement !== document.body) {
         return null
       }
-      // console.log(e.keyCode)
+      console.log(e.keyCode)
       switch (e.keyCode) {
+        case 27: // esc
+          this.close()
+          break
         case 37: // left
           this.prev()
           break
@@ -41,16 +44,21 @@ class ModalImage extends Component {
   }
 
   loadImage(index) {
+    const { index, images } = this.state
+    if (!images.length) return
+    if (index < 0 || index >= this.images.length) return
     this.setState({ visible: true, index })
   }
 
   prev() {
     const { index, images } = this.state
+    if (!images.length) return
     this.setState({ index: (images.length + index - 1) % images.length })
   }
 
   next() {
     const { index, images } = this.state
+    if (!images.length) return
     this.setState({ index: (index + 1) % images.length })
   }