fix: Adjust more places for logical position

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

50 files changed, 121 insertions, 387 deletions

diff --git a/apps/dashboard/src/DashboardApp.vue b/apps/dashboard/src/DashboardApp.vue
index de668a0be7d..78a7bb1deb3 100644
--- a/apps/dashboard/src/DashboardApp.vue
+++ b/apps/dashboard/src/DashboardApp.vue
@@ -569,11 +569,10 @@ export default {
 				background-size: 32px;
 				width: 32px;
 				height: 32px;
-				margin-inline-end: 16px;
 				background-position: center;
 				float: left;
 				margin-top: -6px;
-				margin-left: 6px;
+				margin-inline: 6px 16px;
 			}
 
 			img {
diff --git a/apps/dav/src/components/AvailabilityForm.vue b/apps/dav/src/components/AvailabilityForm.vue
index fd7ede24ea6..f3a7570325f 100644
--- a/apps/dav/src/components/AvailabilityForm.vue
+++ b/apps/dav/src/components/AvailabilityForm.vue
@@ -202,12 +202,12 @@ export default {
 }
 
 .to-text {
-	padding-right: 12px;
+	padding-inline-end: 12px;
 }
 
 .empty-content {
 	color: var(--color-text-lighter);
-	margin-top: 4px;
+	margin-block-start: var(--default-grid-baseline);
 	align-self: center;
 }
 </style>
diff --git a/apps/dav/src/views/CalDavSettings.vue b/apps/dav/src/views/CalDavSettings.vue
index c55767dc6af..b93986a9137 100644
--- a/apps/dav/src/views/CalDavSettings.vue
+++ b/apps/dav/src/views/CalDavSettings.vue
@@ -150,10 +150,10 @@ export default {
 
 <style scoped>
 	.indented {
-		padding-left: 28px;
+		padding-inline-start: 28px;
 	}
 	/** Use deep selector to affect v-html */
-	* >>> a {
+	* :deep(a) {
 		text-decoration: underline;
 	}
 	.settings-hint {
diff --git a/apps/federatedfilesharing/src/components/PersonalSettings.vue b/apps/federatedfilesharing/src/components/PersonalSettings.vue
index f4f370d6b37..d3f6e1eaaab 100644
--- a/apps/federatedfilesharing/src/components/PersonalSettings.vue
+++ b/apps/federatedfilesharing/src/components/PersonalSettings.vue
@@ -125,7 +125,7 @@ export default {
 			return window.location.protocol + '//' + window.location.host + this.logoPath
 		},
 		backgroundStyle() {
-			return `padding:10px;background-color:${this.color};color:${this.textColor};border-radius:3px;padding-left:4px;`
+			return `padding:10px;background-color:${this.color};color:${this.textColor};border-radius:3px;padding-inline-start:4px;`
 		},
 		linkStyle() {
 			return `background-image:url(${this.logoPathAbsolute});width:50px;height:30px;position:relative;top:8px;background-size:contain;display:inline-block;background-repeat:no-repeat; background-position: center center;`
diff --git a/apps/files/css/detailsView.scss b/apps/files/css/detailsView.scss
index 35bbbf17bb3..2fa09606ed7 100644
--- a/apps/files/css/detailsView.scss
+++ b/apps/files/css/detailsView.scss
@@ -34,8 +34,7 @@
 }
 
 .app-sidebar .thumbnailContainer.large {
-	margin-inline-start: -15px;
-	margin-inline-end: -35px; /* 15 + 20 for the close button */
+	margin-inline: -15px -35px; /* 15 + 20 for the close button */
 	margin-top: -15px;
 }
 
diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss
index 2ab8ef716b3..53d00a11092 100644
--- a/apps/files/css/files.scss
+++ b/apps/files/css/files.scss
@@ -648,8 +648,7 @@ a.action.action-setreminder {
 		&.action-menu {
 			padding-top: 17px;
 			padding-bottom: 17px;
-			padding-inline-start: 14px;
-			padding-inline-end: 14px;
+			padding-inline: 14px;
 		}
 		&.no-permission {
 			&:hover, &:focus {
@@ -763,8 +762,7 @@ table.dragshadow {
 	z-index: 2000;
 }
 table.dragshadow td.filename {
-	padding-inline-start: 60px;
-	padding-inline-end: 16px;
+	padding-inline: 60px 16px;
 	height: 36px;
 
 	/* Override "max-width: 0" to prevent file name and size from overlapping */
@@ -912,8 +910,7 @@ table.dragshadow td.size {
 }
 
 .notCreatable {
-	margin-inline-start: 12px;
-	margin-inline-end: 44px;
+	margin-inline: 12px 44px;
 	margin-top: 12px;
 	color: var(--color-main-text);
 	overflow: auto;
diff --git a/apps/files/src/components/FilesListVirtual.vue b/apps/files/src/components/FilesListVirtual.vue
index 743d85beeba..ff231770f49 100644
--- a/apps/files/src/components/FilesListVirtual.vue
+++ b/apps/files/src/components/FilesListVirtual.vue
@@ -328,14 +328,14 @@ export default defineComponent({
 	--clickable-area: var(--default-clickable-area);
 	--icon-preview-size: 32px;
 
-	--fixed-top-position: var(--default-clickable-area);
+	--fixed-block-start-position: var(--default-clickable-area);
 
 	overflow: auto;
 	height: 100%;
 	will-change: scroll-position;
 
 	&:has(.file-list-filters__active) {
-		--fixed-top-position: calc(var(--default-clickable-area) + var(--default-grid-baseline) + var(--clickable-area-small));
+		--fixed-block-start-position: calc(var(--default-clickable-area) + var(--default-grid-baseline) + var(--clickable-area-small));
 	}
 
 	& :deep() {
@@ -366,7 +366,7 @@ export default defineComponent({
 		}
 
 		.files-list__selected {
-			padding-right: 12px;
+			padding-inline-end: 12px;
 			white-space: nowrap;
 		}
 
@@ -375,7 +375,7 @@ export default defineComponent({
 
 			&.files-list__table--with-thead-overlay {
 				// Hide the table header below the overlay
-				margin-top: calc(-1 * var(--row-height));
+				margin-block-start: calc(-1 * var(--row-height));
 			}
 		}
 
@@ -388,16 +388,16 @@ export default defineComponent({
 			z-index: 10;
 			// fixed the size
 			padding-inline: var(--row-height) var(--default-grid-baseline, 4px);
-			height: var(--fixed-top-position);
+			height: var(--fixed-block-start-position);
 			width: 100%;
 		}
 
 		.files-list__thead-overlay {
 			// Pinned on top when scrolling
 			position: sticky;
-			top: var(--fixed-top-position);
+			top: var(--fixed-block-start-position);
 			// Save space for a row checkbox
-			margin-left: var(--row-height);
+			margin-inline-start: var(--row-height);
 			// More than .files-list__thead
 			z-index: 20;
 
@@ -406,7 +406,7 @@ export default defineComponent({
 
 			// Reuse row styles
 			background-color: var(--color-main-background);
-			border-bottom: 1px solid var(--color-border);
+			border-block-end: 1px solid var(--color-border);
 			height: var(--row-height);
 		}
 
@@ -424,7 +424,7 @@ export default defineComponent({
 			// Pinned on top when scrolling
 			position: sticky;
 			z-index: 10;
-			top: var(--fixed-top-position);
+			top: var(--fixed-block-start-position);
 		}
 
 		tr {
@@ -433,7 +433,7 @@ export default defineComponent({
 			align-items: center;
 			width: 100%;
 			user-select: none;
-			border-bottom: 1px solid var(--color-border);
+			border-block-end: 1px solid var(--color-border);
 			box-sizing: border-box;
 			user-select: none;
 			height: var(--row-height);
@@ -465,8 +465,7 @@ export default defineComponent({
 			position: absolute;
 			display: block;
 			top: 0;
-			inset-inline-start: 0;
-			inset-inline-end: 0;
+			inset-inline: 0;
 			bottom: 0;
 			opacity: .1;
 			z-index: -1;
@@ -586,7 +585,7 @@ export default defineComponent({
 				max-width: calc(var(--icon-preview-size) * 0.5);
 				color: var(--color-primary-element-text);
 				// better alignment with the folder icon
-				margin-top: 2px;
+				margin-block-start: 2px;
 
 				// Improve icon contrast with a background for files
 				&--file {
@@ -766,8 +765,8 @@ tbody.files-list__tbody.files-list__tbody--grid {
 			width: 16px;
 			height: 16px;
 			position: absolute;
-			left: 50%;
-			margin-left: -8px;
+			inset-inline-start: 50%;
+			margin-inline-start: -8px;
 			z-index: -1;
 			background: var(--color-main-background);
 		}
@@ -801,7 +800,7 @@ tbody.files-list__tbody.files-list__tbody--grid {
 		.files-list__row-name-text {
 			margin: 0;
 			// Ensure that the outline is not too close to the text.
-			margin-left: -4px;
+			margin-inline-start: -4px;
 			padding: 0px 4px;
 		}
 	}
@@ -815,7 +814,7 @@ tbody.files-list__tbody.files-list__tbody--grid {
 	.files-list__row-actions {
 		position: absolute;
 		inset-inline-end: calc(var(--half-clickable-area) / 2);
-		bottom: calc(var(--mtime-height) / 2);
+		inset-block-end: calc(var(--mtime-height) / 2);
 		width: var(--clickable-area);
 		height: var(--clickable-area);
 	}
diff --git a/apps/files/src/views/ReferenceFileWidget.vue b/apps/files/src/views/ReferenceFileWidget.vue
index 41b5fe73048..9db346ea35d 100644
--- a/apps/files/src/views/ReferenceFileWidget.vue
+++ b/apps/files/src/views/ReferenceFileWidget.vue
@@ -256,7 +256,7 @@ export default defineComponent({
 			min-width: 88px;
 			max-width: 88px;
 			padding: 12px;
-			padding-right: 0;
+			padding-inline-end: 0;
 			display: flex;
 			align-items: center;
 			justify-content: center;
diff --git a/apps/files_external/src/css/fileEntryStatus.scss b/apps/files_external/src/css/fileEntryStatus.scss
index d5506be654d..34d57e91970 100644
--- a/apps/files_external/src/css/fileEntryStatus.scss
+++ b/apps/files_external/src/css/fileEntryStatus.scss
@@ -23,8 +23,7 @@
 		position: absolute;
 		display: block;
 		top: 0;
-		inset-inline-start: 0;
-		inset-inline-end: 0;
+		inset-inline: 0;
 		bottom: 0;
 		opacity: .1;
 		z-index: -1;
diff --git a/apps/files_reminders/src/actions/setReminderSuggestionActions.scss b/apps/files_reminders/src/actions/setReminderSuggestionActions.scss
index 9997e1880dc..1327500c964 100644
--- a/apps/files_reminders/src/actions/setReminderSuggestionActions.scss
+++ b/apps/files_reminders/src/actions/setReminderSuggestionActions.scss
@@ -17,8 +17,7 @@
 		display: flex;
 		height: 0;
 		position: absolute;
-		inset-inline-start: 0;
-		inset-inline-end: 0;
+		inset-inline: 0;
 		top: -10px;
 	}
 }
diff --git a/apps/files_sharing/src/actions/sharingStatusAction.scss b/apps/files_sharing/src/actions/sharingStatusAction.scss
index 33366c42be1..dee247932e6 100644
--- a/apps/files_sharing/src/actions/sharingStatusAction.scss
+++ b/apps/files_sharing/src/actions/sharingStatusAction.scss
@@ -7,7 +7,7 @@
 	// put icon at the end of the button
 	direction: rtl;
 	// align icons with textless inline actions
-    padding-right: 0 !important;
+	padding-inline-end: 0 !important;
 }
 
 svg.sharing-status__avatar {
diff --git a/apps/files_sharing/src/components/NewFileRequestDialog.vue b/apps/files_sharing/src/components/NewFileRequestDialog.vue
index 893830ca98e..f4825004508 100644
--- a/apps/files_sharing/src/components/NewFileRequestDialog.vue
+++ b/apps/files_sharing/src/components/NewFileRequestDialog.vue
@@ -451,7 +451,7 @@ export default defineComponent({
 		width: auto;
 		margin-inline: 12px;
 		span.dialog__actions-separator {
-			margin-left: auto;
+			margin-inline-start: auto;
 		}
 	}
 
diff --git a/apps/files_sharing/src/components/SharingEntry.vue b/apps/files_sharing/src/components/SharingEntry.vue
index 23127a6fe16..e97ff332422 100644
--- a/apps/files_sharing/src/components/SharingEntry.vue
+++ b/apps/files_sharing/src/components/SharingEntry.vue
@@ -129,7 +129,7 @@ export default {
 	height: 44px;
 	&__summary {
 		padding: 8px;
-		padding-left: 10px;
+		padding-inline-start: 10px;
 		display: flex;
 		flex-direction: column;
 		justify-content: center;
diff --git a/apps/files_sharing/src/components/SharingEntryInherited.vue b/apps/files_sharing/src/components/SharingEntryInherited.vue
index 9718a08f763..af2cccbb0df 100644
--- a/apps/files_sharing/src/components/SharingEntryInherited.vue
+++ b/apps/files_sharing/src/components/SharingEntryInherited.vue
@@ -85,7 +85,7 @@ export default {
 		flex-direction: column;
 		justify-content: space-between;
 		padding: 8px;
-		padding-left: 10px;
+		padding-inline-start: 10px;
 		line-height: 1.2em;
 		p {
 			color: var(--color-text-maxcontrast);
diff --git a/apps/files_sharing/src/components/SharingEntryLink.vue b/apps/files_sharing/src/components/SharingEntryLink.vue
index b65f3c533e9..29f5f2ee113 100644
--- a/apps/files_sharing/src/components/SharingEntryLink.vue
+++ b/apps/files_sharing/src/components/SharingEntryLink.vue
@@ -854,7 +854,7 @@ export default {
 
 	&__summary {
 		padding: 8px;
-		padding-left: 10px;
+		padding-inline-start: 10px;
 		display: flex;
 		justify-content: space-between;
 		flex: 1 0;
diff --git a/apps/files_sharing/src/components/SharingEntrySimple.vue b/apps/files_sharing/src/components/SharingEntrySimple.vue
index a7248c685e7..a5e4034cfb1 100644
--- a/apps/files_sharing/src/components/SharingEntrySimple.vue
+++ b/apps/files_sharing/src/components/SharingEntrySimple.vue
@@ -70,7 +70,7 @@ export default {
 	min-height: 44px;
 	&__desc {
 		padding: 8px;
-		padding-left: 10px;
+		padding-inline-start: 10px;
 		line-height: 1.2em;
 		position: relative;
 		flex: 1 1;
diff --git a/apps/files_sharing/src/views/SharingDetailsTab.vue b/apps/files_sharing/src/views/SharingDetailsTab.vue
index 3b392dfbe02..3d6f5e6495f 100644
--- a/apps/files_sharing/src/views/SharingDetailsTab.vue
+++ b/apps/files_sharing/src/views/SharingDetailsTab.vue
@@ -1049,7 +1049,7 @@ export default {
 
 			h1 {
 				font-size: 15px;
-				padding-left: 0.3em;
+				padding-inline-start: 0.3em;
 			}
 
 		}
@@ -1060,7 +1060,7 @@ export default {
 		overflow: scroll;
 		flex-shrink: 1;
 		padding: 4px;
-		padding-right: 12px;
+		padding-inline-end: 12px;
 	}
 
 	&__quick-permissions {
@@ -1117,7 +1117,7 @@ export default {
 		width: 100%;
 		margin-bottom: 0.5em;
 		text-align: start;
-		padding-left: 0;
+		padding-inline-start: 0;
 
 		section {
 
@@ -1142,14 +1142,14 @@ export default {
             */
 			span {
 				::v-deep label {
-					padding-left: 0 !important;
+					padding-inline-start: 0 !important;
 					background-color: initial !important;
 					border: none !important;
 				}
 			}
 
 			section.custom-permissions-group {
-				padding-left: 1.5em;
+				padding-inline-start: 1.5em;
 			}
 		}
 	}
diff --git a/apps/oauth2/src/components/OAuthItem.vue b/apps/oauth2/src/components/OAuthItem.vue
index 7261674e252..c22a2f73d74 100644
--- a/apps/oauth2/src/components/OAuthItem.vue
+++ b/apps/oauth2/src/components/OAuthItem.vue
@@ -104,6 +104,6 @@ export default {
 	.action-column {
 		display: flex;
 		justify-content: flex-end;
-		padding-right: 0;
+		padding-inline-end: 0;
 	}
 </style>
diff --git a/apps/settings/src/components/AdminTwoFactor.vue b/apps/settings/src/components/AdminTwoFactor.vue
index 9b2b222d5e8..56b9d609b8b 100644
--- a/apps/settings/src/components/AdminTwoFactor.vue
+++ b/apps/settings/src/components/AdminTwoFactor.vue
@@ -175,8 +175,7 @@ export default {
 	.two-factor-loading {
 		display: inline-block;
 		vertical-align: sub;
-		margin-inline-start: -2px;
-		margin-inline-end: 1px;
+		margin-inline: -2px 1px;
 	}
 
 	.top-margin {
diff --git a/apps/settings/src/components/AppList.vue b/apps/settings/src/components/AppList.vue
index 68df4072ee8..2372b461f57 100644
--- a/apps/settings/src/components/AppList.vue
+++ b/apps/settings/src/components/AppList.vue
@@ -326,14 +326,14 @@ $toolbar-height: 44px + $toolbar-padding * 2;
 	}
 
 	#app-list-update-all {
-		margin-left: 10px;
+		margin-inline-start: 10px;
 	}
 
 	&__toolbar {
 		height: $toolbar-height;
 		padding: $toolbar-padding;
 		// Leave room for app-navigation-toggle
-		padding-left: $toolbar-height;
+		padding-inline-start: $toolbar-height;
 		width: 100%;
 		background-color: var(--color-main-background);
 		position: sticky;
diff --git a/apps/settings/src/components/AppList/AppItem.vue b/apps/settings/src/components/AppList/AppItem.vue
index 881be612445..08faa06f1cd 100644
--- a/apps/settings/src/components/AppList/AppItem.vue
+++ b/apps/settings/src/components/AppList/AppItem.vue
@@ -228,7 +228,7 @@ export default {
 		.app-image {
 			width: var(--default-clickable-area);
 			height: auto;
-			text-align: right;
+			text-align: end;
 		}
 
 		.app-image-icon svg,
@@ -257,8 +257,7 @@ export default {
 		.app-name--link::after {
 			content: '';
 			position: absolute;
-			left: 0;
-			right: 0;
+			inset-inline: 0;
 			height: var(--app-item-height);
 		}
 
@@ -271,7 +270,7 @@ export default {
 			.icon-loading-small {
 				display: inline-block;
 				top: 4px;
-				margin-right: 10px;
+				margin-inline-end: 10px;
 			}
 		}
 
@@ -317,10 +316,8 @@ export default {
 		.app-name--link::after {
 			content: '';
 			position: absolute;
-			top: 0;
-			left: 0;
-			right: 0;
-			bottom: 0;
+			inset-block: 0;
+			inset-inline: 0;
 		}
 
 		.app-actions {
diff --git a/apps/settings/src/components/AppStoreDiscover/CarouselType.vue b/apps/settings/src/components/AppStoreDiscover/CarouselType.vue
index 537c3004c0e..e657c7ae800 100644
--- a/apps/settings/src/components/AppStoreDiscover/CarouselType.vue
+++ b/apps/settings/src/components/AppStoreDiscover/CarouselType.vue
@@ -165,10 +165,10 @@ h3 {
 
 		// See padding of discover section
 		&--next {
-			right: -54px;
+			inset-inline-end: -54px;
 		}
 		&--previous {
-			left: -54px;
+			inset-inline-start: -54px;
 		}
 	}
 
diff --git a/apps/settings/src/components/AppStoreDiscover/PostType.vue b/apps/settings/src/components/AppStoreDiscover/PostType.vue
index 536609f329f..512ce987510 100644
--- a/apps/settings/src/components/AppStoreDiscover/PostType.vue
+++ b/apps/settings/src/components/AppStoreDiscover/PostType.vue
@@ -255,12 +255,12 @@ export default defineComponent({
 		&-wrapper {
 			position: relative;
 			top: -50%;
-			left: -50%;
+			inset-inline-start: -50%;
 		}
 
 		position: absolute;
 		top: -46px; // half of the icon height
-		right: -46px; // half of the icon width
+		inset-inline-end: -46px; // half of the icon width
 	}
 }
 
diff --git a/apps/settings/src/components/AuthTokenSetup.vue b/apps/settings/src/components/AuthTokenSetup.vue
index dcff95afd63..74dd3c2bbed 100644
--- a/apps/settings/src/components/AuthTokenSetup.vue
+++ b/apps/settings/src/components/AuthTokenSetup.vue
@@ -81,8 +81,8 @@ export default defineComponent({
 <style lang="scss" scoped>
 	.app-name-text-field {
 		height: 44px !important;
-		padding-left: 12px;
-		margin-right: 12px;
+		padding-inline-start: 12px;
+		margin-inline-end: 12px;
 		width: 200px;
 	}
 
diff --git a/apps/settings/src/components/AuthTokenSetupDialogue.vue b/apps/settings/src/components/AuthTokenSetupDialogue.vue
deleted file mode 100644
index 99ef17dbd6c..00000000000
--- a/apps/settings/src/components/AuthTokenSetupDialogue.vue
+++ /dev/null
@@ -1,239 +0,0 @@
-<!--
-  - @copyright 2019 Christoph Wurst <christoph@winzerhof-wurst.at>
-  -
-  - @author 2019 Christoph Wurst <christoph@winzerhof-wurst.at>
-  -
-  - @license GNU AGPL version 3 or any later version
-  -
-  - This program is free software: you can redistribute it and/or modify
-  - it under the terms of the GNU Affero General Public License as
-  - published by the Free Software Foundation, either version 3 of the
-  - License, or (at your option) any later version.
-  -
-  - This program is distributed in the hope that it will be useful,
-  - but WITHOUT ANY WARRANTY; without even the implied warranty of
-  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-  - GNU Affero General Public License for more details.
-  -
-  - You should have received a copy of the GNU Affero General Public License
-  - along with this program.  If not, see <http://www.gnu.org/licenses/>.
-  -->
-
-<template>
-	<div v-if="!adding" id="generate-app-token-section" class="row spacing">
-		<!-- Port to TextField component when available -->
-		<NcTextField :value.sync="deviceName"
-			type="text"
-			:maxlength="120"
-			:disabled="loading"
-			class="app-name-text-field"
-			:label="t('settings', 'App name')"
-			:placeholder="t('settings', 'App name')"
-			@keydown.enter="submit" />
-		<NcButton :disabled="loading || deviceName.length === 0"
-			type="primary"
-			@click="submit">
-			{{ t('settings', 'Create new app password') }}
-		</NcButton>
-	</div>
-	<div v-else class="spacing">
-		{{ t('settings', 'Use the credentials below to configure your app or device.') }}
-		{{ t('settings', 'For security reasons this password will only be shown once.') }}
-		<div class="app-password-row">
-			<label for="app-username" class="app-password-label">{{ t('settings', 'Username') }}</label>
-			<input id="app-username"
-				:value="loginName"
-				type="text"
-				class="monospaced"
-				readonly="readonly"
-				@focus="selectInput">
-		</div>
-		<div class="app-password-row">
-			<label for="app-password" class="app-password-label">{{ t('settings', 'Password') }}</label>
-			<input id="app-password"
-				ref="appPassword"
-				:value="appPassword"
-				type="text"
-				class="monospaced"
-				readonly="readonly"
-				@focus="selectInput">
-			<NcButton type="tertiary"
-				:title="copyTooltipOptions"
-				:aria-label="copyTooltipOptions"
-				@click="copyPassword">
-				<template #icon>
-					<Check v-if="copied" :size="20" />
-					<ContentCopy v-else :size="20" />
-				</template>
-			</NcButton>
-			<NcButton @click="reset">
-				{{ t('settings', 'Done') }}
-			</NcButton>
-		</div>
-		<div class="app-password-row">
-			<span class="app-password-label" />
-			<NcButton v-if="!showQR"
-				@click="showQR = true">
-				{{ t('settings', 'Show QR code for mobile apps') }}
-			</NcButton>
-			<QR v-else
-				:value="qrUrl" />
-		</div>
-	</div>
-</template>
-
-<script>
-import QR from '@chenfengyuan/vue-qrcode'
-import { confirmPassword } from '@nextcloud/password-confirmation'
-import '@nextcloud/password-confirmation/dist/style.css'
-import { showError } from '@nextcloud/dialogs'
-import { getRootUrl } from '@nextcloud/router'
-import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
-import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
-
-import Check from 'vue-material-design-icons/Check.vue'
-import ContentCopy from 'vue-material-design-icons/ContentCopy.vue'
-
-export default {
-	name: 'AuthTokenSetupDialogue',
-	components: {
-		Check,
-		ContentCopy,
-		NcButton,
-		QR,
-		NcTextField,
-	},
-	props: {
-		add: {
-			type: Function,
-			required: true,
-		},
-	},
-	data() {
-		return {
-			adding: false,
-			loading: false,
-			deviceName: '',
-			appPassword: '',
-			loginName: '',
-			copied: false,
-			showQR: false,
-			qrUrl: '',
-		}
-	},
-	computed: {
-		copyTooltipOptions() {
-			if (this.copied) {
-				return t('settings', 'Copied!')
-			}
-			return t('settings', 'Copy')
-		},
-	},
-	methods: {
-		selectInput(e) {
-			e.currentTarget.select()
-		},
-		submit() {
-			confirmPassword()
-				.then(() => {
-					this.loading = true
-					return this.add(this.deviceName)
-				})
-				.then(token => {
-					this.adding = true
-					this.loginName = token.loginName
-					this.appPassword = token.token
-
-					const server = window.location.protocol + '//' + window.location.host + getRootUrl()
-					this.qrUrl = `nc://login/user:${token.loginName}&password:${token.token}&server:${server}`
-
-					this.$nextTick(() => {
-						this.$refs.appPassword.select()
-					})
-				})
-				.catch(err => {
-					console.error('could not create a new app password', err)
-					OC.Notification.showTemporary(t('settings', 'Error while creating device token'))
-
-					this.reset()
-				})
-		},
-		async copyPassword() {
-			try {
-				await navigator.clipboard.writeText(this.appPassword)
-				this.copied = true
-			} catch (e) {
-				this.copied = false
-				console.error(e)
-				showError(t('settings', 'Could not copy app password. Please copy it manually.'))
-			} finally {
-				setTimeout(() => {
-					this.copied = false
-				}, 4000)
-			}
-		},
-		reset() {
-			this.adding = false
-			this.loading = false
-			this.showQR = false
-			this.qrUrl = ''
-			this.deviceName = ''
-			this.appPassword = ''
-			this.loginName = ''
-		},
-	},
-}
-</script>
-
-<style lang="scss" scoped>
-	.app-password-row {
-		display: flex;
-		align-items: center;
-		flex-wrap: wrap;
-		margin-top: calc(var(--default-grid-baseline) * 2);
-
-		.icon {
-			background-size: 16px 16px;
-			display: inline-block;
-			position: relative;
-			top: 3px;
-			margin-inline-start: 5px;
-			margin-inline-end: 8px;
-		}
-
-	}
-
-	.app-password-label {
-		display: table-cell;
-		margin-inline-end: 1em;
-		text-align: start;
-		vertical-align: middle;
-		width: 100px;
-	}
-
-	.app-name-text-field {
-		height: 44px !important;
-		padding-left: 12px;
-		margin-inline-end: 12px;
-		width: 200px;
-	}
-
-	.monospaced {
-		width: 245px;
-		font-family: monospace;
-	}
-
-	.button-vue{
-		display:inline-block;
-		margin: 3px 3px 3px 3px;
-	}
-
-	.row {
-		display: flex;
-		align-items: center;
-	}
-
-	.spacing {
-		padding-top: 16px;
-	}
-</style>
diff --git a/apps/settings/src/components/DeclarativeSettings/DeclarativeSection.vue b/apps/settings/src/components/DeclarativeSettings/DeclarativeSection.vue
index a4e01bcef7d..1c739a54412 100644
--- a/apps/settings/src/components/DeclarativeSettings/DeclarativeSection.vue
+++ b/apps/settings/src/components/DeclarativeSettings/DeclarativeSection.vue
@@ -243,8 +243,8 @@ export default {
 	.hint {
 		display: inline-block;
 		color: var(--color-text-maxcontrast);
-		margin-left: 8px;
-		padding-top: 5px;
+		margin-inline-start: 8px;
+		padding-block-start: 5px;
 	}
 
 	&-radio, &-multi_checkbox {
diff --git a/apps/settings/src/components/Encryption.vue b/apps/settings/src/components/Encryption.vue
index c17ef57cc7f..72b597c61d3 100644
--- a/apps/settings/src/components/Encryption.vue
+++ b/apps/settings/src/components/Encryption.vue
@@ -168,7 +168,7 @@ export default {
 	color: var(--color-text-light);
 	background-color: var(--note-background);
 	border: 1px solid var(--color-border);
-	border-left: 4px solid var(--note-theme);
+	border-inline-start: 4px solid var(--note-theme);
 	border-radius: var(--border-radius);
 	box-shadow: rgba(43, 42, 51, 0.05) 0px 1px 2px 0px;
 	margin: 1rem 0;
diff --git a/apps/settings/src/components/Markdown.vue b/apps/settings/src/components/Markdown.vue
index 8f2800825a3..f3b8747119d 100644
--- a/apps/settings/src/components/Markdown.vue
+++ b/apps/settings/src/components/Markdown.vue
@@ -160,7 +160,7 @@ export default {
 	}
 
 	ul, ol {
-		padding-left: 10px;
+		padding-inline-start: 10px;
 		margin-inline-start: 10px;
 	}
 
@@ -177,11 +177,10 @@ export default {
 	}
 
 	blockquote {
-		padding-left: 1em;
-		border-left: 4px solid var(--color-primary-element);
+		padding-inline-start: 1em;
+		border-inline-start: 4px solid var(--color-primary-element);
 		color: var(--color-text-maxcontrast);
-		margin-inline-start: 0;
-		margin-inline-end: 0;
+		margin-inline: 0;
 	}
 
 	}
diff --git a/apps/settings/src/components/Users/shared/styles.scss b/apps/settings/src/components/Users/shared/styles.scss
index 3e4a96811d6..4dfdd58af6d 100644
--- a/apps/settings/src/components/Users/shared/styles.scss
+++ b/apps/settings/src/components/Users/shared/styles.scss
@@ -50,7 +50,7 @@
 		}
 
 		&--username {
-			padding-left: calc(var(--default-grid-baseline) * 3);
+			padding-inline-start: calc(var(--default-grid-baseline) * 3);
 		}
 
 		&--avatar {
diff --git a/apps/settings/src/components/WebAuthn/AddDevice.vue b/apps/settings/src/components/WebAuthn/AddDevice.vue
index f478da0dbb7..6c0b1eacde8 100644
--- a/apps/settings/src/components/WebAuthn/AddDevice.vue
+++ b/apps/settings/src/components/WebAuthn/AddDevice.vue
@@ -179,8 +179,7 @@ export default {
 .webauthn-loading {
 	display: inline-block;
 	vertical-align: sub;
-	margin-inline-start: 2px;
-	margin-inline-end: 2px;
+	margin-inline: 2px;
 }
 
 .new-webauthn-device {
diff --git a/apps/user_ldap/js/vendor/ui-multiselect/src/jquery.multiselect.js b/apps/user_ldap/js/vendor/ui-multiselect/src/jquery.multiselect.js
index 6480e43f9f9..4dc6ab5ffbe 100644
--- a/apps/user_ldap/js/vendor/ui-multiselect/src/jquery.multiselect.js
+++ b/apps/user_ldap/js/vendor/ui-multiselect/src/jquery.multiselect.js
@@ -573,7 +573,7 @@ $.widget("ech.multiselect", {
 		} else {
 			menu.css({
 				top: pos.top + button.outerHeight(),
-				left: pos.left
+				'inset-inline-start': pos.left
 			});
 		}
 
diff --git a/apps/user_status/src/components/SetStatusModal.vue b/apps/user_status/src/components/SetStatusModal.vue
index ce4493541d6..f1b2dc1b5a1 100644
--- a/apps/user_status/src/components/SetStatusModal.vue
+++ b/apps/user_status/src/components/SetStatusModal.vue
@@ -370,7 +370,7 @@ export default {
 	.status-buttons {
 		display: flex;
 		padding: 3px;
-		padding-left:0;
+		padding-inline-start:0;
 		gap: 3px;
 	}
 }
diff --git a/apps/weather_status/src/App.vue b/apps/weather_status/src/App.vue
index 437a6c1e01a..dce45f5872b 100644
--- a/apps/weather_status/src/App.vue
+++ b/apps/weather_status/src/App.vue
@@ -585,7 +585,7 @@ export default {
 		border: 0;
 		border-radius: var(--border-radius-pill);
 		font-weight: normal;
-		padding-left: 40px;
+		padding-inline-start: 40px;
 
 		&.icon-loading-small {
 			&::after {
diff --git a/apps/workflowengine/src/components/Check.vue b/apps/workflowengine/src/components/Check.vue
index 8cc22fc85a1..4661695f4c2 100644
--- a/apps/workflowengine/src/components/Check.vue
+++ b/apps/workflowengine/src/components/Check.vue
@@ -165,7 +165,7 @@ export default {
 		flex-wrap: wrap;
 		align-items: flex-start; // to not stretch components vertically
 		width: 100%;
-		padding-right: 20px;
+		padding-inline-end: 20px;
 
 		& > *:not(.close) {
 			width: 180px;
diff --git a/apps/workflowengine/src/components/Rule.vue b/apps/workflowengine/src/components/Rule.vue
index 0056042c118..234debdde34 100644
--- a/apps/workflowengine/src/components/Rule.vue
+++ b/apps/workflowengine/src/components/Rule.vue
@@ -215,7 +215,7 @@ export default {
 	.rule {
 		display: flex;
 		flex-wrap: wrap;
-		border-left: 5px solid var(--color-primary-element);
+		border-inline-start: 5px solid var(--color-primary-element);
 
 		.trigger,
 		.action {
@@ -229,7 +229,7 @@ export default {
 		}
 		.icon-confirm {
 			background-position: right 27px;
-			padding-right: 20px;
+			padding-inline-end: 20px;
 			margin-inline-end: 20px;
 		}
 	}
@@ -241,7 +241,7 @@ export default {
 			min-width: 50px;
 			text-align: end;
 			color: var(--color-text-maxcontrast);
-			padding-right: 10px;
+			padding-inline-end: 10px;
 			padding-top: 6px;
 		}
 		.multiselect {
@@ -259,7 +259,7 @@ export default {
 	.check--add {
 		background-position: 7px center;
 		background-color: transparent;
-		padding-left: 6px;
+		padding-inline-start: 6px;
 		margin: 0;
 		width: 180px;
 		border-radius: var(--border-radius);
diff --git a/apps/workflowengine/src/styles/operation.scss b/apps/workflowengine/src/styles/operation.scss
index ea54e605c6e..e82ded827fa 100644
--- a/apps/workflowengine/src/styles/operation.scss
+++ b/apps/workflowengine/src/styles/operation.scss
@@ -7,10 +7,9 @@
 	flex-wrap: wrap;
 	flex-direction: column;
 	flex-grow: 1;
-	margin-inline-start: -1px;
 	padding: 10px;
 	border-radius: var(--border-radius-large);
-	margin-inline-end: 20px;
+	margin-inline: -1px 20px;
 	margin-bottom: 20px;
 }
 .actions__item .icon {
diff --git a/core/css/apps.scss b/core/css/apps.scss
index 3441db7f65d..25c0b8164bc 100644
--- a/core/css/apps.scss
+++ b/core/css/apps.scss
@@ -433,7 +433,7 @@ kbd {
 
 			/* Needed for IE11; otherwise the button appears to the right of the
 			 * link. */
-			left: 0;
+			inset-inline-start: 0;
 
 			&:focus-visible {
 				opacity: 1;
@@ -549,8 +549,7 @@ kbd {
 	 * Editable entries
 	 */
 	.app-navigation-entry-edit {
-		padding-inline-start: 5px;
-		padding-inline-end: 5px;
+		padding-inline: 5px;
 		display: block;
 		width: calc(100% - 1px); /* Avoid border overlapping */
 		transition: opacity 250ms ease-in-out;
@@ -1061,7 +1060,7 @@ $outter-margin: math.div($popoveritem-height - $popovericon-size, 2);
 	z-index: 110;
 	margin: 5px;
 	margin-top: -5px;
-	right: 0;
+	inset-inline-end: 0;
 	filter: drop-shadow(0 1px 3px var(--color-box-shadow));
 	display: none;
 	will-change: filter;
@@ -1086,21 +1085,19 @@ $outter-margin: math.div($popoveritem-height - $popovericon-size, 2);
 	/* Center the popover */
 	&.menu-center {
 		transform: translateX(50%);
-		right: 50%;
+		inset-inline-end: 50%;
 		margin-inline-end: 0;
 		&:after {
-			right: 50%;
+			inset-inline-end: 50%;
 			transform: translateX(50%);
 		}
 	}
 	/* Align the popover to the left */
 	&.menu-left {
-		right: auto;
-		left: 0;
+		inset-inline: 0 auto;
 		margin-inline-end: 0;
 		&:after {
-			left: 6px;
-			right: auto;
+			inset-inline: 6px auto;
 		}
 	}
 
@@ -1447,13 +1444,12 @@ $outter-margin: math.div($popoveritem-height - $popovericon-size, 2);
 		.app-content-list-item-line-one,
 		.app-content-list-item-line-two {
 			display: block;
-			padding-inline-start: 50px;
+			padding-inline: 50px 10px;
 			white-space: nowrap;
 			overflow: hidden;
 			text-overflow: ellipsis;
 			order: 1;
 			flex: 1 1 0px;
-			padding-inline-end: 10px;
 			cursor: pointer;
 		}
 
diff --git a/core/css/guest.scss b/core/css/guest.scss
index a4bafba3b89..d8afbd58c92 100644
--- a/core/css/guest.scss
+++ b/core/css/guest.scss
@@ -255,8 +255,7 @@ input[type='email'] {
 	cursor: text;
 	font-family: inherit;
 	font-weight: normal;
-	margin-inline-start: 0;
-	margin-inline-end: 0;
+	margin-inline: 0;
 }
 input[type='password'].password-with-toggle, input[type='text'].password-with-toggle {
 	width: 238px;
@@ -587,8 +586,7 @@ p.info {
 	.appList {
 		list-style: disc;
 		text-align: start;
-		margin-inline-start: 25px;
-		margin-inline-end: 25px;
+		margin-inline: 25px;
 	}
 
 	a.update-show-detailed {
diff --git a/core/css/inputs.scss b/core/css/inputs.scss
index f49dd46c6f7..34ccc4331ff 100644
--- a/core/css/inputs.scss
+++ b/core/css/inputs.scss
@@ -610,7 +610,8 @@ div.select2-drop {
 body[dir='ltr'] div.select2-drop .select2-search input {
 	background-position: right center !important;
 }
-body[dir='ltr'] div.select2-drop .select2-search input {
+
+body[dir='rtl'] div.select2-drop .select2-search input {
 	background-position: left center !important;
 }
 
diff --git a/core/css/styles.scss b/core/css/styles.scss
index eb766b8844b..76cb6e2c573 100644
--- a/core/css/styles.scss
+++ b/core/css/styles.scss
@@ -243,18 +243,18 @@ body {
 }
 
 /* Show password toggle */
-
-#show, #dbpassword {
+#show,
+#dbpassword {
 	position: absolute;
 	inset-inline-end: 1em;
 	top: .8em;
-}
-
-/* Cannot use inline-start and :dir to support Samsung Internet */ 
-body[dir='ltr'] #show, #dbpassword {
+	/* Cannot use inline-start and :dir to support Samsung Internet */ 
 	float: right;
 }
-body[dir='ltr'] #show, #dbpassword {
+
+body[dir='rtl'] #show,
+body[dir='rtl'] #dbpassword {
+	/* Cannot use inline-start and :dir to support Samsung Internet */ 
 	float: left;
 }
 
@@ -543,7 +543,8 @@ body[dir='ltr'] .ui-widget.ui-datepicker .ui-widget-header .ui-icon {
 		background: url("../img/actions/arrow-left.svg");
 	}
 }
-body[dir='ltr'] .ui-widget.ui-datepicker .ui-widget-header .ui-icon {
+
+body[dir='rtl'] .ui-widget.ui-datepicker .ui-widget-header .ui-icon {
 	&.ui-icon-circle-triangle-e {
 		background: url("../img/actions/arrow-left.svg");
 	}
diff --git a/core/css/systemtags.scss b/core/css/systemtags.scss
index 52de3af83f1..722425d6d02 100644
--- a/core/css/systemtags.scss
+++ b/core/css/systemtags.scss
@@ -8,8 +8,7 @@
 	.select2-result-label {
 		.checkmark {
 			visibility: hidden;
-			margin-inline-start: -5px;
-			margin-inline-end: 5px;
+			margin-inline: -5px 5px;
 			padding: 4px;
 		}
 		.new-item .systemtags-actions {
diff --git a/core/css/tooltip.scss b/core/css/tooltip.scss
index c1c4173395e..7f8b76eea06 100644
--- a/core/css/tooltip.scss
+++ b/core/css/tooltip.scss
@@ -14,7 +14,6 @@
     line-break: auto;
     line-height: 1.6;
     text-align: start;
-    text-align: start;
     text-decoration: none;
     text-shadow: none;
     text-transform: none;
@@ -39,8 +38,8 @@
     }
     &.top .tooltip-arrow,
     &[x-placement^='top'] {
-        left: 50%;
-        margin-left: -10px;
+        inset-inline-start: 50%;
+        margin-inline-start: -10px;
     }
     &.bottom,
     &[x-placement^='bottom'] {
@@ -49,26 +48,26 @@
     }
     &.right,
     &[x-placement^='right'] {
-        margin-left: 3px;
+        margin-inline-start: 3px;
         padding: 0 10px;
         .tooltip-arrow {
             top: 50%;
-            left: 0;
+            inset-inline-start: 0;
             margin-top: -10px;
             border-width: 10px 10px 10px 0;
-            border-right-color: var(--color-main-background);
+            border-inline-end-color: var(--color-main-background);
         }
     }
     &.left,
     &[x-placement^='left'] {
-        margin-left: -3px;
+        margin-inline-start: -3px;
         padding: 0 5px;
         .tooltip-arrow {
             top: 50%;
-            right: 0;
+            inset-inline-end: 0;
             margin-top: -10px;
             border-width: 10px 0 10px 10px;
-            border-left-color: var(--color-main-background);
+            border-inline-start-color: var(--color-main-background);
         }
     }
     /* TOP */
@@ -83,11 +82,11 @@
         }
     }
     &.top-left .tooltip-arrow {
-        right: 10px;
+        inset-inline-end: 10px;
         margin-bottom: -10px;
     }
     &.top-right .tooltip-arrow {
-        left: 10px;
+        inset-inline-start: 10px;
         margin-bottom: -10px;
     }
     /* BOTTOM */
@@ -103,15 +102,15 @@
     }
     &[x-placement^='bottom'] .tooltip-arrow,
     &.bottom .tooltip-arrow {
-        left: 50%;
-        margin-left: -10px;
+        inset-inline-start: 50%;
+        margin-inline-start: -10px;
     }
     &.bottom-left .tooltip-arrow {
-        right: 10px;
+        inset-inline-end: 10px;
         margin-top: -10px;
     }
     &.bottom-right .tooltip-arrow {
-        left: 10px;
+        inset-inline-start: 10px;
         margin-top: -10px;
     }
 }
diff --git a/core/src/components/AppMenuEntry.vue b/core/src/components/AppMenuEntry.vue
index 1bf160f0695..9ea999ad1e0 100644
--- a/core/src/components/AppMenuEntry.vue
+++ b/core/src/components/AppMenuEntry.vue
@@ -77,7 +77,7 @@ watch(() => props.app.name, calculateSize)
 		color: var(--color-background-plain-text);
 		text-align: center;
 		bottom: 0;
-		left: 50%;
+		inset-inline-start: 50%;
 		top: 50%;
 		display: block;
 		transform: translateX(-50%);
@@ -108,7 +108,7 @@ watch(() => props.app.name, calculateSize)
 			height: 5px;
 			border-radius: 3px;
 			background-color: var(--color-background-plain-text);
-			left: 50%;
+			inset-inline-start: 50%;
 			bottom: 8px;
 			display: block;
 			transition: all var(--animation-quick) ease-in-out;
diff --git a/core/src/components/ContactsMenu/Contact.vue b/core/src/components/ContactsMenu/Contact.vue
index a9d4f46d685..d7de04efe17 100644
--- a/core/src/components/ContactsMenu/Contact.vue
+++ b/core/src/components/ContactsMenu/Contact.vue
@@ -100,9 +100,6 @@ export default {
 		}
 	}
 
-	&__avatar-wrapper {
-	}
-
 	&__avatar {
 		display: inherit;
 	}
@@ -167,7 +164,7 @@ export default {
 	}
 
 	.popovermenu::after {
-		right: 2px;
+		inset-inline-end: 2px;
 	}
 }
 </style>
diff --git a/core/src/components/UnifiedSearch/UnifiedSearchLocalSearchBar.vue b/core/src/components/UnifiedSearch/UnifiedSearchLocalSearchBar.vue
index d68466ea91a..44d1d716375 100644
--- a/core/src/components/UnifiedSearch/UnifiedSearchLocalSearchBar.vue
+++ b/core/src/components/UnifiedSearch/UnifiedSearchLocalSearchBar.vue
@@ -154,13 +154,13 @@ function clearAndCloseSearch() {
 		padding-inline: var(--default-grid-baseline);
 	}
 
-	// when open we need to position it absolut to allow overlay the full bar
+	// when open we need to position it absolute to allow overlay the full bar
 	:global(.unified-search-menu:has(.local-unified-search--open)) {
 		position: absolute !important;
 		inset-inline: 0;
 	}
 	// Hide all other entries, especially the user menu as it might leak pixels
-	:global(.header-right:has(.local-unified-search--open) > :not(.unified-search-menu)) {
+	:global(.header-end:has(.local-unified-search--open) > :not(.unified-search-menu)) {
 		display: none;
 	}
 }
diff --git a/core/src/components/login/ResetPassword.vue b/core/src/components/login/ResetPassword.vue
index 0d23e300d0e..254ad4d8e16 100644
--- a/core/src/components/login/ResetPassword.vue
+++ b/core/src/components/login/ResetPassword.vue
@@ -130,7 +130,6 @@ export default {
 	&__link {
 		display: block;
 		font-weight: normal !important;
-		padding-bottom: 1rem;
 		cursor: pointer;
 		font-size: var(--default-font-size);
 		text-align: center;
diff --git a/core/src/components/setup/RecommendedApps.vue b/core/src/components/setup/RecommendedApps.vue
index b8d213ed559..9bab568a924 100644
--- a/core/src/components/setup/RecommendedApps.vue
+++ b/core/src/components/setup/RecommendedApps.vue
@@ -255,7 +255,7 @@ p {
 	}
 
 	.checkbox-radio-switch {
-		margin-left: auto;
+		margin-inline-start: auto;
 		padding: 0 2px;
 	}
 }
diff --git a/core/src/jquery/css/jquery.ocdialog.scss b/core/src/jquery/css/jquery.ocdialog.scss
index 759bf2b1250..a1946bc648f 100644
--- a/core/src/jquery/css/jquery.ocdialog.scss
+++ b/core/src/jquery/css/jquery.ocdialog.scss
@@ -13,7 +13,7 @@
 	box-sizing: border-box;
 	min-width: 200px;
 	top: 50%;
-	left: 50%;
+	inset-inline-start: 50%;
 	transform: translate(-50%, -50%);
 	max-height: calc(100% - 20px);
 	max-width: calc(100% - 20px);
diff --git a/core/src/views/LegacyUnifiedSearch.vue b/core/src/views/LegacyUnifiedSearch.vue
index 265475212bc..8c3b763c16d 100644
--- a/core/src/views/LegacyUnifiedSearch.vue
+++ b/core/src/views/LegacyUnifiedSearch.vue
@@ -746,8 +746,7 @@ $input-padding: 10px;
 
 	&__filters {
 		margin-block: $margin;
-		margin-inline-end: 0;
-		margin-inline-start: math.div($margin, 2);
+		margin-inline: math.div($margin, 2) 0;
 		padding-top: 5px;
 		ul {
 			display: inline-flex;
@@ -762,8 +761,7 @@ $input-padding: 10px;
 
 		// Loading spinner
 		&::after {
-			right: $input-padding;
-			left: auto;
+		inset-inline-start: auto $input-padding;
 		}
 
 		&-input,
@@ -796,7 +794,7 @@ $input-padding: 10px;
 		&-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;
@@ -814,7 +812,7 @@ $input-padding: 10px;
 		}
 
 		&-submit {
-			right: 28px;
+			inset-inline-end: 28px;
 		}
 	}
 
diff --git a/core/src/views/Profile.vue b/core/src/views/Profile.vue
index ff9c7957b90..a513e0caf78 100644
--- a/core/src/views/Profile.vue
+++ b/core/src/views/Profile.vue
@@ -329,7 +329,7 @@ $content-max-width: 640px;
 			}
 
 			.avatardiv__user-status {
-				right: 14px;
+				inset-inline-end: 14px;
 				bottom: 14px;
 				width: 34px;
 				height: 34px;