From 89a20ca1af2ebd5101be1de731e0786e4094c23c Mon Sep 17 00:00:00 2001
From: Pieter Vander Vennet <pietervdvn@posteo.net>
Date: Fri, 13 Sep 2024 20:22:03 +0200
Subject: [PATCH] UX: improve padding to prevent fat-fingers

---
 .versionrc.json                                       | 7 +++++++
 src/UI/Popup/TagRendering/TagRenderingQuestion.svelte | 8 ++++----
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/.versionrc.json b/.versionrc.json
index 2b2d18d0f..d5091248b 100644
--- a/.versionrc.json
+++ b/.versionrc.json
@@ -3,6 +3,13 @@
       {"type": "feat", "section": "Features"},
       {"type": "fix", "section": "Bug Fixes"},
       {"type": "themes", "section": "Theme improvements"},
+      {"type": "UX",
+        "section": "User experience improvements"
+      },
+      {
+        "type": "UI",
+        "section": "User interface improvements"
+      },
       {"type": "chore", "hidden": true},
       {"type": "docs", "hidden": true},
       {"type": "style", "hidden": true},
diff --git a/src/UI/Popup/TagRendering/TagRenderingQuestion.svelte b/src/UI/Popup/TagRendering/TagRenderingQuestion.svelte
index c7ba6155a..4d87e56cb 100644
--- a/src/UI/Popup/TagRendering/TagRenderingQuestion.svelte
+++ b/src/UI/Popup/TagRendering/TagRenderingQuestion.svelte
@@ -343,7 +343,7 @@
 {#if question !== undefined}
   <div class={clss}>
     <form
-      class="relative flex flex-col overflow-y-auto px-2"
+      class="relative flex flex-col overflow-y-auto px-4"
       style="max-height: 75vh"
       on:submit|preventDefault={() => {
         /*onSave(); This submit is not needed and triggers too early, causing bugs: see #1808*/
@@ -351,7 +351,7 @@
     >
       <fieldset>
         <legend>
-          <div class="sticky top-0 justify-between pt-1 font-bold" style="z-index: 11">
+          <div class="sticky top-0 justify-between pt-4 pb-2 font-bold" style="z-index: 11">
             <SpecialTranslation t={question} {tags} {state} {layer} feature={selectedElement} />
           </div>
 
@@ -557,7 +557,7 @@
             {/if}
 
 
-            <div class="flex flex-wrap-reverse items-stretch justify-end sm:flex-nowrap self-end flex-grow">
+            <div class="flex flex-wrap-reverse items-stretch justify-end sm:flex-nowrap self-end flex-grow mt-4 mb-2">
 
               <!-- TagRenderingQuestion-buttons -->
               <slot name="cancel" />
@@ -590,7 +590,7 @@
               <TagHint {state} tags={selectedTags} currentProperties={$tags} />
               <span class="flex flex-wrap">
                 {#if $featureSwitchIsTesting}
-                  <div class="alert">Testmode &nbsp;</div>
+                  <div class="alert" style="padding: 0; margin: 0; margin-right:  0.5rem">Testmode &nbsp;</div>
                 {/if}
                 {#if $featureSwitchIsTesting || $featureSwitchIsDebugging}
                   <a class="small" on:click={() => console.log("Configuration is ", config)}>