Fix styling of select boxes in wizard

src/components/modals/Modal.scss

@@ -4,6 +4,10 @@
   // styling for the select box, 
   // see docs: https://github.com/rob-balfre/svelte-select#styling
   --height: 36px;
+  --multiItemHeight: 28px;
+  --multiItemMargin: 2px;
+  --multiItemPadding: 2px 8px;
+  --multiClearTop: 6px;
   --clearSelectTop: 2px;
   --clearSelectBottom: 2px;
   --itemIsActiveBG: #3883fa; // theme-color

src/components/modals/TransformWizard.scss

@@ -9,6 +9,7 @@ table.transform-wizard {
     th {
       font-weight: normal;
       text-align: left;
+      width: 60px;
     }
   
     td {
@@ -16,21 +17,45 @@ table.transform-wizard {
         width: 100%;
         display: flex;
         flex-direction: row;
-  
+        margin-bottom: $padding/2;
-        .selectContainer.filter-field {
+
-          flex: 4;
+        :global(.selectContainer) {
-          margin-right: $padding;
+          &.filter-field {
-        }
+            flex: 4;
-        
+            margin-right: $padding/2;
-        .selectContainer.filter-relation {
+          }
-          flex: 1;
+          
-          margin-right: $padding;
+          &.filter-relation {
-        }
+            flex: 1;
-        
+            margin-right: $padding/2;
+          }
+
+          &.sort-field {
+            flex: 3;
+            margin-right: $padding/2;
+          }
+          
+          &.sort-direction {
+            flex: 1;
+          }
+
+          &.pick-fields {
+            flex: 1;
+          }
+        }  
+
         .filter-value {
           flex: 4;
+          padding: $padding;
+          border: 1px solid $border-gray;
+          border-radius: $border-radius;
+          outline: none;
+
+          &:focus {
+            border-color: $theme-color;
+          }
         }
       }
     }
   }
-}
+}