fix: styling tweaks in the TransformModal

josdejong · Apr 6, 2022 · 3983918 · 3983918
1 parent 33de78f
commit 3983918
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 20 deletions.
diff --git a/src/lib/components/modals/TransformModal.scss b/src/lib/components/modals/TransformModal.scss
@@ -22,10 +22,13 @@
       padding-bottom: $padding;
 
       .query-contents {
-        flex: 3;
+        flex: 1;
         display: flex;
         flex-direction: column;
 
+        // This is an ugly trick to compensate for the padding of the labels in .preview-data
+        margin-bottom: -2 * $padding + 2px;
+
         .description {
           color: $dark-gray;
 
@@ -56,9 +59,9 @@
       }
 
       .data-contents {
-        flex: 4;
+        flex: 1;
         display: flex;
-        flex-direction: row;
+        flex-direction: column;
         gap: 2 * $padding;
 
         .original-data {
@@ -81,26 +84,12 @@
           box-sizing: border-box;
         }
 
-        @media screen and (max-width: 1600px) {
-          & {
-            flex: 3;
-            flex-direction: column;
-          }
-        }
-
         &.hide-original-data {
           flex-direction: column;
           gap: 0;
           margin-bottom: 0;
         }
       }
-
-      @media screen and (max-width: 1600px) {
-        .query-contents {
-          // This is an ugly trick to compensate for the padding of the labels in .preview-data
-          margin-bottom: -2 * $padding + 2px;
-        }
-      }
     }
 
     .actions {
@@ -153,7 +142,6 @@
     border: 1px solid $background-gray;
     box-shadow: none;
     box-sizing: border-box;
-    min-height: 300px;
   }
 
   :global(.tree-mode.focus) {

diff --git a/src/lib/constants.js b/src/lib/constants.js
@@ -61,8 +61,8 @@ export const TRANSFORM_MODAL_OPTIONS = {
   ...SIMPLE_MODAL_OPTIONS,
   styleWindow: {
     ...SIMPLE_MODAL_OPTIONS.styleWindow,
-    width: '1900px',
-    height: '800px',
+    width: '1200px',
+    height: '80%',
     display: 'flex'
   }
 }