From bec0597541f716a1c51b0ad3e4bece0964683ded Mon Sep 17 00:00:00 2001
From: Pieter Vander Vennet <pietervdvn@posteo.net>
Date: Wed, 10 Jan 2024 12:24:44 +0100
Subject: [PATCH] A11y: make sure the dialog is still usable with extreme zoom
 levels

---
 public/css/index-tailwind-output.css          | 27 ++++----
 .../BigComponents/SelectedElementTitle.svelte | 66 ++++++++++---------
 2 files changed, 47 insertions(+), 46 deletions(-)

diff --git a/public/css/index-tailwind-output.css b/public/css/index-tailwind-output.css
index 50cced769c..96988f98f9 100644
--- a/public/css/index-tailwind-output.css
+++ b/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));
diff --git a/src/UI/BigComponents/SelectedElementTitle.svelte b/src/UI/BigComponents/SelectedElementTitle.svelte
index c0015fb68e..5ed4690d84 100644
--- a/src/UI/BigComponents/SelectedElementTitle.svelte
+++ b/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,49 +25,51 @@
 {#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>
-        <a href={`#${$tags.id}`}>
-          <TagRenderingAnswer config={layer.title} {selectedElement} {state} {tags} {layer} />
-        </a>
-      </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>
+        </h3>
 
-      <div
-        class="no-weblate title-icons links-as-button mr-2 flex flex-row flex-wrap items-center gap-x-0.5 p-1 pt-0.5 sm:pt-1"
-      >
-        {#each layer.titleIcons as titleIconConfig}
-          {#if (titleIconConfig.condition?.matchesProperties($tags) ?? true) && (titleIconConfig.metacondition?.matchesProperties( { ...$metatags, ...$tags } ) ?? true) && titleIconConfig.IsKnown($tags)}
-            <div class={titleIconConfig.renderIconClass ?? "flex h-8 w-8 items-center"}>
-              <TagRenderingAnswer
-                config={titleIconConfig}
-                {tags}
-                {selectedElement}
-                {state}
-                {layer}
-                extraClasses="h-full justify-center"
-              />
-            </div>
-          {/if}
-        {/each}
+        <div
+          class="no-weblate title-icons links-as-button mr-2 flex flex-row flex-wrap items-center gap-x-0.5 p-1 pt-0.5 sm:pt-1"
+        >
+          {#each layer.titleIcons as titleIconConfig}
+            {#if (titleIconConfig.condition?.matchesProperties($tags) ?? true) && (titleIconConfig.metacondition?.matchesProperties({ ...$metatags, ...$tags }) ?? true) && titleIconConfig.IsKnown($tags)}
+              <div class={titleIconConfig.renderIconClass ?? "flex h-8 w-8 items-center"}>
+                <TagRenderingAnswer
+                  config={titleIconConfig}
+                  {tags}
+                  {selectedElement}
+                  {state}
+                  {layer}
+                  extraClasses="h-full justify-center"
+                />
+              </div>
+            {/if}
+          {/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}
 
 <style>
-  :global(.title-icons a) {
-    display: block !important;
-  }
+    :global(.title-icons a) {
+        display: block !important;
+    }
 </style>