1 files changed, 30 insertions, 31 deletions

diff --git a/core/src/views/LegacyUnifiedSearch.vue b/core/src/views/LegacyUnifiedSearch.vue
index 72a30b5b708..1277970ba0e 100644
--- a/core/src/views/LegacyUnifiedSearch.vue
+++ b/core/src/views/LegacyUnifiedSearch.vue
@@ -108,11 +108,11 @@ import debounce from 'debounce'
 import { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { showError } from '@nextcloud/dialogs'
 
-import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
-import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
-import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
-import NcHeaderMenu from '@nextcloud/vue/dist/Components/NcHeaderMenu.js'
-import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
+import NcActionButton from '@nextcloud/vue/components/NcActionButton'
+import NcActions from '@nextcloud/vue/components/NcActions'
+import NcEmptyContent from '@nextcloud/vue/components/NcEmptyContent'
+import NcHeaderMenu from '@nextcloud/vue/components/NcHeaderMenu'
+import NcTextField from '@nextcloud/vue/components/NcTextField'
 
 import Magnify from 'vue-material-design-icons/Magnify.vue'
 
@@ -270,7 +270,7 @@ export default {
 
 			return n('core',
 				'Please enter {minSearchLength} character or more to search',
-				'Please enter {minSearchLength} characters  or more to search',
+				'Please enter {minSearchLength} characters or more to search',
 				this.minSearchLength,
 				{ minSearchLength: this.minSearchLength })
 		},
@@ -724,17 +724,7 @@ $input-padding: 10px;
 			align-self: flex-start;
 			font-weight: bold;
 			font-size: 19px;
-			margin-left: 13px;
-		}
-	}
-
-	&__form-input {
-		margin: 0 !important;
-		&:focus,
-		&:focus-visible,
-		&:active {
-			border-color: 2px solid var(--color-main-text) !important;
-			box-shadow: 0 0 0 2px var(--color-main-background) !important;
+			margin-inline-start: 13px;
 		}
 	}
 
@@ -745,7 +735,8 @@ $input-padding: 10px;
 	}
 
 	&__filters {
-		margin: $margin 0 $margin math.div($margin, 2);
+		margin-block: $margin;
+		margin-inline: math.div($margin, 2) 0;
 		padding-top: 5px;
 		ul {
 			display: inline-flex;
@@ -760,8 +751,7 @@ $input-padding: 10px;
 
 		// Loading spinner
 		&::after {
-			right: $input-padding;
-			left: auto;
+		inset-inline-start: auto $input-padding;
 		}
 
 		&-input,
@@ -774,6 +764,13 @@ $input-padding: 10px;
 			height: $input-height;
 			padding: $input-padding;
 
+			&:focus,
+			&:focus-visible,
+			&:active {
+				border-color: 2px solid var(--color-main-text) !important;
+				box-shadow: 0 0 0 2px var(--color-main-background) !important;
+			}
+
 			&,
 			&[placeholder],
 			&::placeholder {
@@ -791,10 +788,11 @@ $input-padding: 10px;
 			}
 		}
 
-		&-reset, &-submit {
+		&-reset,
+		&-submit {
 			position: absolute;
 			top: 0;
-			right: 4px;
+			inset-inline-end: 4px;
 			width: $input-height - $input-padding;
 			height: $input-height - $input-padding;
 			min-height: 30px;
@@ -802,7 +800,7 @@ $input-padding: 10px;
 			opacity: .5;
 			border: none;
 			background-color: transparent;
-			margin-right: 0;
+			margin-inline-end: 0;
 
 			&:hover,
 			&:focus,
@@ -812,35 +810,36 @@ $input-padding: 10px;
 		}
 
 		&-submit {
-			right: 28px;
+			inset-inline-end: 28px;
 		}
 	}
 
 	&__results {
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+
 		&-header {
 			display: block;
 			margin: $margin;
 			margin-bottom: $margin - 4px;
-			margin-left: 13px;
+			margin-inline-start: 13px;
 			color: var(--color-primary-element);
 			font-size: 19px;
 			font-weight: bold;
 		}
-		display: flex;
-		flex-direction: column;
-		gap: 4px;
 	}
 
-	.unified-search__result-more::v-deep {
+	:deep(.unified-search__result-more) {
 		color: var(--color-text-maxcontrast);
 	}
 
 	.empty-content {
 		margin: 10vh 0;
 
-		::v-deep .empty-content__title {
+		:deep(.empty-content__title) {
 			font-weight: normal;
-            font-size: var(--default-font-size);
+			font-size: var(--default-font-size);
 			text-align: center;
 		}
 	}