From e1341b20c0ba0b23a0f2011e5688e6b07bc015e3 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Mon, 29 Jan 2024 16:01:15 +0100
Subject: [PATCH] fix(NcColorPicker): define a container prop

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 src/components/NcColorPicker/NcColorPicker.vue | 11 ++++++++++-
 src/components/NcEmojiPicker/NcEmojiPicker.vue |  1 +
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/components/NcColorPicker/NcColorPicker.vue b/src/components/NcColorPicker/NcColorPicker.vue
index 021d46c501..e773403870 100644
--- a/src/components/NcColorPicker/NcColorPicker.vue
+++ b/src/components/NcColorPicker/NcColorPicker.vue
@@ -161,6 +161,7 @@ export default {
 
 <template>
 	<NcPopover popup-role="dialog"
+		:container="container"
 		v-bind="$attrs"
 		v-on="$listeners"
 		@apply-hide="handleClose">
@@ -187,7 +188,7 @@ export default {
 							@click="pickColor(color)">
 					</label>
 				</div>
-				<Chrome v-if="advanced"
+				<Chrome v-else
 					v-model="currentColor"
 					class="color-picker__advanced"
 					:disable-alpha="true"
@@ -290,6 +291,14 @@ export default {
 				|| (typeof item === 'object' && item.color && HEX_REGEX.test(item.color)),
 			),
 		},
+
+		/**
+		 * Selector for the popover container
+		 */
+		container: {
+			type: [String, Object, Element, Boolean],
+			default: 'body',
+		},
 	},
 
 	emits: [
diff --git a/src/components/NcEmojiPicker/NcEmojiPicker.vue b/src/components/NcEmojiPicker/NcEmojiPicker.vue
index adaf849c85..4970bea686 100644
--- a/src/components/NcEmojiPicker/NcEmojiPicker.vue
+++ b/src/components/NcEmojiPicker/NcEmojiPicker.vue
@@ -166,6 +166,7 @@ This component allows the user to pick an emoji.
 						@trailing-button-click="clearSearch(); slotProps.onSearch(search);"
 						@update:value="slotProps.onSearch(search)" />
 					<NcColorPicker palette-only
+						:container="container"
 						:palette="skinTonePalette"
 						:value="currentColor.color"
 						@update:value="onChangeSkinTone">