From 3f72b7cc0d87ea26d8d4bf9de5e142ab53968e24 Mon Sep 17 00:00:00 2001
From: James Read <contact@jread.com>
Date: Thu, 28 Dec 2023 23:47:02 +0000
Subject: [PATCH] bugfix: Argument form on smaller screens (#209)

---
 webui/js/ArgumentForm.js | 11 ++++++-----
 webui/style.css          | 26 ++++++++++++++++++++++++--
 2 files changed, 30 insertions(+), 7 deletions(-)

diff --git a/webui/js/ArgumentForm.js b/webui/js/ArgumentForm.js
index 3fbba58..0bd069c 100644
--- a/webui/js/ArgumentForm.js
+++ b/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)
     }
   }
 
diff --git a/webui/style.css b/webui/style.css
index bb43048..cc77c60 100644
--- a/webui/style.css
+++ b/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;
   }