From 567baef6b978fe050d6b16c1903c97106196d16f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Raimund=20Schl=C3=BC=C3=9Fler?=
 <raimund.schluessler@mailbox.org>
Date: Thu, 27 Apr 2023 10:40:23 +0200
Subject: [PATCH 1/2] Properly style timezone select in NcDatetimePicker
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Raimund Schlüßler <raimund.schluessler@mailbox.org>
---
 .../NcDatetimePicker/NcDatetimePicker.vue     | 44 ++++++++++++++++++-
 1 file changed, 43 insertions(+), 1 deletion(-)

diff --git a/src/components/NcDatetimePicker/NcDatetimePicker.vue b/src/components/NcDatetimePicker/NcDatetimePicker.vue
index 83ffe8f714..fd15630c9e 100644
--- a/src/components/NcDatetimePicker/NcDatetimePicker.vue
+++ b/src/components/NcDatetimePicker/NcDatetimePicker.vue
@@ -143,7 +143,7 @@ export default {
 		<template #icon-calendar>
 			<NcPopover v-if="showTimezoneSelect"
 				:shown.sync="showTimezonePopover"
-				open-class="timezone-popover-wrapper">
+				popover-base-class="timezone-select__popper">
 				<template #trigger>
 					<button class="datetime-picker-inline-icon"
 						:class="{'datetime-picker-inline-icon--highlighted': highlightTimezone}"
@@ -418,3 +418,45 @@ export default {
 	}
 }
 </style>
+
+<style lang="scss">
+// We overwrite the popover base class, so we can style
+// the popover for the timezone select only.
+.v-popper--theme-dropdown.v-popper__popper.timezone-select__popper .v-popper__wrapper {
+	border-radius: var(--border-radius-large);
+
+	.v-popper__inner {
+		padding: 4px;
+		border-radius: var(--border-radius-large);
+
+		.timezone-popover-wrapper {
+			&__title {
+				padding: 4px 0;
+			}
+
+			// We overwrite the border radius of the input to account for the popover border-radius minus the padding
+			&__timezone-select.v-select {
+				.vs__dropdown-toggle {
+					border-radius: calc(var(--border-radius-large) - 4px);
+				}
+
+				&.vs--open {
+					.vs__dropdown-toggle {
+						border-bottom-left-radius: 0;
+						border-bottom-right-radius: 0;
+					}
+					&.select--drop-up .vs__dropdown-toggle {
+						border-radius: 0 0 calc(var(--border-radius-large) - 4px) calc(var(--border-radius-large) - 4px);
+					}
+				}
+			}
+		}
+	}
+}
+
+// TODO: This should be scoped or targeted by a specific selector, but the NcSelect component does not allow this yet.
+.vs__dropdown-menu--floating {
+	// Higher z-index than the popover in which the NcSelect is located.
+	z-index: 100001;
+}
+</style>

From 65dd418086cf807ba8cd55bce6b5474a77ae3c79 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Raimund=20Schl=C3=BC=C3=9Fler?=
 <raimund.schluessler@mailbox.org>
Date: Thu, 27 Apr 2023 14:09:58 +0200
Subject: [PATCH 2/2] Left-align title text with NcSelect text in timezone
 picker
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Raimund Schlüßler <raimund.schluessler@mailbox.org>
---
 src/components/NcDatetimePicker/NcDatetimePicker.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/NcDatetimePicker/NcDatetimePicker.vue b/src/components/NcDatetimePicker/NcDatetimePicker.vue
index fd15630c9e..712e36251e 100644
--- a/src/components/NcDatetimePicker/NcDatetimePicker.vue
+++ b/src/components/NcDatetimePicker/NcDatetimePicker.vue
@@ -432,6 +432,7 @@ export default {
 		.timezone-popover-wrapper {
 			&__title {
 				padding: 4px 0;
+				padding-left: 14px; // Left-align with NcSelect text
 			}
 
 			// We overwrite the border radius of the input to account for the popover border-radius minus the padding