script editor

frontend/src/lib/components/Modal.svelte

@@ -6,6 +6,8 @@
   export let submitText: string = "Submit";
   export let cancelLabel: string = "Cancel";
   export let wide: boolean = false;
+  export let ultrawide: boolean = false;
+  export let fullheight: boolean = false;
   export let error: string | null = null;
   export let closable: boolean = false;
   export let disabled: boolean = false;
@@ -28,7 +30,7 @@
 {#if show}
   <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
   <div role="dialog" class="modal-background" on:keypress={onKeyPress}>
-    <div class="modal" class:wide class:nobody>
+    <div class="modal" class:wide class:ultrawide class:fullheight class:nobody>
       <div class="header" class:nobody>
         <div class="title" class:noclose={!closable}>{titleText}</div>  
         {#if (closable)}
@@ -88,9 +90,13 @@
     &.fullheight {
       min-height: 100%
     }
-  }
-  div.modal.wide {
-    max-width: 80ch;
+
+    &.wide {
+      max-width: 80ch;
+    }
+    &.ultrawide {
+      max-width: 120ch;
+    }
   }
 
   div.header {
@@ -186,7 +192,7 @@
     -moz-user-select: none;
   }
   
-  div.modal :global(input:not(.custom)), div.modal :global(select), div.modal :global(textarea) {
+  div.modal :global(input:not(.custom)), div.modal :global(select:not(.custom)), div.modal :global(textarea) {
     width: calc(100% - 2ch);
     margin-bottom: 1em;
     margin-top: 0.25em;
@@ -198,12 +204,12 @@
     resize: vertical;
     padding: 0.5em 1ch;
   }
-  div.modal :global(select) {
+  div.modal :global(select:not(.custom)) {
     padding-left: 0.5ch;
     padding: 0.45em 1ch;
     width: 100%;
   }
-  div.modal :global(select option), div.modal :global(select optgroup) {
+  div.modal :global(select:not(.custom) option), div.modal :global(select:not(.custom) optgroup) {
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;