diff --git a/src/lib/components/modals/TransformModal.scss b/src/lib/components/modals/TransformModal.scss index 27074e24..a4e121af 100644 --- 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 index 07f51584..77229317 100644 --- 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' } }