Derping around, bit of a dead end due to transform3d in a parent

UI/Popup/EditableTagRendering.ts

@@ -64,7 +64,7 @@ export default class EditableTagRendering extends UIElement {
 
         return new Combine([this._answer,
             (State.state?.osmConnection?.userDetails?.data?.loggedIn ?? true) ? this._editButton : undefined
-        ]).SetClass("answer")
+        ]).SetClass("flex w-full break-word justify-between text-default landscape:w-1/2 landscape:p-2 pb-2 border-b border-gray-300 mb-2")
             .Render();
     }
 

UI/Popup/FeatureInfoBox.ts

@@ -13,7 +13,7 @@ export default class FeatureInfoBox extends UIElement {
     private _component: UIElement;
 
     public title: UIElement ;
-    
+
     constructor(
         tags: UIEventSource<any>,
         layerConfig: LayerConfig,
@@ -26,11 +26,12 @@ export default class FeatureInfoBox extends UIElement {
 
 
         const title = new TagRenderingAnswer(tags, layerConfig.title ?? new TagRenderingConfig("POI", undefined))
-            .SetClass("featureinfobox-title");
+            .AddClass("text-2xl break-words font-bold p-2");
         this.title = title;
         const titleIcons = new Combine(
-            layerConfig.titleIcons.map(icon => new TagRenderingAnswer(tags, icon)))
-            .SetClass("featureinfobox-icons");
+            layerConfig.titleIcons.map(icon => new TagRenderingAnswer(tags, icon)
+                .AddClass("block w-8 h-8 align-baseline box-content p-0.5")))
+            .AddClass("flex flex-row flex-wrap pt-1 items-center mr-2");
 
         let questionBox: UIElement = undefined;
         if (State.state.featureSwitchUserbadge.data) {
@@ -58,7 +59,7 @@ export default class FeatureInfoBox extends UIElement {
             ]
         )
         const titleBar = new Combine([
-            new Combine([title, titleIcons]).SetClass("featureinfobox-titlebar-title")
+            new Combine([title, titleIcons]).SetClass("flex flex-grow justify-between")
         ])
 
         this._component = new ScrollableFullScreen(titleBar, content, onClose)

UI/Popup/QuestionBox.ts

@@ -40,7 +40,6 @@ export default class QuestionBox extends UIElement {
                     })
             ));
 
-
         this._skippedQuestionsButton = Translations.t.general.skippedQuestions.Clone()
             .onClick(() => {
                 self._skippedQuestions.setData([]);
@@ -64,19 +63,19 @@ export default class QuestionBox extends UIElement {
                 }
             }
         }
-        
+
         if (tagRendering.GetRenderValue(this._tags.data) !== undefined) {
             // This value is known and can be rendered
             return true;
         }
-        
+
         return false;
     }
 
     InnerRender(): string {
         for (let i = 0; i < this._tagRenderingQuestions.length; i++) {
             let tagRendering = this._tagRenderings[i];
-      
+
             if(this.IsKnown(tagRendering)){
                 continue;
             }

UI/Popup/TagRenderingAnswer.ts

@@ -21,6 +21,7 @@ export default class TagRenderingAnswer extends UIElement {
         if (configuration === undefined) {
             throw "Trying to generate a tagRenderingAnswer without configuration..."
         }
+        this.AddClass("flex items-center flex-row text-lg")
     }
 
     InnerRender(): string {
@@ -34,11 +35,6 @@ export default class TagRenderingAnswer extends UIElement {
         if (tags === undefined) {
             return "";
         }
-        const tr = this._configuration.GetRenderValue(tags);
-        if (tr !== undefined) {
-            this._content = new SubstitutedTranslation(tr, this._tags);
-            return this._content.Render();
-        }
 
         // The render value doesn't work well with multi-answers (checkboxes), so we have to check for them manually
         if (this._configuration.multiAnswer) {
@@ -65,6 +61,14 @@ export default class TagRenderingAnswer extends UIElement {
                 return this._content.Render();
             }
         }
+        
+        const tr = this._configuration.GetRenderValue(tags);
+        if (tr !== undefined) {
+            this._content = new SubstitutedTranslation(tr, this._tags);
+            return this._content.Render();
+        }
+
+       
         return "";
 
     }

UI/Popup/TagRenderingQuestion.ts

@@ -78,7 +78,6 @@ export default class TagRenderingQuestion extends UIElement {
                     if (csCount < Constants.userJourney.tagsVisibleAt) {
                         return "";
                     }
-
                     if (tags === undefined) {
                         return Translations.t.general.noTagsSelected.SetClass("subtle").Render();
                     }
@@ -89,8 +88,7 @@ export default class TagRenderingQuestion extends UIElement {
                     return tags.asHumanString(true, true);
                 }
             )
-        )
-
+        ).AddClass("block")
     }
 
     private GenerateInputElement(): InputElement<TagsFilter> {
@@ -104,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 {
@@ -268,16 +263,16 @@ export default class TagRenderingQuestion extends UIElement {
 
     }
 
-
     InnerRender(): string {
         return new Combine([
             this._question,
-            this._inputElement, "<br/>",
+            this._inputElement,
             this._cancelButton,
-            this._saveButton, "<br/>",
-            this._appliedTags])
-            .SetClass("question")
-            .Render()
+            this._saveButton,
+            this._appliedTags]
+        )
+        .SetClass("question")
+        .Render()
     }
 
 }