From a41f0cd9fdcae2f4a63a1289885c55125fb769bf Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Tue, 26 Mar 2024 19:09:08 +0100
Subject: [PATCH] fix(FilePicker): provide correct container for FilePicker

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 .../ConversationAvatarEditor.vue              | 10 +++-------
 .../MediaSettings/MediaSettings.vue           |  3 +--
 .../MediaSettings/VideoBackgroundEditor.vue   |  6 +-----
 .../SettingsDialog/SettingsDialog.vue         | 19 +++++++++----------
 4 files changed, 14 insertions(+), 24 deletions(-)

diff --git a/src/components/ConversationSettings/ConversationAvatarEditor.vue b/src/components/ConversationSettings/ConversationAvatarEditor.vue
index a493b4a95e1..3d63a2d74b3 100644
--- a/src/components/ConversationSettings/ConversationAvatarEditor.vue
+++ b/src/components/ConversationSettings/ConversationAvatarEditor.vue
@@ -44,7 +44,7 @@
 				<div class="avatar__buttons">
 					<!-- Set emoji as avatar -->
 					<template v-if="!showCropper">
-						<NcEmojiPicker :per-line="5" :container="container" @select="setEmoji">
+						<NcEmojiPicker :per-line="5" container="#vue-avatar-section" @select="setEmoji">
 							<NcButton :title="t('spreed', 'Set emoji as conversation picture')"
 								:aria-label="t('spreed', 'Set emoji as conversation picture')">
 								<template #icon>
@@ -52,7 +52,7 @@
 								</template>
 							</NcButton>
 						</NcEmojiPicker>
-						<NcColorPicker v-if="emojiAvatar" v-model="backgroundColor" :container="container">
+						<NcColorPicker v-if="emojiAvatar" v-model="backgroundColor" container="#vue-avatar-section">
 							<NcButton :title="t('spreed', 'Set background color for conversation picture')"
 								:aria-label="t('spreed', 'Set background color for conversation picture')">
 								<template #icon>
@@ -111,7 +111,7 @@
 
 		<FilePickerVue v-if="showFilePicker"
 			:name="t('spreed', 'Choose your conversation picture')"
-			:container="container"
+			container="#vue-avatar-section"
 			:buttons="filePickerButtons"
 			:multiselect="false"
 			:mimetype-filter="validMimeTypes"
@@ -216,10 +216,6 @@ export default {
 	},
 
 	computed: {
-		container() {
-			return this.$store.getters.getMainContainerSelector()
-		},
-
 		inputId() {
 			return `account-property-${this.conversation.displayName}`
 		},
diff --git a/src/components/MediaSettings/MediaSettings.vue b/src/components/MediaSettings/MediaSettings.vue
index 6eaa6fe4f86..f2486ca75e8 100644
--- a/src/components/MediaSettings/MediaSettings.vue
+++ b/src/components/MediaSettings/MediaSettings.vue
@@ -712,8 +712,7 @@ export default {
 	}
 }
 
-:deep(.modal-container) {
-	display: flex !important;
+:deep(.modal-wrapper--normal > .modal-container) {
 	max-width: 500px !important;
 }
 </style>
diff --git a/src/components/MediaSettings/VideoBackgroundEditor.vue b/src/components/MediaSettings/VideoBackgroundEditor.vue
index 8ecaa3308ef..ae86da7e712 100644
--- a/src/components/MediaSettings/VideoBackgroundEditor.vue
+++ b/src/components/MediaSettings/VideoBackgroundEditor.vue
@@ -80,7 +80,7 @@
 		<FilePickerVue v-if="showFilePicker"
 			:name="t('spreed', 'File to share')"
 			:path="relativeBackgroundsFolderPath"
-			:container="container"
+			container=".background-editor"
 			:buttons="filePickerButtons"
 			:multiselect="false"
 			@close="showFilePicker = false" />
@@ -154,10 +154,6 @@ export default {
 	},
 
 	computed: {
-		container() {
-			return this.$store.getters.getMainContainerSelector()
-		},
-
 		isCustomBackground() {
 			return this.selectedBackground !== 'none'
 				&& this.selectedBackground !== 'blur'
diff --git a/src/components/SettingsDialog/SettingsDialog.vue b/src/components/SettingsDialog/SettingsDialog.vue
index 4905de1b209..9e92c7cfcf1 100644
--- a/src/components/SettingsDialog/SettingsDialog.vue
+++ b/src/components/SettingsDialog/SettingsDialog.vue
@@ -45,6 +45,15 @@
 					@click="showFilePicker = true">
 					{{ t('spreed', 'Browse …') }}
 				</NcButton>
+				<FilePickerVue v-if="showFilePicker"
+					:name="t('spreed', 'Select location for attachments')"
+					:path="attachmentFolder"
+					container=".app-settings-section__wrapper"
+					:buttons="filePickerButtons"
+					:multiselect="false"
+					:mimetype-filter="['httpd/unix-directory']"
+					allow-pick-directory
+					@close="showFilePicker = false" />
 			</div>
 		</NcAppSettingsSection>
 		<NcAppSettingsSection v-if="!isGuest"
@@ -160,16 +169,6 @@
 				</div>
 			</dl>
 		</NcAppSettingsSection>
-
-		<FilePickerVue v-if="showFilePicker"
-			:name="t('spreed', 'Select location for attachments')"
-			:path="attachmentFolder"
-			:container="container"
-			:buttons="filePickerButtons"
-			:multiselect="false"
-			:mimetype-filter="['httpd/unix-directory']"
-			allow-pick-directory
-			@close="showFilePicker = false" />
 	</NcAppSettingsDialog>
 </template>