diff --git a/webui.dev/js/ArgumentForm.js b/webui.dev/js/ArgumentForm.js index 05aa7ce..0601408 100644 --- a/webui.dev/js/ArgumentForm.js +++ b/webui.dev/js/ArgumentForm.js @@ -60,15 +60,10 @@ class ArgumentForm extends window.HTMLElement { this.argInputs = [] for (const arg of args) { - const domArgumentWrapper = document.createElement('p') - domArgumentWrapper.classList.add('argument-wrapper') - - domArgumentWrapper.appendChild(this.createDomLabel(arg)) - domArgumentWrapper.appendChild(this.createDomSuggestions(arg)) - domArgumentWrapper.appendChild(this.createDomInput(arg)) - domArgumentWrapper.appendChild(this.createDomDescription(arg)) - - this.domArgs.appendChild(domArgumentWrapper) + this.domArgs.appendChild(this.createDomLabel(arg)) + this.domArgs.appendChild(this.createDomSuggestions(arg)) + this.domArgs.appendChild(this.createDomInput(arg)) + this.domArgs.appendChild(this.createDomDescription(arg)) } } @@ -191,7 +186,7 @@ class ArgumentForm extends window.HTMLElement { createDomDescription (arg) { const domArgumentDescription = document.createElement('span') domArgumentDescription.classList.add('argument-description') - domArgumentDescription.innerText = arg.description + domArgumentDescription.innerHTML = arg.description return domArgumentDescription } diff --git a/webui.dev/style.css b/webui.dev/style.css index d202450..551a23b 100644 --- a/webui.dev/style.css +++ b/webui.dev/style.css @@ -246,6 +246,10 @@ input[type="submit"] transition: background-color 1s ease, color 1s ease; } +input[type="checkbox"] { + justify-self: baseline; +} + fieldset button { border-radius: .7em; } @@ -363,10 +367,8 @@ form div.wrapper { } label { - min-width: 20%; text-align: right; display: inline-block; - padding-right: 1em; } header { @@ -405,13 +407,17 @@ input[name="start"]:hover { color: black; } -span.argument-description { - margin-left: 1em; +div.arguments { + display: grid; + grid-template-columns: max-content auto auto; /* We don't want the label or the description to wrap, and the input to take up the rest of the space */ + grid-template-rows: repeat(auto-fill, 1fr); + grid-gap: 1em; + align-items: center; + } p.argument-wrapper { display: flex; - place-items: center; } div.buttons { @@ -500,16 +506,14 @@ div.display { text-align: left; margin-bottom: .6em; font-weight: bold; - min-width: auto; } p.argument-wrapper { flex-direction: column; } - span.argument-description { - margin-left: 0; - margin-top: .6em; + div.arguments { + grid-template-columns: auto; } dialog {