bugfix: Argument form on smaller screens (#209)

webui/js/ArgumentForm.js

@@ -60,13 +60,14 @@ class ArgumentForm extends window.HTMLElement {
     this.argInputs = []
 
     for (const arg of args) {
-      const domFieldWrapper = document.createElement('p')
+      const domArgumentWrapper = document.createElement('p')
+      domArgumentWrapper.classList.add('argument-wrapper')
 
-      domFieldWrapper.appendChild(this.createDomLabel(arg))
-      domFieldWrapper.appendChild(this.createDomInput(arg))
-      domFieldWrapper.appendChild(this.createDomDescription(arg))
+      domArgumentWrapper.appendChild(this.createDomLabel(arg))
+      domArgumentWrapper.appendChild(this.createDomInput(arg))
+      domArgumentWrapper.appendChild(this.createDomDescription(arg))
 
-      this.domArgs.appendChild(domFieldWrapper)
+      this.domArgs.appendChild(domArgumentWrapper)
     }
   }
 

webui/style.css

@@ -319,7 +319,7 @@ form div.wrapper {
 }
 
 label {
-  width: 20%;
+  min-width: 20%;
   text-align: right;
   display: inline-block;
   padding-right: 1em;
@@ -367,6 +367,10 @@ span.argument-description {
   margin-left: 1em;
 }
 
+p.argument-wrapper {
+  display: flex;
+}
+
 form div.buttons {
   text-align: right;
 }
@@ -411,6 +415,24 @@ div.toolbar * {
   margin-right: 1em;
 }
 
+@media screen and (width <= 600px) {
+  label {
+    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;
+  }
+}
+
 @media (prefers-color-scheme: dark) {
   body {
     background-color: #333;
@@ -479,7 +501,7 @@ div.toolbar * {
   tr:hover td {
     background-color: #666;
   }
-  
+
   div.toolbar {
     background-color: black;
   }