From 8a6e24e5e73ad237b2dbf3592c22470fca838c73 Mon Sep 17 00:00:00 2001
From: Gregory Wolanski <github.com@gregorywolanski.com>
Date: Sun, 8 Oct 2017 21:42:04 +0200
Subject: [PATCH] Modal scrolling #156

---
 src/components/modals/Modal.jsx | 4 +++-
 src/styles/_modal.scss          | 7 ++++++-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/modals/Modal.jsx b/src/components/modals/Modal.jsx
index 7f9a31be..cafbdfad 100644
--- a/src/components/modals/Modal.jsx
+++ b/src/components/modals/Modal.jsx
@@ -21,7 +21,9 @@ class Modal extends React.Component {
             <CloseIcon />
           </a>
         </header>
-        <div className="maputnik-modal-content">{this.props.children}</div>
+        <div className="maputnik-modal-scroller">
+          <div className="maputnik-modal-content">{this.props.children}</div>
+        </div>
       </div>
     </Overlay>
   }
diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss
index 69ee2e49..9a2fd80f 100644
--- a/src/styles/_modal.scss
+++ b/src/styles/_modal.scss
@@ -2,6 +2,7 @@
 .maputnik-modal {
   min-width: 350px;
   max-width: 600px;
+  overflow: hidden;
   background-color: $color-black;
   box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
   z-index: 3;
@@ -39,9 +40,13 @@
   cursor: pointer;
 }
 
+.maputnik-modal-scroller {
+  max-height: 90vh;
+  overflow-y: auto;
+}
+
 .maputnik-modal-content {
   padding: $margin-3;
-  max-height: 90vh;
 
   @include flex-column;
 }