diff --git a/src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue b/src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue
index 254b8b5ceb..d632689431 100644
--- a/src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue
+++ b/src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue
@@ -259,14 +259,15 @@ function unregisterSection(id: string) {
 
 <style lang="scss" scoped>
 .app-settings {
-	:deep &__navigation {
+	:deep(.app-settings__navigation) {
 		min-width: 200px;
 		margin-inline-end: calc(4 * var(--default-grid-baseline));
 		overflow-x: hidden;
 		overflow-y: auto;
 		position: relative;
 	}
-	:deep &__content {
+
+	:deep(.app-settings__content) {
 		padding-inline: calc(4 * var(--default-grid-baseline));
 	}
 }
@@ -319,7 +320,7 @@ function unregisterSection(id: string) {
 
 @media only screen and (max-width: $breakpoint-small-mobile) {
 	.app-settings {
-		:deep .dialog__name {
+		:deep(.dialog__name) {
 			padding-inline-start: 16px;
 		}
 	}
diff --git a/src/components/NcRelatedResourcesPanel/NcResource.vue b/src/components/NcRelatedResourcesPanel/NcResource.vue
index 7cbdfae9f8..bbc29608e4 100644
--- a/src/components/NcRelatedResourcesPanel/NcResource.vue
+++ b/src/components/NcRelatedResourcesPanel/NcResource.vue
@@ -81,14 +81,12 @@ export default {
 		justify-content: flex-start !important;
 		padding: 0 !important;
 
-		&:deep {
-			.button-vue__wrapper {
-				justify-content: flex-start !important;
-
-				.button-vue__text {
-					font-weight: normal !important;
-					margin-inline-start: 2px !important;
-				}
+		& :deep(.button-vue__wrapper) {
+			justify-content: flex-start !important;
+
+			.button-vue__text {
+				font-weight: normal !important;
+				margin-inline-start: 2px !important;
 			}
 		}
 	}