Bump @nextcloud/vue to 3.1.0

package.json

@@ -26,7 +26,7 @@
 		"@nextcloud/l10n": "^1.4.1",
 		"@nextcloud/moment": "^1.1.1",
 		"@nextcloud/router": "^1.2.0",
-		"@nextcloud/vue": "^2.7.0",
+		"@nextcloud/vue": "^3.1.0",
 		"@nextcloud/vue-dashboard": "^1.0.1",
 		"attachmediastream": "^2.1.0",
 		"crypto-js": "^4.0.0",

src/components/RightSidebar/Participants/ParticipantsTab.vue

@@ -287,4 +287,14 @@ export default {
 	right: 6px !important;
 }
 
+/*
+ * The field will fully overlap the top of the sidebar content so
+ * that elements will scroll behind it
+ */
+.app-navigation-search {
+	top: -10px;
+	margin: -10px;
+	padding: 10px;
+}
+
 </style>

src/components/RightSidebar/RightSidebar.vue

@@ -27,6 +27,7 @@
 		:title="title"
 		:starred="isFavorited"
 		:title-editable="canModerate && isRenamingConversation"
+		:class="'active-tab-' + activeTab"
 		@update:active="handleUpdateActive"
 		@update:starred="onFavoriteChange"
 		@update:title="handleUpdateTitle"
@@ -112,7 +113,7 @@ export default {
 
 	data() {
 		return {
-			activeTab: null,
+			activeTab: 'participants',
 			contactsLoading: false,
 			// The conversation name (while editing)
 			conversationName: '',
@@ -260,31 +261,6 @@ export default {
 	display: flex;
 }
 
-/**
- * Replace padding with margin to make the participant list scroll
- * properly behind the top field
- */
-#tab-participants {
-	margin-top: 10px;
-	padding-top: 0;
-	outline: none; /* remove the weird border that appears on focus */
-}
-
-/* Force scroll bars in tabs content instead of in whole sidebar. */
-::v-deep .app-sidebar-tabs {
-	height: calc(100% - 80px);
-
-	&__content {
-		overflow: hidden;
-
-		section {
-			height: 100%;
-
-			overflow-y: auto;
-		}
-	}
-}
-
 .app-sidebar-tabs__content #tab-chat {
 	/* Remove padding to maximize the space for the chat view. */
 	padding: 0;