fix: Adjust more places for logical position

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

14 files changed, 48 insertions, 60 deletions

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;