fix(modal): mount nested modals inside global modals

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>

src/components/ConversationSettings/ConversationPermissionsSettings.vue

@@ -88,6 +88,7 @@
 			:conversation-name="conversationName"
 			:permissions="conversationPermissions"
 			:loading="loading"
+			nested-container=".conversation-permissions-editor"
 			@close="handleClosePermissionsEditor"
 			@submit="handleSubmitPermissions" />
 	</div>

src/components/ConversationSettings/Matterbridge/MatterbridgeSettings.vue

@@ -67,7 +67,7 @@
 						</template>
 					</NcButton>
 					<NcModal v-if="logModal"
-						:container="container"
+						container=".matterbridge-settings"
 						@close="closeLogModal">
 						<div class="modal__content">
 							<textarea v-model="processLog" class="log-content" />
@@ -82,7 +82,7 @@
 						:type="types[part.type]"
 						:editing="part.editing"
 						:editable="!enabled"
-						:container="container"
+						container=".matterbridge-settings"
 						@edit-clicked="onEditClicked(i)"
 						@delete-part="onDelete(i)" />
 				</li>

src/components/PermissionsEditor/PermissionsEditor.vue

@@ -110,6 +110,11 @@ export default {
 			default: '',
 		},
 
+		nestedContainer: {
+			type: String,
+			default: null,
+		},
+
 		/**
 		 * The conversation's name. Don't provide this when modifying
 		 * participants' permissions.
@@ -148,7 +153,7 @@ export default {
 
 	computed: {
 		container() {
-			return this.$store.getters.getMainContainerSelector()
+			return this.nestedContainer ?? this.$store.getters.getMainContainerSelector()
 		},
 
 		modalTitle() {
@@ -262,4 +267,8 @@ export default {
 	margin: 0 auto;
 }
 
+// TODO remove after https://github.com/nextcloud-libraries/nextcloud-vue/issues/5228
+:deep(.modal-wrapper--small .modal-container) {
+	width: 400px !important;
+}
 </style>