diff --git a/src/components/modals/OpenModal.jsx b/src/components/modals/OpenModal.jsx index a9799eb..440343c 100644 --- a/src/components/modals/OpenModal.jsx +++ b/src/components/modals/OpenModal.jsx @@ -132,7 +132,7 @@ class OpenModal extends React.Component { -
+

Gallery Styles

Open one of the publicly available styles to start from. diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss index 4ea6832..387b3e9 100644 --- a/src/styles/_mixins.scss +++ b/src/styles/_mixins.scss @@ -12,3 +12,10 @@ @include vendor-prefix(flex-direction, row); } + +@mixin flex-column { + display: flex; + display: -ms-flexbox; + + @include vendor-prefix(flex-direction, column); +} diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss index 24f042b..f1f1b6d 100644 --- a/src/styles/_modal.scss +++ b/src/styles/_modal.scss @@ -10,12 +10,15 @@ .maputnik-modal-section { padding-top: $margin-3; padding-bottom: $margin-3; - display: flex; + @include flex-column; flex-direction: column; + flex-shrink: 0; + /* Bug fix: */ + min-height: 0; } -.maputnik-modal-section--fill { - flex: 1 1; +.maputnik-modal-section--shrink { + flex-shrink: 1; } .maputnik-modal-header { @@ -36,7 +39,7 @@ .maputnik-modal-content { padding: $margin-3; - display: flex; + @include flex-column; flex-direction: column; max-height: 90vh; } @@ -75,9 +78,8 @@ } .maputnik-style-gallery-container { - max-height: 400px; overflow-y: scroll; - flex: 1; + flex-shrink: 1; } .maputnik-public-style { @@ -221,6 +223,7 @@ .maputnik-modal-error-close { position: absolute; right: 8px; + top: 8px; text-decoration: none; color: #ef5350; }