Merge pull request #11939 from nextcloud/fix/noid/filepicker-container

fix(FilePicker): provide correct container for FilePicker

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"
@@ -217,10 +217,6 @@ export default {
 	},
 
 	computed: {
-		container() {
-			return this.$store.getters.getMainContainerSelector()
-		},
-
 		inputId() {
 			return `account-property-${this.conversation.displayName}`
 		},

src/components/MediaSettings/MediaSettings.vue

@@ -757,8 +757,7 @@ export default {
 	}
 }
 
-:deep(.modal-container) {
-	display: flex !important;
+:deep(.modal-wrapper--normal > .modal-container) {
 	max-width: 500px !important;
 }
 </style>

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'

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"
@@ -166,16 +175,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>