diff --git a/src/lib/components/modals/Modal.svelte b/src/lib/components/modals/Modal.svelte
index 6b07b259..9ef088d5 100644
--- a/src/lib/components/modals/Modal.svelte
+++ b/src/lib/components/modals/Modal.svelte
@@ -88,41 +88,41 @@
     & .jse-modal-inner {
       @include jse-modal-style;
     }
-  }
 
-  @keyframes zoom {
-    from {
-      transform: scale(0.95);
-    }
-    to {
-      transform: scale(1);
+    @keyframes zoom {
+      from {
+        transform: scale(0.95);
+      }
+      to {
+        transform: scale(1);
+      }
     }
-  }
 
-  @keyframes fade {
-    from {
-      opacity: 0;
+    @keyframes fade {
+      from {
+        opacity: 0;
+      }
+      to {
+        opacity: 1;
+      }
     }
-    to {
-      opacity: 1;
-    }
-  }
 
-  // styling for the select box, svelte-select
-  // see docs: https://github.com/rob-balfre/svelte-select#css-custom-properties-variables
-  :global(.svelte-select) {
-    --border: #{$svelte-select-border};
-    --item-is-active-bg: #{$svelte-select-item-is-active-bg};
-    --border-radius: #{$svelte-select-border-radius};
-    --background: #{$svelte-select-background};
-    --padding: #{$svelte-select-padding};
-    --multi-select-padding: #{$svelte-select-multi-select-padding};
-    --font-size: #{$svelte-select-font-size};
-    --height: 36px;
-    --multi-item-height: 28px;
-    --multi-item-margin: 2px;
-    --multi-item-padding: 2px 8px;
-    --multi-item-border-radius: 6px;
-    --indicator-top: 8px;
+    // styling for the select box, svelte-select
+    // see docs: https://github.com/rob-balfre/svelte-select#css-custom-properties-variables
+    :global(.svelte-select) {
+      --border: #{$svelte-select-border};
+      --item-is-active-bg: #{$svelte-select-item-is-active-bg};
+      --border-radius: #{$svelte-select-border-radius};
+      --background: #{$svelte-select-background};
+      --padding: #{$svelte-select-padding};
+      --multi-select-padding: #{$svelte-select-multi-select-padding};
+      --font-size: #{$svelte-select-font-size};
+      --height: 36px;
+      --multi-item-height: 28px;
+      --multi-item-margin: 2px;
+      --multi-item-padding: 2px 8px;
+      --multi-item-border-radius: 6px;
+      --indicator-top: 8px;
+    }
   }
 </style>
diff --git a/src/lib/components/modals/SortModal.scss b/src/lib/components/modals/SortModal.scss
index 3e647918..2e32dfb6 100644
--- a/src/lib/components/modals/SortModal.scss
+++ b/src/lib/components/modals/SortModal.scss
@@ -2,47 +2,47 @@
 
 .jse-modal-contents {
   @include jse-modal-contents;
-}
 
-table {
-  width: 100%;
-  border-collapse: collapse;
-  border-spacing: 0;
-
-  th,
-  td {
-    text-align: left;
-    vertical-align: middle;
-    font-weight: normal;
-    padding-bottom: $padding;
-
-    input.jse-path {
-      width: 100%;
-      box-sizing: border-box;
-      padding: 6px 16px; // TODO: define variables for those props
-      border: $input-border;
-      border-radius: $input-radius;
-      font-family: inherit;
-      font-size: inherit;
-      background: inherit;
-      color: inherit;
-      outline: none;
-
-      &:read-only {
-        background: $input-background-readonly;
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    border-spacing: 0;
+
+    th,
+    td {
+      text-align: left;
+      vertical-align: middle;
+      font-weight: normal;
+      padding-bottom: $padding;
+
+      input.jse-path {
+        width: 100%;
+        box-sizing: border-box;
+        padding: 6px 16px; // TODO: define variables for those props
+        border: $input-border;
+        border-radius: $input-radius;
+        font-family: inherit;
+        font-size: inherit;
+        background: inherit;
+        color: inherit;
+        outline: none;
+
+        &:read-only {
+          background: $input-background-readonly;
+        }
       }
-    }
 
-    :global(.svelte-select input) {
-      box-sizing: border-box;
+      :global(.svelte-select input) {
+        box-sizing: border-box;
+      }
     }
   }
-}
 
-.jse-space {
-  height: 200px; // Trick for the property select box dropdown to be fully visible
+  .jse-space {
+    height: 200px; // Trick for the property select box dropdown to be fully visible
 
-  .jse-error {
-    color: $error-color;
+    .jse-error {
+      color: $error-color;
+    }
   }
 }
diff --git a/src/lib/components/modals/TransformModal.scss b/src/lib/components/modals/TransformModal.scss
index b065647c..66cc2f7e 100644
--- a/src/lib/components/modals/TransformModal.scss
+++ b/src/lib/components/modals/TransformModal.scss
@@ -6,162 +6,162 @@
   flex-direction: column;
   min-width: 0;
   min-height: 0;
-}
-
-.jse-modal-contents {
-  color: inherit;
-
-  @include jse-modal-contents($modal-padding: 0);
 
-  .jse-main-contents {
-    flex: 1;
-    display: flex;
-    gap: $padding-double;
-    min-height: 0;
-    box-sizing: border-box;
+  .jse-modal-contents {
+    color: inherit;
 
-    padding: 0 $padding-double $padding;
+    @include jse-modal-contents($modal-padding: 0);
 
-    .jse-query-contents {
+    .jse-main-contents {
       flex: 1;
       display: flex;
-      flex-direction: column;
+      gap: $padding-double;
+      min-height: 0;
+      box-sizing: border-box;
 
-      .jse-description {
-        :global(p) {
-          margin: $padding 0;
+      padding: 0 $padding-double $padding;
 
-          &:first-child {
-            margin-top: 0;
+      .jse-query-contents {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+
+        .jse-description {
+          :global(p) {
+            margin: $padding 0;
+
+            &:first-child {
+              margin-top: 0;
+            }
+
+            &:last-child {
+              margin-bottom: 0;
+            }
           }
 
-          &:last-child {
-            margin-bottom: 0;
+          :global(code) {
+            background: $modal-code-background;
+            font-family: $font-family-mono;
+            font-size: $font-size-mono;
           }
         }
 
-        :global(code) {
-          background: $modal-code-background;
-          font-family: $font-family-mono;
-          font-size: $font-size-mono;
+        .query-error {
+          color: $error-color;
         }
-      }
-
-      .query-error {
-        color: $error-color;
-      }
 
-      textarea.jse-query {
-        flex: 1;
-        outline: none;
-        resize: vertical; // prevent resizing horizontally
+        textarea.jse-query {
+          flex: 1;
+          outline: none;
+          resize: vertical; // prevent resizing horizontally
+        }
       }
-    }
-
-    .jse-data-contents {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      gap: $padding-double;
 
-      .jse-original-data {
+      .jse-data-contents {
         flex: 1;
         display: flex;
         flex-direction: column;
-        min-height: 0;
-        box-sizing: border-box;
+        gap: $padding-double;
+
+        .jse-original-data {
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+          min-height: 0;
+          box-sizing: border-box;
 
-        &.jse-hide {
-          flex: none;
+          &.jse-hide {
+            flex: none;
+          }
         }
-      }
 
-      .jse-preview-data {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        min-height: 0;
-        box-sizing: border-box;
-      }
+        .jse-preview-data {
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+          min-height: 0;
+          box-sizing: border-box;
+        }
 
-      &.jse-hide-original-data {
-        flex-direction: column;
-        gap: 0;
-        margin-bottom: 0;
+        &.jse-hide-original-data {
+          flex-direction: column;
+          gap: 0;
+          margin-bottom: 0;
+        }
       }
     }
-  }
 
-  .jse-actions {
-    padding: $padding $padding-double $padding-double;
-  }
+    .jse-actions {
+      padding: $padding $padding-double $padding-double;
+    }
 
-  @media screen and (max-width: 1200px) {
-    .jse-main-contents {
-      flex-direction: column;
-      overflow: auto;
+    @media screen and (max-width: 1200px) {
+      .jse-main-contents {
+        flex-direction: column;
+        overflow: auto;
 
-      .jse-query-contents {
-        textarea.jse-query {
-          min-height: 150px;
-          flex: none;
+        .jse-query-contents {
+          textarea.jse-query {
+            min-height: 150px;
+            flex: none;
+          }
         }
-      }
 
-      .jse-data-contents {
-        :global(.jse-tree-mode) {
-          height: 300px;
-          flex: none;
+        .jse-data-contents {
+          :global(.jse-tree-mode) {
+            height: 300px;
+            flex: none;
+          }
         }
       }
     }
   }
-}
 
-.jse-label {
-  font-weight: bold;
-  display: block;
-  box-sizing: border-box;
-
-  .jse-label-inner {
-    margin-top: $padding-double;
-    margin-bottom: $padding-half;
+  .jse-label {
+    font-weight: bold;
+    display: block;
     box-sizing: border-box;
 
-    button {
-      @include jsoneditor-button;
-      font-weight: bold;
-      padding: 0;
+    .jse-label-inner {
+      margin-top: $padding-double;
+      margin-bottom: $padding-half;
+      box-sizing: border-box;
+
+      button {
+        @include jsoneditor-button;
+        font-weight: bold;
+        padding: 0;
+      }
     }
   }
-}
 
-:global(.jse-tree-mode) {
-  flex: 1;
-  background: $input-background-readonly;
-  box-shadow: none;
-  box-sizing: border-box;
+  :global(.jse-tree-mode) {
+    flex: 1;
+    background: $input-background-readonly;
+    box-shadow: none;
+    box-sizing: border-box;
 
-  --jse-main-border: #{$input-border};
-}
+    --jse-main-border: #{$input-border};
+  }
 
-input,
-textarea {
-  @include modal-input-mixin;
-}
+  input,
+  textarea {
+    @include modal-input-mixin;
+  }
 
-.jse-preview.jse-error {
-  flex: 1;
-  background: $input-background-readonly;
-  border: $input-border;
-  color: $error-color;
-  padding: $padding-half;
-}
+  .jse-preview.jse-error {
+    flex: 1;
+    background: $input-background-readonly;
+    border: $input-border;
+    color: $error-color;
+    padding: $padding-half;
+  }
 
-:global(a) {
-  color: $a-color;
-}
+  :global(a) {
+    color: $a-color;
+  }
 
-:global(a:hover) {
-  color: $a-color-highlight;
+  :global(a:hover) {
+    color: $a-color-highlight;
+  }
 }