fix: Adjust more places for logical position

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

4 files changed, 21 insertions, 26 deletions

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;