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 = {