From 66d455a475d477fb1bca876ddc1394c1dcb19769 Mon Sep 17 00:00:00 2001
From: Pieter Vander Vennet <pietervdvn@posteo.net>
Date: Sat, 7 Jun 2025 14:37:50 +0200
Subject: [PATCH] UX: move confirm for OH button below popup, fix Z-index

---
 src/UI/BigComponents/WelcomeBack.svelte             |  5 ++---
 .../InputElement/Helpers/OpeningHoursInput.svelte   | 13 ++++++++-----
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/UI/BigComponents/WelcomeBack.svelte b/src/UI/BigComponents/WelcomeBack.svelte
index 5d484dadfe..8373c3359b 100644
--- a/src/UI/BigComponents/WelcomeBack.svelte
+++ b/src/UI/BigComponents/WelcomeBack.svelte
@@ -1,8 +1,7 @@
 <script lang="ts">
 
-  import { Avatar, Popover } from "flowbite-svelte"
+  import { Popover } from "flowbite-svelte"
   import { fade } from "svelte/transition"
-  import Tr from "../Base/Tr.svelte"
   import { OsmConnection } from "../../Logic/Osm/OsmConnection"
 
   let open = false
@@ -20,7 +19,7 @@
 </script>
 
 
-<Popover class="mt-4" defaultClass="py-2 px-3 w-fit " trigger=null placement="bottom"
+<Popover class="mt-4 z-50" defaultClass="py-2 px-3 w-fit " trigger=null placement="bottom"
          transition={e => fade(e, {duration: 150})} bind:open>
   {#if $userdetails !== undefined}
     <div style="width: max-content" class="flex items-center">
diff --git a/src/UI/InputElement/Helpers/OpeningHoursInput.svelte b/src/UI/InputElement/Helpers/OpeningHoursInput.svelte
index 39f0dd7d71..960dd96dbf 100644
--- a/src/UI/InputElement/Helpers/OpeningHoursInput.svelte
+++ b/src/UI/InputElement/Helpers/OpeningHoursInput.svelte
@@ -7,6 +7,8 @@
   import OHTable from "./OpeningHours/OHTable.svelte"
   import OpeningHoursState from "../../OpeningHours/OpeningHoursState"
   import Popup from "../../Base/Popup.svelte"
+  import Tr from "../../Base/Tr.svelte"
+  import Translations from "../../i18n/Translations"
   import Check from "@babeard/svelte-heroicons/mini/Check"
 
   export let value: UIEventSource<string>
@@ -29,17 +31,18 @@
 
   const state = new OpeningHoursState(value, prefix, postfix)
   let expanded = new UIEventSource(false)
+
 </script>
 
 <Popup bodyPadding="p-0" shown={expanded}>
   <OHTable value={state.normalOhs} />
-  <button
-    on:click={() => expanded.set(false)}
-    class="primary pointer-events-auto absolute bottom-0 left-0 h-8 w-10 rounded-full"
-  >
+  <div class="absolute w-full flex justify-center" style="bottom: -3rem">
+  <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>
 </Popup>
-<button on:click={() => expanded.set(true)}>Pick opening hours</button>
 
+<button on:click={() => expanded.set(true)}>Pick opening hours</button>
 <PublicHolidaySelector value={state.phSelectorValue} />