add styles for uniform width of controls

webgme · Aug 22, 2023 · 15e5706 · 15e5706
1 parent 8c66e9d
commit 15e5706
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 23 deletions.
diff --git a/src/lib/SchemaForm.svelte b/src/lib/SchemaForm.svelte
@@ -106,10 +106,23 @@
 </form>
 
 <style>
-
   .jsonschema-form .actions {
     margin: 12px 0;
   }
 
+  .jsonschema-form :global(.jsonschema-form-controls) {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 24px;
+  }
+
+  .jsonschema-form :global(.jsonschema-form-controls > .jsonschema-form-control) {
+    flex-basis: 325px;
+  }
+
+  .jsonschema-form :global(.jsonschema-form-controls > .control-array),
+  .jsonschema-form :global(.jsonschema-form-controls > .control-object) {
+    flex-basis: 100%;
+  }
 </style>
 
diff --git a/src/lib/controls/ArrayControl.svelte b/src/lib/controls/ArrayControl.svelte
@@ -158,6 +158,7 @@
   .control-array-items {
     list-style: none;
     padding-left: 0;
+    width: 100%;
   }
 
   .control-array-items > li {

diff --git a/src/lib/controls/ObjectControl.svelte b/src/lib/controls/ObjectControl.svelte
@@ -45,20 +45,3 @@
     </Accordion>
   {/if}
 {/if}
-
-
-<style>
-  :global(.control-object) {
-    flex-basis: 100%;
-  }
-  :global(.control-object.smui-accordion > .smui-accordion__panel > .smui-paper__content) {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 24px;
-  }
-
-  :global(.control-object.smui-accordion > .smui-accordion__panel > .smui-paper__content > .control-object),
-  :global(.control-object.smui-accordion > .smui-accordion__panel > .smui-paper__content > .control-array) {
-    flex-basis: 100%;
-  }
-</style>
diff --git a/src/theme/_custom.scss b/src/theme/_custom.scss
@@ -1,7 +1,7 @@
 .control-object,
 .control-array {
 
-  &.smui-accordion > .smui-accordion__panel {
+  &.smui-accordion > .smui-paper {
 
     > .smui-accordion__header {
       background-color: #E4E4E4;
@@ -36,9 +36,5 @@
         color: #FFFFFF;
       }
     }
-
-    > .smui-paper__content > * {
-      flex-basis: 325px;
-    }
   }
 }