fix: minor styling issues with modals

josdejong · Sep 21, 2023 · 97d2d94 · 97d2d94
1 parent 2a33aeb
commit 97d2d94
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 20 deletions.
diff --git a/src/lib/components/modals/JSONEditorModal.scss b/src/lib/components/modals/JSONEditorModal.scss
@@ -3,9 +3,6 @@
 
 .jse-modal.jse-jsoneditor-modal {
   .jse-modal-contents {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
     padding-top: 0;
 
     --jse-theme-color: var(--jse-modal-theme-color);
@@ -31,7 +28,7 @@
 
     .jse-modal-inline-editor {
       flex: 1;
-      min-height: 0;
+      min-height: 150px;
       min-width: 0;
       display: flex;
     }

diff --git a/src/lib/components/modals/JSONRepairModal.scss b/src/lib/components/modals/JSONRepairModal.scss
@@ -1,13 +1,5 @@
 @import '../../styles';
+@import 'Modal';
 
 .jse-modal.jse-repair {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-
-  font-family: var(--jse-font-family);
-  font-size: var(--jse-font-size);
-  line-height: normal;
-  background: var(--jse-background-color);
-  color: var(--jse-text-color);
 }
diff --git a/src/lib/components/modals/Modal.scss b/src/lib/components/modals/Modal.scss
@@ -23,6 +23,9 @@
   color: var(--jse-text-color);
 
   .jse-modal-contents {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
     padding: 20px;
     overflow: auto;
     min-width: 0;
@@ -78,13 +81,13 @@
   width: 800px;
   height: auto;
   min-height: 500px;
-  max-height: 80%;
+  max-height: calc(100vh - 6rem);
   display: flex;
 }
 
-:global(.bg.jse-modal-bg .jse-modal-content) {
+:global(.bg.jse-modal-bg .jse-modal-container) {
   flex: 1;
   display: flex;
-  max-height: calc(100vh - 6rem);
+  flex-direction: column;
   padding: 0;
 }
diff --git a/src/lib/components/modals/TransformModal.scss b/src/lib/components/modals/TransformModal.scss
@@ -3,9 +3,6 @@
 
 .jse-modal.jse-transform {
   .jse-modal-contents {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
     color: inherit;
     min-height: 0;
     padding: 0;

diff --git a/src/lib/constants.ts b/src/lib/constants.ts
@@ -26,7 +26,7 @@ export const SIMPLE_MODAL_OPTIONS = {
   classBg: 'jse-modal-bg',
   classWindow: 'jse-modal-window',
   classWindowWrap: 'jse-modal-window-wrap',
-  classContent: 'jse-modal-content'
+  classContent: 'jse-modal-container'
 }
 
 export const SORT_MODAL_OPTIONS = {