added vertical mode and optimised layout for mobile

src/ui/Widgets/BoolBox/BoolBox.css

@@ -2,11 +2,13 @@
     height: 1.1em;
     margin: 0.5em;
     line-height: 1em;
+    cursor: pointer;
 }
 
 .bool-box-label {
     display: inline-block;
     margin-right: 0.5em;
+    cursor: pointer;
 }
 
 input.bool-box-checkbox[type="checkbox"] {
@@ -20,6 +22,7 @@ input.bool-box-checkbox[type="checkbox"] {
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
+    cursor: pointer;
 }
 
 input.bool-box-checkbox[type="checkbox"]::before {

src/ui/Widgets/BoolBox/BoolBoxView.ts

@@ -39,6 +39,9 @@ export default class BoolBoxView extends UINode {
         this.labelElement = UINode.make("label", {
             classes: ["bool-box-label"],
             innerText: this.label ?? "",
+            onclick: () => {
+                this.onInput(!this.checkboxElement.checked);
+            },
         });
         if (this.label !== null) {
             this.labelElement.classList.add("visible");
@@ -46,7 +49,9 @@ export default class BoolBoxView extends UINode {
         this.checkboxElement = UINode.make("input", {
             type: "checkbox",
             classes: ["bool-box-checkbox"],
-            oninput: (event: Event) => this.onInput((event.target as HTMLInputElement).checked),
+            onclick: (event: Event) => {
+                this.onInput((event.target as HTMLInputElement).checked);
+            },
         });
         return UINode.make("div", {
             classes: ["bool-box"],