From 55dd692cd9ec061c31796f8280e3daf264aaa12c Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <opensource@fthiessen.de>
Date: Tue, 20 Aug 2024 19:42:11 +0200
Subject: [PATCH] fix: Adjust more places for logical position

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
---
 apps/dashboard/src/DashboardApp.vue           |  5 ++--
 apps/dav/src/components/AvailabilityForm.vue  |  4 +--
 apps/dav/src/views/CalDavSettings.vue         |  4 +--
 .../src/components/PersonalSettings.vue       |  2 +-
 .../files/src/components/FilesListVirtual.vue | 30 +++++++++----------
 apps/files/src/views/ReferenceFileWidget.vue  |  2 +-
 .../src/actions/sharingStatusAction.scss      |  2 +-
 .../src/components/NewFileRequestDialog.vue   |  2 +-
 .../src/components/SharingEntry.vue           |  2 +-
 .../src/components/SharingEntryInherited.vue  |  2 +-
 .../src/components/SharingEntryLink.vue       |  2 +-
 .../src/components/SharingEntrySimple.vue     |  2 +-
 .../src/views/SharingDetailsTab.vue           | 10 +++----
 apps/oauth2/src/components/OAuthItem.vue      |  2 +-
 apps/settings/src/components/AppList.vue      |  4 +--
 .../src/components/AppList/AppItem.vue        | 12 ++++----
 .../AppStoreDiscover/CarouselType.vue         |  4 +--
 .../components/AppStoreDiscover/PostType.vue  |  4 +--
 .../src/components/AuthTokenSetup.vue         |  4 +--
 .../src/components/AuthTokenSetupDialogue.vue |  2 +-
 .../DeclarativeSection.vue                    |  4 +--
 apps/settings/src/components/Encryption.vue   |  2 +-
 apps/settings/src/components/Markdown.vue     |  6 ++--
 .../src/components/Users/shared/styles.scss   |  2 +-
 .../ui-multiselect/src/jquery.multiselect.js  |  2 +-
 .../src/components/SetStatusModal.vue         |  2 +-
 apps/weather_status/src/App.vue               |  2 +-
 apps/workflowengine/src/components/Check.vue  |  2 +-
 apps/workflowengine/src/components/Rule.vue   |  8 ++---
 core/css/apps.scss                            | 14 ++++-----
 core/css/tooltip.scss                         | 24 +++++++--------
 core/src/components/AppMenuEntry.vue          |  4 +--
 core/src/components/ContactsMenu/Contact.vue  |  5 +---
 .../UnifiedSearchLocalSearchBar.vue           |  2 +-
 core/src/components/setup/RecommendedApps.vue |  2 +-
 core/src/views/LegacyUnifiedSearch.vue        |  8 ++---
 core/src/views/Profile.vue                    |  2 +-
 37 files changed, 92 insertions(+), 100 deletions(-)

diff --git a/apps/dashboard/src/DashboardApp.vue b/apps/dashboard/src/DashboardApp.vue
index b4c761d5bc7b4..4571a130d9f9d 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-top: -6px 0;
+				margin-inline-start: 6px 16px;
 			}
 
 			img {
diff --git a/apps/dav/src/components/AvailabilityForm.vue b/apps/dav/src/components/AvailabilityForm.vue
index fd7ede24ea667..f3a7570325f14 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 c55767dc6affb..b93986a91373c 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 f4f370d6b376c..d3f6e1eaaaba6 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/src/components/FilesListVirtual.vue b/apps/files/src/components/FilesListVirtual.vue
index 5fc0d82411db5..258c61b2feabc 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);
 		}
 
 		// Table footer
@@ -438,7 +438,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);
@@ -591,7 +591,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 {
@@ -771,8 +771,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);
 		}
@@ -806,7 +806,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;
 		}
 	}
@@ -820,7 +820,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 41b5fe730488f..9db346ea35db4 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_sharing/src/actions/sharingStatusAction.scss b/apps/files_sharing/src/actions/sharingStatusAction.scss
index 33366c42be1dd..dee247932e61e 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 893830ca98e44..f482500450815 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 23127a6fe161d..e97ff332422ec 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 9718a08f76374..af2cccbb0df66 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 b65f3c533e9a8..29f5f2ee113fe 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 a7248c685e7d9..a5e4034cfb1cc 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 3b392dfbe02de..3d6f5e6495f49 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 7261674e25298..c22a2f73d747e 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/AppList.vue b/apps/settings/src/components/AppList.vue
index 68df4072ee802..2372b461f5785 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 881be612445b8..e6ba776b06dbe 100644
--- a/apps/settings/src/components/AppList/AppItem.vue
+++ b/apps/settings/src/components/AppList/AppItem.vue
@@ -257,8 +257,8 @@ export default {
 		.app-name--link::after {
 			content: '';
 			position: absolute;
-			left: 0;
-			right: 0;
+			inset-inline-start: 0;
+			inset-inline-end: 0;
 			height: var(--app-item-height);
 		}
 
@@ -271,7 +271,7 @@ export default {
 			.icon-loading-small {
 				display: inline-block;
 				top: 4px;
-				margin-right: 10px;
+				margin-inline-end: 10px;
 			}
 		}
 
@@ -317,10 +317,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 537c3004c0e5c..e657c7ae8005c 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 536609f329f73..512ce9875105a 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 dcff95afd6343..74dd3c2bbed2d 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
index 99ef17dbd6cec..6fa120f64e1c6 100644
--- a/apps/settings/src/components/AuthTokenSetupDialogue.vue
+++ b/apps/settings/src/components/AuthTokenSetupDialogue.vue
@@ -213,7 +213,7 @@ export default {
 
 	.app-name-text-field {
 		height: 44px !important;
-		padding-left: 12px;
+		padding-inline-start: 12px;
 		margin-inline-end: 12px;
 		width: 200px;
 	}
diff --git a/apps/settings/src/components/DeclarativeSettings/DeclarativeSection.vue b/apps/settings/src/components/DeclarativeSettings/DeclarativeSection.vue
index a4e01bcef7de0..1c739a54412a7 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 c17ef57cc7f03..72b597c61d366 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 8f2800825a356..f89ebd2f2813a 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,8 +177,8 @@ 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;
diff --git a/apps/settings/src/components/Users/shared/styles.scss b/apps/settings/src/components/Users/shared/styles.scss
index 3e4a96811d600..4dfdd58af6d9b 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/user_ldap/js/vendor/ui-multiselect/src/jquery.multiselect.js b/apps/user_ldap/js/vendor/ui-multiselect/src/jquery.multiselect.js
index 6480e43f9f91e..4dc6ab5ffbe4a 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 e91493414fa0b..6a5128aaac853 100644
--- a/apps/user_status/src/components/SetStatusModal.vue
+++ b/apps/user_status/src/components/SetStatusModal.vue
@@ -350,7 +350,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 437a6c1e01afa..dce45f5872b22 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 8cc22fc85a1a2..4661695f4c2df 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 0056042c118df..234debdde3451 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/core/css/apps.scss b/core/css/apps.scss
index 3441db7f65d30..c771b8fe7c6bd 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;
@@ -1061,7 +1061,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 +1086,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;
 		}
 	}
 
diff --git a/core/css/tooltip.scss b/core/css/tooltip.scss
index c1c4173395eeb..c532528485c88 100644
--- a/core/css/tooltip.scss
+++ b/core/css/tooltip.scss
@@ -39,8 +39,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,11 +49,11 @@
     }
     &.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);
@@ -61,11 +61,11 @@
     }
     &.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);
@@ -83,11 +83,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 +103,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 1bf160f06952f..9ea999ad1e0c5 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 a9d4f46d68507..d7de04efe172a 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 d68466ea91ae2..a273e87875896 100644
--- a/core/src/components/UnifiedSearch/UnifiedSearchLocalSearchBar.vue
+++ b/core/src/components/UnifiedSearch/UnifiedSearchLocalSearchBar.vue
@@ -160,7 +160,7 @@ function clearAndCloseSearch() {
 		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/setup/RecommendedApps.vue b/core/src/components/setup/RecommendedApps.vue
index b8d213ed5593b..9bab568a924e0 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/views/LegacyUnifiedSearch.vue b/core/src/views/LegacyUnifiedSearch.vue
index 265475212bc01..63bf70d6002de 100644
--- a/core/src/views/LegacyUnifiedSearch.vue
+++ b/core/src/views/LegacyUnifiedSearch.vue
@@ -762,8 +762,8 @@ $input-padding: 10px;
 
 		// Loading spinner
 		&::after {
-			right: $input-padding;
-			left: auto;
+		inset-inline-end: $input-padding;
+		inset-inline-start: auto;
 		}
 
 		&-input,
@@ -796,7 +796,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 +814,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 ff9c7957b9023..a513e0caf78a3 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;