Fix question styling (but break click action)

This fixes the styling but breaks the click action. Clicking on the text itself also triggers the action, clicking on the blank sapce next to it changes the label but does not trigger the action.

Generally speaking the style is easier to apply to an element that wraps the in put and the label-text. This could be the label-tag or a different wrapper.

UI/Input/RadioButton.ts

@@ -74,11 +74,11 @@ export class RadioButton<T> extends InputElement<T> {
         for (let i = 0; i < this._elements.length; i++){
             const el = this._elements[i];
             const htmlElement =
+                `<label for="${this.IdFor(i)}" class="question-option-with-border">` +
                     `<input type="radio" id="${this.IdFor(i)}" name="radiogroup-${this.id}">` +
-                `<label for="${this.IdFor(i)}">${el.Render()}</label>` +
-                `<br>`;
+                    el.Render() +
+                `</label>`;
             body += htmlElement;
-
         }
 
         return `<form id='${this.id}-form'>${body}</form>`;

UI/Popup/TagRenderingQuestion.ts

@@ -102,9 +102,6 @@ export default class TagRenderingQuestion extends UIElement {
             return ff;
         }
 
-        mappings = Utils.NoNull([...mappings, ff]);
-        mappings.forEach(el => el.SetClass("question-option-with-border"))
-
         if (this._configuration.multiAnswer) {
             return this.GenerateMultiAnswer(mappings, ff)
         } else {

css/tagrendering.css

@@ -94,13 +94,11 @@
 .question-option-with-border {
     border: 2px solid lightgray;
     border-radius: 0.5em;
-    display: inline-block;
+    display: block;
     width: 100%;
-    margin: 0;
-    margin-left: -2em;
+    margin: 5px ​0;
     box-sizing: border-box;
     padding: 0.5em;
-    padding-left: 2em;
 }
 
 input:checked + label .question-option-with-border {