Merge pull request #11637 from nextcloud/fix/11602/show-color-picker-…

…popover

fix(ConversationAvatarEditor): show color picker popover

src/components/ConversationSettings/ConversationAvatarEditor.vue

@@ -44,16 +44,15 @@
 				<div class="avatar__buttons">
 					<!-- Set emoji as avatar -->
 					<template v-if="!showCropper">
-						<NcEmojiPicker :per-line="5"
-							@select="setEmoji">
+						<NcEmojiPicker :per-line="5" :container="container" @select="setEmoji">
 							<NcButton :title="t('spreed', 'Set emoji as conversation picture')"
 								:aria-label="t('spreed', 'Set emoji as conversation picture')">
 								<template #icon>
 									<EmoticonOutline :size="20" />
 								</template>
 							</NcButton>
 						</NcEmojiPicker>
-						<NcColorPicker v-if="emojiAvatar" v-model="backgroundColor">
+						<NcColorPicker v-if="emojiAvatar" v-model="backgroundColor" :container="container">
 							<NcButton :title="t('spreed', 'Set background color for conversation picture')"
 								:aria-label="t('spreed', 'Set background color for conversation picture')">
 								<template #icon>
@@ -212,6 +211,10 @@ export default {
 	},
 
 	computed: {
+		container() {
+			return this.$store.getters.getMainContainerSelector()
+		},
+
 		inputId() {
 			return `account-property-${this.conversation.displayName}`
 		},