fix: styling fix of the scrollbar in the TransformModal

josdejong · Nov 17, 2021 · 5adc31d · 5adc31d
1 parent 871ac5c
commit 5adc31d
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 8 deletions.
diff --git a/src/lib/components/modals/Modal.scss b/src/lib/components/modals/Modal.scss
@@ -14,12 +14,17 @@
   --itemIsActiveBG: #3883fa; // theme-color
   --indicatorTop: 8px;
 
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+
   font-family: $font-family;
   font-size: $font-size;
   color: $black;
 
   .contents {
     padding: 20px;
+    overflow: auto;
 
     .actions {
       display: flex;

diff --git a/src/lib/components/modals/SortModal.scss b/src/lib/components/modals/SortModal.scss
@@ -2,6 +2,10 @@
 @import 'Modal';
 
 .jsoneditor-modal.sort {
+  .contents {
+    overflow: hidden;
+  }
+
   table {
     width: 100%;
     border-collapse: collapse;

diff --git a/src/lib/constants.js b/src/lib/constants.js
@@ -36,15 +36,16 @@ export const SIMPLE_MODAL_OPTIONS = {
   styleBg: {
     top: 0,
     left: 0,
-    background: 'rgba(0, 0, 0, 0.3)',
-    justifyContent: 'normal'
+    background: 'rgba(0, 0, 0, 0.3)'
   },
   styleWindow: {
     borderRadius: '2px'
   },
+  styleWindowWrap: {},
   styleContent: {
-    padding: '0px',
-    overflow: 'visible' // needed for select box dropdowns which are larger than the modal
+    flex: 1,
+    display: 'flex',
+    padding: '0px'
   }
 }
 
@@ -61,10 +62,6 @@ export const TRANSFORM_MODAL_OPTIONS = {
   styleWindow: {
     ...SIMPLE_MODAL_OPTIONS.styleWindow,
     width: '700px'
-  },
-  styleContent: {
-    overflow: 'auto', // TODO: would be more neat if the header is fixed instead of scrolls along
-    padding: 0
   }
 }