A11y: make sure the dialog is still usable with extreme zoom levels

public/css/index-tailwind-output.css

@@ -1071,14 +1071,14 @@ video {
   height: 6rem;
 }
 
-.h-screen {
-  height: 100vh;
-}
-
 .h-full {
   height: 100%;
 }
 
+.h-screen {
+  height: 100vh;
+}
+
 .h-32 {
   height: 8rem;
 }
@@ -1285,6 +1285,10 @@ video {
   flex-shrink: 1;
 }
 
+.flex-grow {
+  flex-grow: 1;
+}
+
 .grow {
   flex-grow: 1;
 }
@@ -1931,11 +1935,6 @@ video {
   line-height: 1.75rem;
 }
 
-.text-5xl {
-  font-size: 3rem;
-  line-height: 1;
-}
-
 .text-sm {
   font-size: 0.875rem;
   line-height: 1.25rem;
@@ -1956,6 +1955,11 @@ video {
   line-height: 2.5rem;
 }
 
+.text-5xl {
+  font-size: 3rem;
+  line-height: 1;
+}
+
 .font-extrabold {
   font-weight: 800;
 }
@@ -2039,11 +2043,6 @@ video {
   letter-spacing: -0.025em;
 }
 
-.text-red-500 {
-  --tw-text-opacity: 1;
-  color: rgb(239 68 68 / var(--tw-text-opacity));
-}
-
 .text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));

src/UI/BigComponents/SelectedElementTitle.svelte

@@ -13,7 +13,7 @@
   export let layer: LayerConfig
   export let selectedElement: Feature
   let tags: UIEventSource<Record<string, string>> = state.featureProperties.getStore(
-    selectedElement.properties.id
+    selectedElement.properties.id,
   )
   $: {
     tags = state.featureProperties.getStore(selectedElement.properties.id)
@@ -25,12 +25,11 @@
 {#if $tags._deleted === "yes"}
   <Tr t={Translations.t.delete.isDeleted} />
 {:else}
-  <div
-    class="low-interaction flex items-center justify-between border-b-2 border-black px-3 drop-shadow-md"
-  >
-    <div class="flex flex-col">
-      <!-- Title element-->
-      <h3>
+  <div class="low-interaction border-b-2 border-black px-3 drop-shadow-md flex">
+    <div class="h-fit overflow-auto w-full sm:p-2" style="max-height: 20vh;">
+      <div class="flex flex-col flex-grow w-full h-full ">
+        <!-- Title element and  title icons-->
+        <h3 class="m-0">
           <a href={`#${$tags.id}`}>
             <TagRenderingAnswer config={layer.title} {selectedElement} {state} {tags} {layer} />
           </a>
@@ -55,14 +54,17 @@
           {/each}
         </div>
       </div>
+    </div>
 
     <button
       on:click={() => state.selectedElement.setData(undefined)}
       use:ariaLabel={Translations.t.general.backToMap}
-      class="rounded-full border-none p-0"
+      class="rounded-full border-none p-0 shrink-0 h-fit mt-2"
+      style="border: 0 !important; padding: 0 !important;"
     >
       <XCircleIcon aria-hidden={true} class="h-8 w-8" />
     </button>
+
   </div>
 {/if}