From e849c017eb53a9da108230b3ffd05b8669476833 Mon Sep 17 00:00:00 2001
From: Pieter Vander Vennet <pietervdvn@posteo.net>
Date: Sun, 3 Aug 2025 15:03:17 +0200
Subject: [PATCH] UX: add close buttons to OH picker (fix #2482), fix crash

---
 public/css/index-tailwind-output.css               |  4 ++++
 src/UI/BigComponents/SelectedElementTitle.svelte   |  2 +-
 .../InputElement/Helpers/OpeningHoursInput.svelte  | 14 ++++++++++++++
 3 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/public/css/index-tailwind-output.css b/public/css/index-tailwind-output.css
index 568e96a58..2376929bc 100644
--- a/public/css/index-tailwind-output.css
+++ b/public/css/index-tailwind-output.css
@@ -1351,6 +1351,10 @@ input[type="range"].range-lg::-moz-range-thumb {
   float: left;
 }
 
+.-m-4 {
+  margin: -1rem;
+}
+
 .m-0 {
   margin: 0px;
 }
diff --git a/src/UI/BigComponents/SelectedElementTitle.svelte b/src/UI/BigComponents/SelectedElementTitle.svelte
index 6be8e62ca..e26c721a7 100644
--- a/src/UI/BigComponents/SelectedElementTitle.svelte
+++ b/src/UI/BigComponents/SelectedElementTitle.svelte
@@ -34,7 +34,7 @@
       <div class="flex h-full w-full flex-grow flex-col">
         <!-- Title element and  title icons-->
         <h3 class="m-0">
-          <a href={`#${$tags.id}`}>
+          <a href={`#${$tags?.id}`}>
             {#if layer.title}
               <TagRenderingAnswer config={layer.title} {selectedElement} {state} {tags} {layer} />
             {/if}
diff --git a/src/UI/InputElement/Helpers/OpeningHoursInput.svelte b/src/UI/InputElement/Helpers/OpeningHoursInput.svelte
index dce268402..523d3cb88 100644
--- a/src/UI/InputElement/Helpers/OpeningHoursInput.svelte
+++ b/src/UI/InputElement/Helpers/OpeningHoursInput.svelte
@@ -10,6 +10,9 @@
   import Tr from "../../Base/Tr.svelte"
   import Translations from "../../i18n/Translations"
   import Check from "@babeard/svelte-heroicons/mini/Check"
+  import { CloseButton } from "flowbite-svelte"
+  import Cross from "../../../assets/svg/Cross.svelte"
+  import XMark from "@babeard/svelte-heroicons/mini/XMark"
 
   export let value: UIEventSource<string>
   export let args: string
@@ -31,16 +34,27 @@
 
   const state = new OpeningHoursState(value, prefix, postfix)
   let expanded = new UIEventSource(false)
+
+  function abort(){
+    expanded.set(false)
+  }
 </script>
 
 <Popup bodyPadding="p-0" shown={expanded}>
   <OHTable value={state.normalOhs} />
   <div class="absolute flex w-full justify-center" style="bottom: -3rem">
+    <button on:click={() => abort()}>
+      <XMark class="m-0 h-6 w-6"/>
+      <Tr t={Translations.t.general.cancel} />
+    </button>
     <button class=" primary" on:click={() => expanded.set(false)}>
       <Check class="m-0 h-6 w-6 shrink-0 p-0" color="white" />
       <Tr t={Translations.t.general.confirm} />
     </button>
+
   </div>
+    <CloseButton class="absolute top-0 right-0 z-10" style="margin-top: -1.0rem" on:click={() => abort()} />
+
 </Popup>
 
 <button on:click={() => expanded.set(true)}>Pick opening hours</button>