From 44b919fec00e84614f6fe50ef0d5027ff2aebc65 Mon Sep 17 00:00:00 2001
From: Pieter Vander Vennet <pietervdvn@posteo.net>
Date: Thu, 8 Jun 2023 00:21:22 +0200
Subject: [PATCH] UX: fix #1445

---
 UI/Popup/AddNewPoint/AddNewPoint.svelte |  4 +-
 UI/Popup/AddNewPoint/PresetList.svelte  |  2 +-
 public/css/index-tailwind-output.css    | 88 ++++++++++++-------------
 3 files changed, 45 insertions(+), 49 deletions(-)

diff --git a/UI/Popup/AddNewPoint/AddNewPoint.svelte b/UI/Popup/AddNewPoint/AddNewPoint.svelte
index f1043c4be..7b2fd7bee 100644
--- a/UI/Popup/AddNewPoint/AddNewPoint.svelte
+++ b/UI/Popup/AddNewPoint/AddNewPoint.svelte
@@ -207,7 +207,7 @@
 
     {:else if !confirmedCategory  }
         <!-- Second, confirm the category -->
-        <h2>
+        <h2 class="mr-12">
             <Tr t={Translations.t.general.add.confirmTitle.Subs({title: selectedPreset.preset.title})}/>
         </h2>
 
@@ -253,7 +253,7 @@
         </div>
 
     {:else if _globalFilter?.length > 0 && _globalFilter?.length > checkedOfGlobalFilters}
-        <Tr t={_globalFilter[checkedOfGlobalFilters].onNewPoint?.safetyCheck}/>
+        <Tr t={_globalFilter[checkedOfGlobalFilters].onNewPoint?.safetyCheck} cls="mx-12"/>
         <SubtleButton on:click={() => {checkedOfGlobalFilters = checkedOfGlobalFilters + 1}}>
             <img slot="image" src={_globalFilter[checkedOfGlobalFilters].onNewPoint?.icon ?? "./assets/svg/confirm.svg"}
                  class="w-12 h-12">
diff --git a/UI/Popup/AddNewPoint/PresetList.svelte b/UI/Popup/AddNewPoint/PresetList.svelte
index 6b44d5a7e..ce99af094 100644
--- a/UI/Popup/AddNewPoint/PresetList.svelte
+++ b/UI/Popup/AddNewPoint/PresetList.svelte
@@ -71,7 +71,7 @@
 </script>
 
 <div class="flex flex-col w-full">
-    <h2>
+    <h2 class="mr-12"> <!-- The title gets a big right margin to give place to the 'close'-button, see https://github.com/pietervdvn/MapComplete/issues/1445 -->
         <Tr t={Translations.t.general.add.intro}/>
     </h2>
     
diff --git a/public/css/index-tailwind-output.css b/public/css/index-tailwind-output.css
index 974249f39..d155cc2a1 100644
--- a/public/css/index-tailwind-output.css
+++ b/public/css/index-tailwind-output.css
@@ -763,10 +763,6 @@ video {
   margin: 1.25rem;
 }
 
-.m-3 {
-  margin: 0.75rem;
-}
-
 .m-2 {
   margin: 0.5rem;
 }
@@ -787,6 +783,10 @@ video {
   margin: 1rem;
 }
 
+.m-3 {
+  margin: 0.75rem;
+}
+
 .m-6 {
   margin: 1.5rem;
 }
@@ -795,6 +795,10 @@ video {
   margin: 1px;
 }
 
+.m-12 {
+  margin: 3rem;
+}
+
 .mx-1 {
   margin-left: 0.25rem;
   margin-right: 0.25rem;
@@ -825,6 +829,11 @@ video {
   margin-right: 1rem;
 }
 
+.mx-12 {
+  margin-left: 3rem;
+  margin-right: 3rem;
+}
+
 .mr-2 {
   margin-right: 0.5rem;
 }
@@ -837,10 +846,6 @@ video {
   margin-right: 1.5rem;
 }
 
-.mt-4 {
-  margin-top: 1rem;
-}
-
 .mt-6 {
   margin-top: 1.5rem;
 }
@@ -885,6 +890,10 @@ video {
   margin-top: 0.5rem;
 }
 
+.mt-4 {
+  margin-top: 1rem;
+}
+
 .mb-2 {
   margin-bottom: 0.5rem;
 }
@@ -933,6 +942,10 @@ video {
   margin-right: 0.75rem;
 }
 
+.mr-12 {
+  margin-right: 3rem;
+}
+
 .box-border {
   box-sizing: border-box;
 }
@@ -997,14 +1010,14 @@ video {
   height: 4rem;
 }
 
-.h-12 {
-  height: 3rem;
-}
-
 .h-6 {
   height: 1.5rem;
 }
 
+.h-12 {
+  height: 3rem;
+}
+
 .h-fit {
   height: -webkit-fit-content;
   height: -moz-fit-content;
@@ -1087,14 +1100,14 @@ video {
   width: 4rem;
 }
 
-.w-12 {
-  width: 3rem;
-}
-
 .w-6 {
   width: 1.5rem;
 }
 
+.w-12 {
+  width: 3rem;
+}
+
 .w-screen {
   width: 100vw;
 }
@@ -1400,14 +1413,14 @@ video {
   border-radius: 1rem;
 }
 
-.rounded-lg {
-  border-radius: 0.5rem;
-}
-
 .rounded-md {
   border-radius: 0.375rem;
 }
 
+.rounded-lg {
+  border-radius: 0.5rem;
+}
+
 .rounded-sm {
   border-radius: 0.125rem;
 }
@@ -1429,10 +1442,6 @@ video {
   border-width: 2px;
 }
 
-.border-l-4 {
-  border-left-width: 4px;
-}
-
 .border-b {
   border-bottom-width: 1px;
 }
@@ -1464,11 +1473,6 @@ video {
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
 }
 
-.border-red-300 {
-  --tw-border-opacity: 1;
-  border-color: rgb(252 165 165 / var(--tw-border-opacity));
-}
-
 .border-gray-400 {
   --tw-border-opacity: 1;
   border-color: rgb(156 163 175 / var(--tw-border-opacity));
@@ -1562,14 +1566,6 @@ video {
   padding-right: 0.5rem;
 }
 
-.pb-12 {
-  padding-bottom: 3rem;
-}
-
-.pl-4 {
-  padding-left: 1rem;
-}
-
 .pl-1 {
   padding-left: 0.25rem;
 }
@@ -1606,6 +1602,10 @@ video {
   padding-right: 0.75rem;
 }
 
+.pl-4 {
+  padding-left: 1rem;
+}
+
 .pl-3 {
   padding-left: 0.75rem;
 }
@@ -1639,11 +1639,6 @@ video {
   line-height: 1.75rem;
 }
 
-.text-2xl {
-  font-size: 1.5rem;
-  line-height: 2rem;
-}
-
 .text-lg {
   font-size: 1.125rem;
   line-height: 1.75rem;
@@ -1664,6 +1659,11 @@ video {
   line-height: 2.25rem;
 }
 
+.text-2xl {
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
+
 .text-base {
   font-size: 1rem;
   line-height: 1.5rem;
@@ -2636,10 +2636,6 @@ a.link-underline {
     margin-left: 10rem;
   }
 
-  .lg\:ml-10 {
-    margin-left: 2.5rem;
-  }
-
   .lg\:w-3\/4 {
     width: 75%;
   }