From 34534bba0c3aefbb46d6619c72517ebc533d5616 Mon Sep 17 00:00:00 2001
From: Jos de Jong <wjosdejong@gmail.com>
Date: Wed, 16 Sep 2020 12:15:31 +0200
Subject: [PATCH] Improve responsiveness of modal

---
 src/components/modals/Modal.scss             | 23 ++++++++++++++++----
 src/components/modals/TransformWizard.svelte |  2 +-
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/components/modals/Modal.scss b/src/components/modals/Modal.scss
index 13e5a70..f900b8e 100644
--- a/src/components/modals/Modal.scss
+++ b/src/components/modals/Modal.scss
@@ -1,13 +1,14 @@
 @import '../../styles.scss';
 
 .jsoneditor-modal {
-  // styling for the select box, 
+  // styling for the select box, svelte-select
   // see docs: https://github.com/rob-balfre/svelte-select#styling
   --height: 36px;
   --multiItemHeight: 28px;
   --multiItemMargin: 2px;
   --multiItemPadding: 2px 8px;
-  --multiClearTop: 6px;
+  --multiClearTop: 5px;
+  --multiItemBorderRadius: 6px;
   --clearSelectTop: 2px;
   --clearSelectBottom: 2px;
   --itemIsActiveBG: #3883fa; // theme-color
@@ -18,6 +19,7 @@
   
   .contents {
     padding: 20px;
+    overflow: hidden;
 
     .actions {
       display: flex;
@@ -31,6 +33,19 @@
 
 // custom styling for the modal. 
 // FIXME: not neat to override global styles!
-:global(.bg .window-wrap) {
-  margin-top: 8rem;
+:global(.bg) {
+  width: 100%;
+  height: 100%;
+}
+:global(.bg .window-wrap) {
+  margin: 0;
+}
+:global(.bg .window) {
+  max-width: 80%;
+  margin: 4rem auto 2rem auto;
+  overflow: auto;
+}
+
+:global(.bg .content) {
+  max-height: calc(100vh - 6rem);
 }
diff --git a/src/components/modals/TransformWizard.svelte b/src/components/modals/TransformWizard.svelte
index 83ca228..fcfe2d4 100644
--- a/src/components/modals/TransformWizard.svelte
+++ b/src/components/modals/TransformWizard.svelte
@@ -69,7 +69,7 @@
       queryOptions = newQueryOptions
       const query = createQuery(json, queryOptions)
       
-      console.log('query updated', query, queryOptions)
+      // console.log('query updated', query, queryOptions)
 
       onQuery(query)
     }