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

UI/Base/Combine.ts

@@ -25,7 +25,11 @@ export default class Combine extends UIElement {
                 console.error("Not a UI-element", ui);
                 return "";
             }
-            return ui.Render();
+            let rendered = ui.Render();
+            if(ui.IsEmpty()){
+                return "";
+            }
+            return rendered;
         }).join("");
     }
 

UI/Base/FixedUiElement.ts

@@ -12,5 +12,4 @@ export class FixedUiElement extends UIElement {
         return this._html;
     }
 
-
 }

UI/Base/Img.ts

@@ -4,16 +4,16 @@ import {Utils} from "../../Utils";
 export default class Img {
 
     public static runningFromConsole = false;
-    
+
    static AsData(source:string){
        if(Utils.runningFromConsole){
            return source;
        }
        return `data:image/svg+xml;base64,${(btoa(source))}`;
    }
-    
-    static AsImageElement(source: string): string{
-        return `<img src="${Img.AsData(source)}">`;
+
+    static AsImageElement(source: string, css_class: string = ""): string{
+        return `<img class="${css_class}" alt="" src="${Img.AsData(source)}">`;
     }
 }
 

UI/Base/ScrollableFullScreen.ts

@@ -8,28 +8,30 @@ import Ornament from "./Ornament";
  * Wraps some contents into a panel that scrolls the content _under_ the title
  */
 export default class ScrollableFullScreen extends UIElement {
-    private _component: Combine;
+    private _component: UIElement;
 
 
     constructor(title: UIElement, content: UIElement, onClose: (() => void)) {
         super();
         const returnToTheMap = Svg.back_svg().onClick(() => {
             onClose();
-        }).SetClass("sm:hidden")
-            .SetClass("featureinfobox-back-to-the-map")
-        title.SetStyle("width: 100%; display: block;")
-        const ornament = new Combine([new Ornament().SetStyle("height:5em;")])
-            .SetClass("block sm:hidden")
+        })  .SetClass("block sm:hidden mb-2 bg-blue-50 rounded-full w-12 h-12 p-1.5")
 
-        this._component = new Combine([
+        title.SetClass("block w-full")
+        const ornament = new Combine([new Ornament().SetStyle("height:5em;")])
+            .SetClass("block sm:hidden h-5")
+
+        
+       this._component = new Combine([
             new Combine([returnToTheMap, title])
-                .SetClass("text-xl break-words"),
-            new Combine([content, ornament])
-                
-        ])
-        this.SetClass("fixed h-screen w-screen fixed sm:relative");
+                .AddClass("border-b-2 border-black shadow sm:shadow-none z-50 bg-white p-2 pb-0 sm:p-0 flex overflow-x-hidden flex-shrink-0 max-h-20vh"),
+            new Combine(["<span>", content, "</span>", ornament])
+                .SetClass("block p-2 sm:pt-4 w-full max-h-screen landscape:max-h-screen overflow-y-auto overflow-x-hidden"),
+            // We add an ornament which takes around 5em. This is in order to make sure the Web UI doesn't hide
+        ]).SetClass("block flex flex-col fixed max-h-screen sm:max-h-65vh sm:relative top-0 left-0 right-0");
 
     }
+    
 
     InnerRender(): string {
         return this._component.Render();

UI/Base/SubtleButton.ts

@@ -14,20 +14,25 @@ export class SubtleButton extends UIElement{
         this.linkTo = linkTo;
         this.message = Translations.W(message);
         if(this.message !== null){
-        this.message.dumbMode = false;
+            this.message.dumbMode = false;
         }
+        let img;
         if ((imageUrl ?? "") === "") {
-            this.image = new FixedUiElement("");
+            img = new FixedUiElement("");
         } else if (typeof (imageUrl) === "string") {
-            this.image = new FixedUiElement(`<img style="height:3em" src="${imageUrl}">`);
+            img = new FixedUiElement(`<img style="width: 100%;" src="${imageUrl}" alt="">`);
         } else {
-            this.image = imageUrl;
+            img = imageUrl;
         }
-
+        img.AddClass("block flex items-center justify-center h-11 w-11 flex-shrink0")
+        this.image = new Combine([img])
+            .AddClass("flex-shrink-0");
+        
+       
     }
 
     InnerRender(): string {
-        
+
         if(this.message !== null && this.message.IsEmpty()){
             // Message == null: special case to force empty text
             return "";
@@ -35,19 +40,21 @@ export class SubtleButton extends UIElement{
 
         if(this.linkTo != undefined){
             return new Combine([
-                `<a class="subtle-button" href="${this.linkTo.url}" ${this.linkTo.newTab ? 'target="_blank"' : ""}>`,
+                `<a class='block flex group p-3 my-2 bg-blue-100 rounded-lg hover:shadow-xl hover:bg-blue-200' href="${this.linkTo.url}" ${this.linkTo.newTab ? 'target="_blank"' : ""}>`,
                 this.image,
+                `<div class='ml-4'>`,
                 this.message,
-                '</a>'
+                `</div>`,
+                `</a>`
             ]).Render();
         }
-        
+
+        // Styling todo
         return new Combine([
-            '<span class="subtle-button">',
             this.image,
             this.message,
-            '</span>'
-        ]).Render();
+        ]).AddClass("block flex p-3 my-2 bg-blue-100 rounded-lg hover:shadow-xl hover:bg-blue-200")
+            .Render();
     }