UI: fix icon alignment

public/css/tagrendering.css

@@ -40,6 +40,8 @@
 .mapping-icon-small {
     /* A mapping icon type */
     width: 1.5rem;
+    height: fit-content;
+
     max-height: 1.5rem;
     margin-right: 0.5rem;
 }
@@ -47,19 +49,19 @@
 .mapping-icon-medium {
     /* A mapping icon type */
     width: 3rem;
+    height: fit-content;
     max-height: 3rem;
-    margin-right: 1rem;
-    margin-left: 0.5rem;
+    margin-right: 1rem
 }
 
 .mapping-icon-large {
     /* A mapping icon type */
     width: 6rem;
+    height: fit-content;
     max-height: 5rem;
     margin-top: 0.5rem;
     margin-bottom: 0.5rem;
     margin-right: 1.5rem;
-    margin-left: 0.5rem;
 }
 
 

src/UI/Map/Marker.svelte

@@ -40,7 +40,7 @@
 {#if iconsParsed !== undefined && iconsParsed.length > 0}
   <div class={twMerge("relative", size)}>
     {#each iconsParsed as icon}
-      <div class="absolute top-0 left-0 h-full w-full">
+      <div class="absolute top-0 left-0 h-full w-full flex items-center">
         <Icon icon={icon.icon} color={icon.color} {clss} />
       </div>
     {/each}

src/UI/Popup/TagRendering/TagRenderingMapping.svelte

@@ -6,7 +6,6 @@
   import { UIEventSource } from "../../../Logic/UIEventSource"
   import LayerConfig from "../../../Models/ThemeConfig/LayerConfig"
   import { twJoin } from "tailwind-merge"
-  import Icon from "../../Map/Icon.svelte"
   import Marker from "../../Map/Marker.svelte"
 
   export let selectedElement: Feature