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 1/2] 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 7f9a31b..cafbdfa 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 69ee2e4..9a2fd80 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;
 }

From a95b2932db478e5488d835aaa89754ebdeafdcb1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Grzegorz=20Wolan=CC=81ski?= <g@wolanski.name>
Date: Wed, 11 Oct 2017 23:11:40 +0200
Subject: [PATCH 2/2] Modal scrolling #156: Issue fixed

---
 src/styles/_modal.scss | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss
index 9a2fd80..5674060 100644
--- a/src/styles/_modal.scss
+++ b/src/styles/_modal.scss
@@ -41,7 +41,7 @@
 }
 
 .maputnik-modal-scroller {
-  max-height: 90vh;
+  max-height: calc(100vh - 35px);
   overflow-y: auto;
 }
 
@@ -85,7 +85,6 @@
 }
 
 .maputnik-style-gallery-container {
-  overflow-y: scroll;
   flex-shrink: 1;
 }