Use container property to fix popups in fulllscreen mode

Many popup components are usually appending themselves to the document
body. This doesn't work in fullscreen mode where we use another
component as the root.

This fix sets the "container" property for all relevant popup components
to make sure they can be visible in fullscreen mode.

Signed-off-by: Vincent Petry <vincent@nextcloud.com>

11 files changed, 22 insertions, 7 deletions

diff --git a/src/components/AvatarWrapper/AvatarWrapper.vue b/src/components/AvatarWrapper/AvatarWrapper.vue
index f6dad0537..b887d9893 100644
--- a/src/components/AvatarWrapper/AvatarWrapper.vue
+++ b/src/components/AvatarWrapper/AvatarWrapper.vue
@@ -29,6 +29,7 @@
 		<Avatar v-else-if="id"
 			:user="id"
 			:display-name="name"
+			menu-container="#content-vue"
 			menu-position="left"
 			:disable-tooltip="disableTooltip"
 			:disable-menu="disableMenu"
diff --git a/src/components/AvatarWrapper/AvatarWrapperSmall.vue b/src/components/AvatarWrapper/AvatarWrapperSmall.vue
index 2c30e5773..9785bfa6b 100644
--- a/src/components/AvatarWrapper/AvatarWrapperSmall.vue
+++ b/src/components/AvatarWrapper/AvatarWrapperSmall.vue
@@ -29,6 +29,7 @@
 		<Avatar v-else-if="id"
 			:user="id"
 			:display-name="name"
+			menu-container="#content-vue"
 			menu-position="left"
 			:show-user-status="showUserStatus"
 			:disable-tooltip="disableTooltip"
diff --git a/src/components/ConversationIcon.vue b/src/components/ConversationIcon.vue
index 4990bfdc4..4183c4e38 100644
--- a/src/components/ConversationIcon.vue
+++ b/src/components/ConversationIcon.vue
@@ -28,6 +28,7 @@
 			:size="44"
 			:user="item.name"
 			:display-name="item.displayName"
+			menu-container="#content-vue"
 			menu-position="left"
 			class="conversation-icon__avatar" />
 		<div v-if="showCall"
diff --git a/src/components/ConversationSettings/ConversationSettingsDialog.vue b/src/components/ConversationSettings/ConversationSettingsDialog.vue
index 3f0bf8ccf..ed844714b 100644
--- a/src/components/ConversationSettings/ConversationSettingsDialog.vue
+++ b/src/components/ConversationSettings/ConversationSettingsDialog.vue
@@ -24,7 +24,8 @@
 		role="dialog"
 		:aria-label="t('spreed', 'Conversation settings')"
 		:open.sync="showSettings"
-		:show-navigation="true">
+		:show-navigation="true"
+		container="#content-vue">
 		<!-- Notifications settings -->
 		<AppSettingsSection
 			:title="t('spreed', 'Chat notifications')"
diff --git a/src/components/ConversationSettings/Matterbridge/MatterbridgeSettings.vue b/src/components/ConversationSettings/Matterbridge/MatterbridgeSettings.vue
index e87392d99..cbf4092b6 100644
--- a/src/components/ConversationSettings/Matterbridge/MatterbridgeSettings.vue
+++ b/src/components/ConversationSettings/Matterbridge/MatterbridgeSettings.vue
@@ -72,7 +72,8 @@
 						class="icon icon-edit"
 						@click="showLogContent" />
 					<Modal v-if="logModal"
-						@close="closeLogModal">
+						@close="closeLogModal"
+						container="#content-vue">
 						<div class="modal__content">
 							<textarea v-model="processLog" class="log-content" />
 						</div>
diff --git a/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue b/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue
index 6c1b828df..41edb9480 100644
--- a/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue
+++ b/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue
@@ -35,7 +35,8 @@
 		<!-- New group form -->
 		<Modal
 			v-if="modal"
-			@close="closeModal">
+			@close="closeModal"
+			container="#content-vue">
 			<!-- Wrapper for content & navigation -->
 			<div
 				class="new-group-conversation talk-modal">
diff --git a/src/components/MessagesList/MessagesGroup/AuthorAvatar.vue b/src/components/MessagesList/MessagesGroup/AuthorAvatar.vue
index ea9bfd42f..74cb0e351 100644
--- a/src/components/MessagesList/MessagesGroup/AuthorAvatar.vue
+++ b/src/components/MessagesList/MessagesGroup/AuthorAvatar.vue
@@ -25,6 +25,7 @@
 		class="messages__avatar__icon"
 		:user="authorId"
 		:show-user-status="false"
+		menu-container="#content-vue"
 		menu-position="left"
 		:display-name="displayName" />
 	<div v-else-if="isDeletedUser"
diff --git a/src/components/NewMessageForm/NewMessageForm.vue b/src/components/NewMessageForm/NewMessageForm.vue
index e06fe93b3..3bdb5e4cb 100644
--- a/src/components/NewMessageForm/NewMessageForm.vue
+++ b/src/components/NewMessageForm/NewMessageForm.vue
@@ -63,7 +63,9 @@
 					</Actions>
 				</div>
 				<div>
-					<EmojiPicker @select="addEmoji">
+					<EmojiPicker
+						container="#content-vue"
+						@select="addEmoji">
 						<button
 							type="button"
 							:disabled="disabled"
diff --git a/src/components/RightSidebar/Participants/ParticipantsList/Participant/Participant.vue b/src/components/RightSidebar/Participants/ParticipantsList/Participant/Participant.vue
index 5ac1c2331..6cbd48056 100644
--- a/src/components/RightSidebar/Participants/ParticipantsList/Participant/Participant.vue
+++ b/src/components/RightSidebar/Participants/ParticipantsList/Participant/Participant.vue
@@ -42,7 +42,8 @@
 			:show-user-status-compact="false"
 			:name="computedName"
 			:source="participant.source || participant.actorType"
-			:offline="isOffline" />
+			:offline="isOffline"
+			menu-container="#content-vue" />
 		<div
 			class="participant-row__user-wrapper"
 			:class="{
diff --git a/src/components/SettingsDialog/SettingsDialog.vue b/src/components/SettingsDialog/SettingsDialog.vue
index d61d941e9..d4fe317ac 100644
--- a/src/components/SettingsDialog/SettingsDialog.vue
+++ b/src/components/SettingsDialog/SettingsDialog.vue
@@ -20,7 +20,11 @@
 -->
 
 <template>
-	<AppSettingsDialog :open.sync="showSettings" :show-navigation="true" first-selected-section="keyboard shortcuts">
+	<AppSettingsDialog
+		:open.sync="showSettings"
+		:show-navigation="true"
+		first-selected-section="keyboard shortcuts"
+		container="#content-vue">
 		<AppSettingsSection :title="t('spreed', 'Choose devices')"
 			class="app-settings-section">
 			<MediaDevicesPreview />
diff --git a/src/components/UploadEditor.vue b/src/components/UploadEditor.vue
index bd376dd15..9b6a57bad 100644
--- a/src/components/UploadEditor.vue
+++ b/src/components/UploadEditor.vue
@@ -22,7 +22,8 @@
 <template>
 	<Modal v-if="showModal"
 		class="upload-editor"
-		@close="handleDismiss">
+		@close="handleDismiss"
+		container="#content-vue">
 		<!--native file picker, hidden -->
 		<input id="file-upload"
 			ref="fileUploadInput"