From d8b08fca5ccb33b3a0ada87f8d45b37db7d0fcd8 Mon Sep 17 00:00:00 2001
From: "Enjeck C." <patrathewhiz@gmail.com>
Date: Sun, 7 Sep 2025 10:06:04 +0100
Subject: [PATCH] fix: stylelint

Signed-off-by: Enjeck C. <patrathewhiz@gmail.com>
---
 css/grid.css                                  | 48 +++++++++----------
 src/App.vue                                   | 10 ++--
 .../main/partials/ColumnTypeSelection.vue     |  4 +-
 .../editViewPartials/SelectedViewColumns.vue  |  9 ++--
 .../editViewPartials/filter/FilterEntry.vue   |  3 +-
 .../editViewPartials/filter/FilterGroup.vue   |  6 +--
 .../sort/DeletedSortEntry.vue                 |  2 +-
 .../editViewPartials/sort/SortEntry.vue       |  2 +-
 src/modules/main/sections/Dashboard.vue       | 10 ++--
 src/modules/main/sections/ElementTitle.vue    |  6 +--
 src/modules/modals/CreateColumn.vue           |  6 +--
 src/modules/modals/CreateContext.vue          |  2 +-
 src/modules/modals/CreateRow.vue              |  2 +-
 src/modules/modals/CreateTable.vue            |  2 +-
 src/modules/modals/EditColumn.vue             |  2 +-
 src/modules/modals/EditContext.vue            |  2 +-
 src/modules/modals/EditTable.vue              |  2 +-
 src/modules/modals/Import.vue                 |  4 +-
 src/modules/modals/ImportPreview.vue          |  9 ++--
 src/modules/modals/ViewSettings.vue           |  2 +-
 .../partials/NavigationTableItem.vue          | 10 ++--
 src/modules/sidebar/partials/ShareList.vue    |  2 +-
 .../sidebar/sections/SidebarIntegration.vue   |  4 +-
 src/pages/Context.vue                         |  7 +--
 src/pages/Table.vue                           |  2 +-
 src/pages/View.vue                            |  1 +
 src/shared/components/ncTable/NcTable.vue     |  2 +-
 .../ncTable/partials/FilterLabel.vue          |  8 ++--
 .../ncTable/partials/LinkWidget.vue           |  2 +-
 .../ncTable/partials/RichEditor.vue           |  2 +-
 .../ncTable/partials/TableCellDateTime.vue    |  6 +--
 .../ncTable/partials/TableCellHtml.vue        |  2 +-
 .../ncTable/partials/TableCellLink.vue        |  2 +-
 .../partials/TableCellMultiSelection.vue      |  4 +-
 .../ncTable/partials/TableCellNumber.vue      |  4 +-
 .../ncTable/partials/TableCellProgress.vue    |  4 +-
 .../ncTable/partials/TableCellSelection.vue   |  2 +-
 .../ncTable/partials/TableCellStars.vue       |  2 +-
 .../ncTable/partials/TableCellUsergroup.vue   |  4 +-
 .../ncTable/partials/TableHeader.vue          | 10 ++--
 .../partials/TableHeaderColumnOptions.vue     |  2 +-
 .../ncTable/partials/TiptapMenuBar.vue        | 12 ++---
 .../forms/SelectionForm.vue                   |  4 +-
 .../forms/SelectionMultiForm.vue              |  4 +-
 .../columnTypePartials/forms/TextLinkForm.vue |  2 +-
 .../forms/UsergroupForm.vue                   |  2 +-
 .../rowTypePartials/DatetimeDateForm.vue      |  2 +-
 .../partials/rowTypePartials/DatetimeForm.vue |  6 +--
 .../rowTypePartials/DatetimeTimeForm.vue      |  6 +--
 .../partials/rowTypePartials/NumberForm.vue   |  4 +-
 .../rowTypePartials/NumberProgressForm.vue    |  4 +-
 .../rowTypePartials/RowFormWrapper.vue        |  2 +-
 .../rowTypePartials/SelectionCheckForm.vue    |  4 +-
 .../rowTypePartials/SelectionForm.vue         |  4 +-
 .../rowTypePartials/SelectionMultiForm.vue    |  4 +-
 .../partials/rowTypePartials/TextLineForm.vue |  4 +-
 .../partials/rowTypePartials/TextRichForm.vue |  2 +-
 .../ncTable/sections/CustomTable.vue          | 22 ++++-----
 .../components/ncTable/sections/Options.vue   |  8 ++--
 src/styles/smart-picker.scss                  | 10 ++--
 src/views/ContentReferenceWidget.vue          |  4 +-
 src/views/LinkReferenceWidget.vue             |  2 +-
 src/views/partials/SearchAndSelectOption.vue  |  2 +-
 src/views/sections/Search.vue                 |  2 +-
 64 files changed, 160 insertions(+), 171 deletions(-)

diff --git a/css/grid.css b/css/grid.css
index 883a75e90d..5c7f21dca3 100644
--- a/css/grid.css
+++ b/css/grid.css
@@ -9,7 +9,7 @@
 
 .row.first-row {
 	padding-top: calc(var(--default-grid-baseline) * 4);
-	padding-left: 60px;
+	padding-inline-start: 60px;
 	/*width: calc(100% - 45px);*/
 	width: 100%;
 	padding-bottom: 20px;
@@ -47,7 +47,7 @@
 .col-4 { width: calc(100% - 20px); }
 
 .row [class^='col-'], .row [class^='fix-col-'] {
-	float: left;
+	float: inline-start;
 	position: relative;
 	/*
     padding-right: 20px;
@@ -56,65 +56,61 @@
 }
 
 .floatReverse [class*='col-'] {
-	float: right;
+	float: inline-end;
 }
 
 /* ===================== SPACES for rows OR columns =================00 */
 .row .space-L {
-	margin-left: 20px;
+	margin-inline-start: 20px;
 }
 
 .row.space-L {
-	margin-left: 20px;
+	margin-inline-start: 20px;
 	width: calc(100% - 20px);
 }
 
 .row .space-L-small {
-	margin-left: 8px;
+	margin-inline-start: 8px;
 }
 
 .row.space-L-small {
-	margin-left: 8px;
+	margin-inline-start: 8px;
 	width: calc(100% - 8px);
 }
 
 .row .space-R {
-	margin-right: 20px;
+	margin-inline-end: 20px;
 }
 
 .row.space-R {
-	margin-right: 20px;
+	margin-inline-end: 20px;
 	width: calc(100% - 20px);
 }
 
 .row .space-R-small {
-	margin-right: 8px;
+	margin-inline-end: 8px;
 }
 
 .row.space-R-small {
-	margin-right: 8px;
+	margin-inline-end: 8px;
 	width: calc(100% - 8px);
 }
 
 .row .space-LR {
-	margin-left: 20px;
-	margin-right: 20px;
+	margin-inline: 20px;
 }
 
 .row.space-LR {
-	margin-left: 20px;
-	margin-right: 20px;
+	margin-inline: 20px;
 	width: calc(100% - 40px);
 }
 
 .row .space-LR-small {
-	margin-left: 8px;
-	margin-right: 8px;
+	margin-inline: 8px;
 }
 
 .row.space-LR-small {
-	margin-left: 8px;
-	margin-right: 8px;
+	margin-inline: 8px;
 	width: calc(100% - 16px);
 }
 
@@ -145,7 +141,7 @@
 /* put two or more elements (buttons) to the left and right */
 .col-stretch-elements {
 	justify-content: space-between;
-	padding-right: 0;
+	padding-inline-end: 0;
 	width: 100%;
 }
 
@@ -159,14 +155,14 @@
 .fix-col-4 { width: 100%; }
 
 [class*='fix-col-'] {
-	float: left;
+	float: inline-start;
 	position: relative;
 	padding: 0;
 	display: flex;
 }
 
 .floatReverse [class*='fix-col-'] {
-	float: right;
+	float: inline-end;
 }
 
 /* ===== BOXES ========================== */
@@ -184,11 +180,11 @@
 }
 
 [class^='box-'] {
-	margin-right: 20px;
+	margin-inline-end: 20px;
 	margin-bottom: 20px;
 	background-color: var(--color-background-darker);
 	padding: 15px;
-	float: left;
+	float: inline-start;
 	position: relative;
 }
 
@@ -221,8 +217,8 @@
 	.hide-xs {
 		display: none;
 	}
-	.col-1, .fix-col-1 { width: 100%; padding-left: 0; padding-right: 0; }
-	.col-3, .fix-col-3 { width: 100%; padding-left: 0; padding-right: 0; }
+	.col-1, .fix-col-1 { width: 100%; padding-inline: 0; }
+	.col-3, .fix-col-3 { width: 100%; padding-inline: 0; }
 }
 
 input, textarea {
diff --git a/src/App.vue b/src/App.vue
index 34903116a7..28da579124 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -164,7 +164,7 @@ export default {
 
 	.sidebar-icon {
 		position: absolute;
-		right: 5px;
+		inset-inline-end: 5px;
 		top: 5px;
 	}
 
@@ -232,7 +232,7 @@ button[class^='icon-'] {
 
 .icon-left {
 	background-position: left;
-	padding-left: 22px;
+	padding-inline-start: 22px;
 }
 
 .mandatory {
@@ -241,7 +241,7 @@ button[class^='icon-'] {
 
 .v-popover button {
 	height: 25px;
-	margin-left: 10px;
+	margin-inline-start: 10px;
 	background-color: transparent;
 	border: none;
 }
@@ -251,7 +251,7 @@ button[class^='icon-'] {
 }
 
 .v-popper__inner table td {
-	padding-right: 15px;
+	padding-inline-end: 15px;
 }
 
 .error {
@@ -271,7 +271,7 @@ button[class^='icon-'] {
 }
 
 .align-right {
-	text-align: right;
+	text-align: end;
 }
 
 .inline-flex {
diff --git a/src/modules/main/partials/ColumnTypeSelection.vue b/src/modules/main/partials/ColumnTypeSelection.vue
index 649d87e76b..71536b3c7c 100644
--- a/src/modules/main/partials/ColumnTypeSelection.vue
+++ b/src/modules/main/partials/ColumnTypeSelection.vue
@@ -153,11 +153,11 @@ export default {
 }
 
 .typeSelections span {
-	padding-right: 21px;
+	padding-inline-end: 21px;
 }
 
 .multiSelectOptionLabel {
-	padding-left: calc(var(--default-grid-baseline) * 1);
+	padding-inline-start: calc(var(--default-grid-baseline) * 1);
 }
 
 .icon-label-container {
diff --git a/src/modules/main/partials/editViewPartials/SelectedViewColumns.vue b/src/modules/main/partials/editViewPartials/SelectedViewColumns.vue
index 5bba4541f2..b4d65950f4 100644
--- a/src/modules/main/partials/editViewPartials/SelectedViewColumns.vue
+++ b/src/modules/main/partials/editViewPartials/SelectedViewColumns.vue
@@ -155,7 +155,7 @@ export default {
 }
 
 .display-checkbox {
-	padding-right: calc(var(--default-grid-baseline) * 4);
+	padding-inline-end: calc(var(--default-grid-baseline) * 4);
 }
 
 :deep(.modal-container) {
@@ -181,8 +181,7 @@ export default {
 }
 
 :deep(.checkbox-radio-switch__icon) {
-	margin-right: 0 !important;
-	margin-left: 0 !important;
+	margin-inline: 0 !important;
 }
 
 .selected-columns-wrapper {
@@ -191,7 +190,7 @@ export default {
 }
 
 .move-button {
-	padding-right: 10px !important;
+	padding-inline-end: 10px !important;
 	cursor: move !important;
 }
 
@@ -201,7 +200,7 @@ export default {
 
 .meta-info {
 	font-style: italic;
-	padding-left:  calc(var(--default-grid-baseline) * 1);
+	padding-inline-start:  calc(var(--default-grid-baseline) * 1);
 	color: var(--color-info);
 }
 
diff --git a/src/modules/main/partials/editViewPartials/filter/FilterEntry.vue b/src/modules/main/partials/editViewPartials/filter/FilterEntry.vue
index 7b35eef3f6..19f6a14ed8 100644
--- a/src/modules/main/partials/editViewPartials/filter/FilterEntry.vue
+++ b/src/modules/main/partials/editViewPartials/filter/FilterEntry.vue
@@ -208,8 +208,7 @@ export default {
 	}
 
 	.actions button {
-		margin-right: calc(var(--default-grid-baseline) * 2);
-		margin-left: auto;
+		margin-inline: auto calc(var(--default-grid-baseline) * 2);
 		height: 44px;
 	}
 
diff --git a/src/modules/main/partials/editViewPartials/filter/FilterGroup.vue b/src/modules/main/partials/editViewPartials/filter/FilterGroup.vue
index f118f40db8..3adc8c6fd9 100644
--- a/src/modules/main/partials/editViewPartials/filter/FilterGroup.vue
+++ b/src/modules/main/partials/editViewPartials/filter/FilterGroup.vue
@@ -93,12 +93,12 @@ export default {
 <style>
 
 .group-text {
-	padding-left: calc(var(--default-grid-baseline) * 2);
+	padding-inline-start: calc(var(--default-grid-baseline) * 2);
 }
 
 .filter-group {
-	border-left: 6px solid var(--color-primary) !important;
-	padding-left: calc(var(--default-grid-baseline) * 2);
+	border-inline-start: 6px solid var(--color-primary) !important;
+	padding-inline-start: calc(var(--default-grid-baseline) * 2);
 }
 
 .locallyAdded {
diff --git a/src/modules/main/partials/editViewPartials/sort/DeletedSortEntry.vue b/src/modules/main/partials/editViewPartials/sort/DeletedSortEntry.vue
index 47cfab4e57..693a24c11e 100644
--- a/src/modules/main/partials/editViewPartials/sort/DeletedSortEntry.vue
+++ b/src/modules/main/partials/editViewPartials/sort/DeletedSortEntry.vue
@@ -138,7 +138,7 @@ export default {
 }
 
 .mode-icon {
-	padding-right: calc(var(--default-grid-baseline) * 2);
+	padding-inline-end: calc(var(--default-grid-baseline) * 2);
 }
 
 :deep(.checkbox-radio-switch--button-variant .checkbox-radio-switch__label) {
diff --git a/src/modules/main/partials/editViewPartials/sort/SortEntry.vue b/src/modules/main/partials/editViewPartials/sort/SortEntry.vue
index fbe2a55c78..945f12df8a 100644
--- a/src/modules/main/partials/editViewPartials/sort/SortEntry.vue
+++ b/src/modules/main/partials/editViewPartials/sort/SortEntry.vue
@@ -135,7 +135,7 @@ export default {
 }
 
 .mode-icon {
-	padding-right: calc(var(--default-grid-baseline) * 2);
+	padding-inline-end: calc(var(--default-grid-baseline) * 2);
 }
 
 :deep(.checkbox-radio-switch--button-variant .checkbox-radio-switch__label) {
diff --git a/src/modules/main/sections/Dashboard.vue b/src/modules/main/sections/Dashboard.vue
index 7690fb4f16..a063ec2a6c 100644
--- a/src/modules/main/sections/Dashboard.vue
+++ b/src/modules/main/sections/Dashboard.vue
@@ -286,7 +286,7 @@ export default {
 
 .table-dashboard {
 	display: sticky;
-	left: 0;
+	inset-inline-start: 0;
 }
 
 .table {
@@ -301,16 +301,16 @@ export default {
 
 .table th,
 .table td {
-	padding-right: calc(var(--default-grid-baseline) * 4);
+	padding-inline-end: calc(var(--default-grid-baseline) * 4);
 	padding-top: calc(var(--default-grid-baseline) * 1);
 	padding-bottom: calc(var(--default-grid-baseline) * 1);
-	text-align: left;
+	text-align: start;
 	align-items: center;
 }
 
 .table th:last-child,
 .table td:last-child {
-	border-right: none;
+	border-inline-end: none;
 }
 
 .table td:first-child {
@@ -336,7 +336,7 @@ td.actions {
 }
 
 td.actions button {
-	margin-left: calc(var(--default-grid-baseline) * 1);
+	margin-inline-start: calc(var(--default-grid-baseline) * 1);
 }
 
 tr:hover{
diff --git a/src/modules/main/sections/ElementTitle.vue b/src/modules/main/sections/ElementTitle.vue
index fa7ca4ee1a..05039d75f1 100644
--- a/src/modules/main/sections/ElementTitle.vue
+++ b/src/modules/main/sections/ElementTitle.vue
@@ -91,7 +91,7 @@ export default {
 
 .row.first-row {
 	position: sticky;
-	left: 0;
+	inset-inline-start: 0;
 	top: 0;
 	z-index: 15;
 	background-color: var(--color-main-background);
@@ -99,12 +99,12 @@ export default {
 }
 
 .user-bubble {
-	padding-left: calc(var(--default-grid-baseline) * 2);
+	padding-inline-start: calc(var(--default-grid-baseline) * 2);
 }
 
 .info {
 	display: inline-flex;
-	margin-left: calc(var(--default-grid-baseline) * 2);
+	margin-inline-start: calc(var(--default-grid-baseline) * 2);
 	align-items: center;
 	color: var(--color-text-maxcontrast);
 }
diff --git a/src/modules/modals/CreateColumn.vue b/src/modules/modals/CreateColumn.vue
index aedcbdf8de..af607f7ffc 100644
--- a/src/modules/modals/CreateColumn.vue
+++ b/src/modules/modals/CreateColumn.vue
@@ -432,7 +432,7 @@ export default {
 <style lang="scss" scoped>
 
 .padding-right {
-	padding-right: calc(var(--default-grid-baseline) * 3);
+	padding-inline-end: calc(var(--default-grid-baseline) * 3);
 }
 
 .typeSelections {
@@ -441,11 +441,11 @@ export default {
 }
 
 .typeSelections span {
-	padding-right: 21px;
+	padding-inline-end: 21px;
 }
 
 .multiSelectOptionLabel {
-	padding-left: calc(var(--default-grid-baseline) * 1);
+	padding-inline-start: calc(var(--default-grid-baseline) * 1);
 }
 
 </style>
diff --git a/src/modules/modals/CreateContext.vue b/src/modules/modals/CreateContext.vue
index b85988790f..245878a4cc 100644
--- a/src/modules/modals/CreateContext.vue
+++ b/src/modules/modals/CreateContext.vue
@@ -198,7 +198,7 @@ export default {
 
 <style lang="scss" scoped>
 .modal__content {
-	padding-right: 0 !important;
+	padding-inline-end: 0 !important;
 
 	.content-emoji {
 		display: inline-flex;
diff --git a/src/modules/modals/CreateRow.vue b/src/modules/modals/CreateRow.vue
index 1a9d424a00..3866b229d1 100644
--- a/src/modules/modals/CreateRow.vue
+++ b/src/modules/modals/CreateRow.vue
@@ -205,7 +205,7 @@ export default {
 }
 
 .padding-right {
-	padding-right: calc(var(--default-grid-baseline) * 3);
+	padding-inline-end: calc(var(--default-grid-baseline) * 3);
 }
 
 </style>
diff --git a/src/modules/modals/CreateTable.vue b/src/modules/modals/CreateTable.vue
index 01a3232d4d..0e5e7845db 100644
--- a/src/modules/modals/CreateTable.vue
+++ b/src/modules/modals/CreateTable.vue
@@ -239,7 +239,7 @@ export default {
 }
 
 .modal__content {
-	padding-right: 0 !important;
+	padding-inline-end: 0 !important;
 	.content-emoji {
 		display: inline-flex;
 		align-items: center;
diff --git a/src/modules/modals/EditColumn.vue b/src/modules/modals/EditColumn.vue
index 5d20f82f16..c17e1882c9 100644
--- a/src/modules/modals/EditColumn.vue
+++ b/src/modules/modals/EditColumn.vue
@@ -220,7 +220,7 @@ export default {
 }
 
 .button-padding-right {
-	padding-right: calc(var(--default-grid-baseline) * 2)
+	padding-inline-end: calc(var(--default-grid-baseline) * 2)
 }
 
 .last-edit-info {
diff --git a/src/modules/modals/EditContext.vue b/src/modules/modals/EditContext.vue
index 07b5eb5b45..6c74f0007a 100644
--- a/src/modules/modals/EditContext.vue
+++ b/src/modules/modals/EditContext.vue
@@ -285,7 +285,7 @@ export default {
 }
 
 .right-additional-button>button {
-	margin-left: calc(var(--default-grid-baseline) * 3);
+	margin-inline-start: calc(var(--default-grid-baseline) * 3);
 }
 
 :deep(.element-description) {
diff --git a/src/modules/modals/EditTable.vue b/src/modules/modals/EditTable.vue
index a068fd0778..38125313d3 100644
--- a/src/modules/modals/EditTable.vue
+++ b/src/modules/modals/EditTable.vue
@@ -189,7 +189,7 @@ export default {
 }
 
 .right-additional-button > button {
-	margin-left: calc(var(--default-grid-baseline) * 3);
+	margin-inline-start: calc(var(--default-grid-baseline) * 3);
 }
 
 :deep(.element-description) {
diff --git a/src/modules/modals/Import.vue b/src/modules/modals/Import.vue
index 45bae50144..1e05d97edd 100644
--- a/src/modules/modals/Import.vue
+++ b/src/modules/modals/Import.vue
@@ -487,7 +487,7 @@ export default {
 
 	.slot button {
 		min-width: fit-content;
-		margin-right: calc(var(--default-grid-baseline) * 3);
+		margin-inline-end: calc(var(--default-grid-baseline) * 3);
 	}
 
 	:deep(.empty-content p) {
@@ -507,7 +507,7 @@ export default {
 		align-items: center;
 		justify-content: center;
 		gap: 12px;
-		padding-left: 12px;
+		padding-inline-start: 12px;
 		padding-bottom: 16px;
 	}
 
diff --git a/src/modules/modals/ImportPreview.vue b/src/modules/modals/ImportPreview.vue
index e762d567ab..c670a2317f 100644
--- a/src/modules/modals/ImportPreview.vue
+++ b/src/modules/modals/ImportPreview.vue
@@ -259,7 +259,7 @@ table {
 	border: none;
 
 	td, th {
-		padding-right: 8px;
+		padding-inline-end: 8px;
 		max-width: 200px;
 		overflow: hidden;
 		white-space: nowrap;
@@ -274,8 +274,7 @@ table {
 	}
 
 	td:not(:first-child), th:not(:first-child) {
-		padding-right: 8px;
-		padding-left: 8px;
+		padding-inline: 8px;
 	}
 
 	tr {
@@ -294,14 +293,14 @@ table {
 
 	tbody {
 		td {
-			text-align: left;
+			text-align: start;
 			vertical-align: middle;
 
 			&.left {
 				max-width: 300px;
 			}
 			&.right {
-				text-align: right;
+				text-align: end;
 			}
 		}
 
diff --git a/src/modules/modals/ViewSettings.vue b/src/modules/modals/ViewSettings.vue
index 9ab749b705..c6d14c980b 100644
--- a/src/modules/modals/ViewSettings.vue
+++ b/src/modules/modals/ViewSettings.vue
@@ -360,7 +360,7 @@ export default {
 <style lang="scss" scoped>
 
 :deep(.app-settings__navigation) {
-	margin-right: 0;
+	margin-inline-end: 0;
 	min-width: auto;
 }
 
diff --git a/src/modules/navigation/partials/NavigationTableItem.vue b/src/modules/navigation/partials/NavigationTableItem.vue
index 7155371cc7..8a5a8bacce 100644
--- a/src/modules/navigation/partials/NavigationTableItem.vue
+++ b/src/modules/navigation/partials/NavigationTableItem.vue
@@ -325,27 +325,27 @@ export default {
 
 .app-navigation-entry__counter-wrapper {
 	button.action-button {
-		padding-right: 0;
+		padding-inline-end: 0;
 	}
 
 	.counter-bubble__counter {
 		display: none;
 	}
-	margin-right: 0 !important;
+	margin-inline-end: 0 !important;
 }
 
 .app-navigation-entry {
 	.margin-right {
-		margin-right: 44px;
+		margin-inline-end: 44px;
 	}
 	.margin-left {
-		margin-left: calc(var(--default-grid-baseline) * 2);
+		margin-inline-start: calc(var(--default-grid-baseline) * 2);
 	}
 }
 
 .app-navigation-entry:hover {
 	.margin-right {
-		margin-right: 0;
+		margin-inline-end: 0;
 	}
 
 	.app-navigation-entry__counter-wrapper .counter-bubble__counter {
diff --git a/src/modules/sidebar/partials/ShareList.vue b/src/modules/sidebar/partials/ShareList.vue
index 486eb6c601..a02c786e2f 100644
--- a/src/modules/sidebar/partials/ShareList.vue
+++ b/src/modules/sidebar/partials/ShareList.vue
@@ -256,7 +256,7 @@ export default {
 	}
 
 	.userInfo {
-		padding-left: 5px;
+		padding-inline-start: 5px;
 		font-size: 100%;
 		display: flex;
 		flex-direction: column;
diff --git a/src/modules/sidebar/sections/SidebarIntegration.vue b/src/modules/sidebar/sections/SidebarIntegration.vue
index 7816c5324b..c7456d417a 100644
--- a/src/modules/sidebar/sections/SidebarIntegration.vue
+++ b/src/modules/sidebar/sections/SidebarIntegration.vue
@@ -98,11 +98,11 @@ h4 {
 }
 
 ul {
-	margin-left: calc(var(--default-grid-baseline) * 3);
+	margin-inline-start: calc(var(--default-grid-baseline) * 3);
 }
 
 .notPermitted {
-	padding-left: 17px;
+	padding-inline-start: 17px;
 }
 
 </style>
diff --git a/src/pages/Context.vue b/src/pages/Context.vue
index 58267a9ae3..b2ce209ddd 100644
--- a/src/pages/Context.vue
+++ b/src/pages/Context.vue
@@ -245,7 +245,7 @@ export default {
 	&__description {
 		margin: calc(3 * var(--default-grid-baseline, 4px));
 		max-width: 790px;
-		margin-left: 32px;
+		margin-inline-start: 32px;
 	}
 
 	&:deep(.icon-vue) {
@@ -258,10 +258,11 @@ export default {
 	margin: 40px 0;
 
 	&:deep(.row.first-row) {
-		margin-left: 20px;
-		padding-left: 0px;
+		margin-inline-start: 20px;
+		padding-inline-start: 0px;
 	}
 }
+
 :deep(h1) {
 	font-size: unset;
 	font-size: revert;
diff --git a/src/pages/Table.vue b/src/pages/Table.vue
index 7df573ede3..fec5c0c7ab 100644
--- a/src/pages/Table.vue
+++ b/src/pages/Table.vue
@@ -139,7 +139,7 @@ export default {
 	}
 
 	#content-vue .row.first-row {
-		padding-left: 0px;
+		padding-inline-start: 0px;
 	}
 
 	.main-table-view, .main-view-view {
diff --git a/src/pages/View.vue b/src/pages/View.vue
index 35e9d91a7a..e470492def 100644
--- a/src/pages/View.vue
+++ b/src/pages/View.vue
@@ -81,6 +81,7 @@ export default {
 	width: max-content;
 	min-width: var(--app-content-width, 100%);
 }
+
 :deep(h1) {
 	font-size: unset;
 	font-size: revert;
diff --git a/src/shared/components/ncTable/NcTable.vue b/src/shared/components/ncTable/NcTable.vue
index 6c50b078c0..be8bbf986c 100644
--- a/src/shared/components/ncTable/NcTable.vue
+++ b/src/shared/components/ncTable/NcTable.vue
@@ -270,7 +270,7 @@ export default {
 	width: var(--app-content-width, auto);
 	position: sticky;
 	top: 60px;
-	left: 0;
+	inset-inline-start: 0;
 	z-index: 15;
 	background-color: var(--color-main-background);
 	padding-top: 4px; // fix to show buttons completely
diff --git a/src/shared/components/ncTable/partials/FilterLabel.vue b/src/shared/components/ncTable/partials/FilterLabel.vue
index 6296ba343f..c530089ed2 100644
--- a/src/shared/components/ncTable/partials/FilterLabel.vue
+++ b/src/shared/components/ncTable/partials/FilterLabel.vue
@@ -78,8 +78,7 @@ export default {
 
 .filter {
 	padding-top: 1px;
-	padding-left: calc(var(--default-grid-baseline) * 2);
-	padding-right: calc(var(--default-grid-baseline) * 6);
+	padding-inline: calc(var(--default-grid-baseline) * 2) calc(var(--default-grid-baseline) * 6);
 	padding-bottom: calc(var(--default-grid-baseline) * .5);
 	font-size: 0.9em;
 	border-radius: var(--border-radius-pill);
@@ -94,10 +93,9 @@ button {
 	padding-top: 1px;
 	min-height: auto;
 	padding-bottom: 1px;
-	padding-left: 2px;
-	padding-right: 2px;
+	padding-inline: 2px;
 	margin: 0;
-	margin-left: 4px;
+	margin-inline-start: 4px;
 }
 
 </style>
diff --git a/src/shared/components/ncTable/partials/LinkWidget.vue b/src/shared/components/ncTable/partials/LinkWidget.vue
index 2ae1ab47cc..75f1c19d7c 100644
--- a/src/shared/components/ncTable/partials/LinkWidget.vue
+++ b/src/shared/components/ncTable/partials/LinkWidget.vue
@@ -90,7 +90,7 @@ export default {
 	align-items: center;
 
 	img, :deep(svg) {
-		margin-right: calc(var(--default-grid-baseline) * 2);
+		margin-inline-end: calc(var(--default-grid-baseline) * 2);
 	}
 }
 
diff --git a/src/shared/components/ncTable/partials/RichEditor.vue b/src/shared/components/ncTable/partials/RichEditor.vue
index 74d490dbfb..6519126d5b 100644
--- a/src/shared/components/ncTable/partials/RichEditor.vue
+++ b/src/shared/components/ncTable/partials/RichEditor.vue
@@ -121,7 +121,7 @@ export default {
 .loading-indicator {
 	position: absolute;
 	top: 4px;
-	right: 4px;
+	inset-inline-end: 4px;
 }
 
 :deep(.text-editor__wrapper div.ProseMirror) {
diff --git a/src/shared/components/ncTable/partials/TableCellDateTime.vue b/src/shared/components/ncTable/partials/TableCellDateTime.vue
index d319ec5a5f..4ec6f47520 100644
--- a/src/shared/components/ncTable/partials/TableCellDateTime.vue
+++ b/src/shared/components/ncTable/partials/TableCellDateTime.vue
@@ -214,7 +214,7 @@ export default {
 
 	> div:first-child {
 		cursor: pointer;
-		text-align: right;
+		text-align: end;
 	}
 }
 
@@ -247,12 +247,12 @@ export default {
 }
 
 .make-empty {
-	padding-left: 15px;
+	padding-inline-start: 15px;
 	cursor: pointer;
 }
 
 .icon-loading-inline {
-	margin-left: 4px;
+	margin-inline-start: 4px;
 }
 
 :deep(input[type="datetime-local"]),
diff --git a/src/shared/components/ncTable/partials/TableCellHtml.vue b/src/shared/components/ncTable/partials/TableCellHtml.vue
index 6fa6e39ace..a4bcaecb29 100644
--- a/src/shared/components/ncTable/partials/TableCellHtml.vue
+++ b/src/shared/components/ncTable/partials/TableCellHtml.vue
@@ -201,7 +201,7 @@ export default {
 .loading-indicator {
 	position: absolute;
 	top: 4px;
-	right: 4px;
+	inset-inline-end: 4px;
 }
 
 :deep(.text-editor__wrapper div.ProseMirror) {
diff --git a/src/shared/components/ncTable/partials/TableCellLink.vue b/src/shared/components/ncTable/partials/TableCellLink.vue
index b21f5f24c4..4b06316cde 100644
--- a/src/shared/components/ncTable/partials/TableCellLink.vue
+++ b/src/shared/components/ncTable/partials/TableCellLink.vue
@@ -411,7 +411,7 @@ export default {
 	}
 
 	.icon-loading-inline {
-		margin-left: 4px;
+		margin-inline-start: 4px;
 	}
 }
 </style>
diff --git a/src/shared/components/ncTable/partials/TableCellMultiSelection.vue b/src/shared/components/ncTable/partials/TableCellMultiSelection.vue
index 9624485a04..764dffb3d9 100644
--- a/src/shared/components/ncTable/partials/TableCellMultiSelection.vue
+++ b/src/shared/components/ncTable/partials/TableCellMultiSelection.vue
@@ -207,12 +207,12 @@ export default {
 	}
 
 	.icon-loading-inline {
-		margin-left: 4px;
+		margin-inline-start: 4px;
 	}
 }
 
 ul {
 	list-style-type: disc;
-	padding-left: calc(var(--default-grid-baseline) * 3);
+	padding-inline-start: calc(var(--default-grid-baseline) * 3);
 }
 </style>
diff --git a/src/shared/components/ncTable/partials/TableCellNumber.vue b/src/shared/components/ncTable/partials/TableCellNumber.vue
index 08b26e0dbe..ebd749ee1b 100644
--- a/src/shared/components/ncTable/partials/TableCellNumber.vue
+++ b/src/shared/components/ncTable/partials/TableCellNumber.vue
@@ -103,7 +103,7 @@ export default {
 <style scoped>
 .cell-number {
 	width: 100%;
-	text-align: right;
+	text-align: end;
 
 	div {
 		min-height: 20px;
@@ -122,7 +122,7 @@ export default {
 }
 
 .cell-input {
-	text-align: right;
+	text-align: end;
 	flex-grow: 1;
 }
 
diff --git a/src/shared/components/ncTable/partials/TableCellProgress.vue b/src/shared/components/ncTable/partials/TableCellProgress.vue
index c56cbdd646..ccf8c56908 100644
--- a/src/shared/components/ncTable/partials/TableCellProgress.vue
+++ b/src/shared/components/ncTable/partials/TableCellProgress.vue
@@ -91,7 +91,7 @@ export default {
 
 <style scoped>
 .cell-progress {
-	padding-right: 10px;
+	padding-inline-end: 10px;
 	min-width: 12vw;
 	cursor: pointer;
 
@@ -116,7 +116,7 @@ export default {
 }
 
 .cell-input {
-	text-align: right;
+	text-align: end;
 	width: 100%;
 }
 </style>
diff --git a/src/shared/components/ncTable/partials/TableCellSelection.vue b/src/shared/components/ncTable/partials/TableCellSelection.vue
index 7e34639f8b..1ff0d62d6c 100644
--- a/src/shared/components/ncTable/partials/TableCellSelection.vue
+++ b/src/shared/components/ncTable/partials/TableCellSelection.vue
@@ -165,7 +165,7 @@ export default {
 
 .edit-mode {
 	.icon-loading-inline {
-		margin-left: 4px;
+		margin-inline-start: 4px;
 	}
 }
 
diff --git a/src/shared/components/ncTable/partials/TableCellStars.vue b/src/shared/components/ncTable/partials/TableCellStars.vue
index e33457f40a..5a77071b0d 100644
--- a/src/shared/components/ncTable/partials/TableCellStars.vue
+++ b/src/shared/components/ncTable/partials/TableCellStars.vue
@@ -169,6 +169,6 @@ export default {
 }
 
 .icon-loading-inline {
-	margin-left: 4px;
+	margin-inline-start: 4px;
 }
 </style>
diff --git a/src/shared/components/ncTable/partials/TableCellUsergroup.vue b/src/shared/components/ncTable/partials/TableCellUsergroup.vue
index c08516a080..c091474bca 100644
--- a/src/shared/components/ncTable/partials/TableCellUsergroup.vue
+++ b/src/shared/components/ncTable/partials/TableCellUsergroup.vue
@@ -210,14 +210,14 @@ export default {
 }
 
 .usergroup-entry {
-	padding-right: 10px;
+	padding-inline-end: 10px;
 }
 
 .edit-mode {
 	padding: 10px 0;
 
 	.icon-loading-inline {
-		margin-left: 4px;
+		margin-inline-start: 4px;
 	}
 }
 </style>
diff --git a/src/shared/components/ncTable/partials/TableHeader.vue b/src/shared/components/ncTable/partials/TableHeader.vue
index ec10ba9475..612847d851 100644
--- a/src/shared/components/ncTable/partials/TableHeader.vue
+++ b/src/shared/components/ncTable/partials/TableHeader.vue
@@ -146,7 +146,7 @@ export default {
 }
 
 .cell span {
-	padding-left: 12px;
+	padding-inline-start: 12px;
 
 }
 
@@ -167,18 +167,18 @@ export default {
 }
 
 .hidden-indicator {
-	border-right: solid;
+	border-inline-end: solid;
 	border-color: var(--color-primary);
 	border-width: 3px;
-	padding-left: calc(var(--default-grid-baseline) * 1);
+	padding-inline-start: calc(var(--default-grid-baseline) * 1);
 	cursor: pointer;
 }
 
 .hidden-indicator-first {
-	border-right: solid;
+	border-inline-end: solid;
 	border-color: var(--color-primary);
 	border-width: 3px;
-	padding-left: calc(var(--default-grid-baseline) * 4);
+	padding-inline-start: calc(var(--default-grid-baseline) * 4);
 	cursor: pointer;
 }
 
diff --git a/src/shared/components/ncTable/partials/TableHeaderColumnOptions.vue b/src/shared/components/ncTable/partials/TableHeaderColumnOptions.vue
index c49c92f661..7ea11aafda 100644
--- a/src/shared/components/ncTable/partials/TableHeaderColumnOptions.vue
+++ b/src/shared/components/ncTable/partials/TableHeaderColumnOptions.vue
@@ -386,7 +386,7 @@ export default {
 </script>
 <style lang="scss" scoped>
 .menu {
-	padding-left: calc(var(--default-grid-baseline) * 1);
+	padding-inline-start: calc(var(--default-grid-baseline) * 1);
 	min-width: 44px;
 }
 
diff --git a/src/shared/components/ncTable/partials/TiptapMenuBar.vue b/src/shared/components/ncTable/partials/TiptapMenuBar.vue
index 6377105958..ceadfc0315 100644
--- a/src/shared/components/ncTable/partials/TiptapMenuBar.vue
+++ b/src/shared/components/ncTable/partials/TiptapMenuBar.vue
@@ -205,7 +205,7 @@ export default {
 
 .character-count {
 	display: flex;
-	margin-right: calc(var(--default-grid-baseline) * 3);
+	margin-inline-end: calc(var(--default-grid-baseline) * 3);
 	padding: 0;
 }
 
@@ -251,8 +251,8 @@ export default {
 	}
 
 	blockquote {
-		padding-left: 1rem;
-		border-left: 2px solid rgba(#0D0D0D, 0.1);
+		padding-inline-start: 1rem;
+		border-inline-start: 2px solid rgba(#0D0D0D, 0.1);
 	}
 }
 
@@ -267,7 +267,7 @@ export default {
 		display: flex;
 		> label {
 			flex: 0 0 auto;
-			margin-right: 0.5rem;
+			margin-inline-end: 0.5rem;
 			user-select: none;
 		}
 		> div {
@@ -279,14 +279,14 @@ export default {
 .tables-tiptap-wrapper ol, .tabulator-cell ol {
 	li {
 		list-style-type: decimal;
-		margin-left: 15px;
+		margin-inline-start: 15px;
 	}
 }
 
 .tables-tiptap-wrapper ul, .tabulator-cell ul {
 	li {
 		list-style-type: disc;
-		margin-left: 15px;
+		margin-inline-start: 15px;
 
 		label input {
 			max-height: 30px;
diff --git a/src/shared/components/ncTable/partials/columnTypePartials/forms/SelectionForm.vue b/src/shared/components/ncTable/partials/columnTypePartials/forms/SelectionForm.vue
index c2079a3044..46f4113772 100644
--- a/src/shared/components/ncTable/partials/columnTypePartials/forms/SelectionForm.vue
+++ b/src/shared/components/ncTable/partials/columnTypePartials/forms/SelectionForm.vue
@@ -119,11 +119,11 @@ export default {
 
 input {
 	margin-top: 8px;
-	margin-left: calc(var(--default-grid-baseline) * 1);
+	margin-inline-start: calc(var(--default-grid-baseline) * 1);
 }
 
 .col-4.inline {
-	margin-left: calc(var(--default-grid-baseline) * 3);
+	margin-inline-start: calc(var(--default-grid-baseline) * 3);
 }
 
 </style>
diff --git a/src/shared/components/ncTable/partials/columnTypePartials/forms/SelectionMultiForm.vue b/src/shared/components/ncTable/partials/columnTypePartials/forms/SelectionMultiForm.vue
index 9f54898d73..fdfd95003e 100644
--- a/src/shared/components/ncTable/partials/columnTypePartials/forms/SelectionMultiForm.vue
+++ b/src/shared/components/ncTable/partials/columnTypePartials/forms/SelectionMultiForm.vue
@@ -131,11 +131,11 @@ export default {
 
 input {
 	margin-top: 8px;
-	margin-left: calc(var(--default-grid-baseline) * 1);
+	margin-inline-start: calc(var(--default-grid-baseline) * 1);
 }
 
 .col-4.inline {
-	margin-left: calc(var(--default-grid-baseline) * 3);
+	margin-inline-start: calc(var(--default-grid-baseline) * 3);
 }
 
 </style>
diff --git a/src/shared/components/ncTable/partials/columnTypePartials/forms/TextLinkForm.vue b/src/shared/components/ncTable/partials/columnTypePartials/forms/TextLinkForm.vue
index e93492f3ce..ff74e8922d 100644
--- a/src/shared/components/ncTable/partials/columnTypePartials/forms/TextLinkForm.vue
+++ b/src/shared/components/ncTable/partials/columnTypePartials/forms/TextLinkForm.vue
@@ -151,7 +151,7 @@ export default {
 		display: inline-flex;
 		flex-wrap: wrap;
 		max-height: 137px;
-		padding-left: calc(var(--default-grid-baseline) * 4);
+		padding-inline-start: calc(var(--default-grid-baseline) * 4);
 		overflow-y: auto;
 		overflow-x: hidden;
 	}
diff --git a/src/shared/components/ncTable/partials/columnTypePartials/forms/UsergroupForm.vue b/src/shared/components/ncTable/partials/columnTypePartials/forms/UsergroupForm.vue
index 7fb73b2ba1..8dccc1d96f 100644
--- a/src/shared/components/ncTable/partials/columnTypePartials/forms/UsergroupForm.vue
+++ b/src/shared/components/ncTable/partials/columnTypePartials/forms/UsergroupForm.vue
@@ -184,6 +184,6 @@ export default {
 }
 
 .selections span {
-    padding-right: 21px;
+    padding-inline-end: 21px;
 }
 </style>
diff --git a/src/shared/components/ncTable/partials/rowTypePartials/DatetimeDateForm.vue b/src/shared/components/ncTable/partials/rowTypePartials/DatetimeDateForm.vue
index e76cf24670..7f81befea5 100644
--- a/src/shared/components/ncTable/partials/rowTypePartials/DatetimeDateForm.vue
+++ b/src/shared/components/ncTable/partials/rowTypePartials/DatetimeDateForm.vue
@@ -73,7 +73,7 @@ export default {
 }
 
 .make-empty {
-	padding-left: 15px;
+	padding-inline-start: 15px;
 }
 
 .make-empty:hover {
diff --git a/src/shared/components/ncTable/partials/rowTypePartials/DatetimeForm.vue b/src/shared/components/ncTable/partials/rowTypePartials/DatetimeForm.vue
index 3e512b008a..b91735334b 100644
--- a/src/shared/components/ncTable/partials/rowTypePartials/DatetimeForm.vue
+++ b/src/shared/components/ncTable/partials/rowTypePartials/DatetimeForm.vue
@@ -69,7 +69,7 @@ export default {
 }
 
 .make-empty {
-	padding-left: 15px;
+	padding-inline-start: 15px;
 }
 
 .make-empty:hover {
@@ -77,12 +77,12 @@ export default {
 }
 
 .hint-padding-left {
-	padding-left: 20px;
+	padding-inline-start: 20px;
 }
 
 @media only screen and (max-width: 641px) {
 	.hint-padding-left {
-		padding-left: 0;
+		padding-inline-start: 0;
 	}
 }
 
diff --git a/src/shared/components/ncTable/partials/rowTypePartials/DatetimeTimeForm.vue b/src/shared/components/ncTable/partials/rowTypePartials/DatetimeTimeForm.vue
index 3af6a18ac0..f1c60d0d9e 100644
--- a/src/shared/components/ncTable/partials/rowTypePartials/DatetimeTimeForm.vue
+++ b/src/shared/components/ncTable/partials/rowTypePartials/DatetimeTimeForm.vue
@@ -73,7 +73,7 @@ export default {
 }
 
 .make-empty {
-	padding-left: 15px;
+	padding-inline-start: 15px;
 }
 
 .make-empty:hover {
@@ -81,12 +81,12 @@ export default {
 }
 
 .hint-padding-left {
-	padding-left: 20px;
+	padding-inline-start: 20px;
 }
 
 @media only screen and (max-width: 641px) {
 	.hint-padding-left {
-		padding-left: 0;
+		padding-inline-start: 0;
 	}
 }
 
diff --git a/src/shared/components/ncTable/partials/rowTypePartials/NumberForm.vue b/src/shared/components/ncTable/partials/rowTypePartials/NumberForm.vue
index 501c7ab47e..3bb28549e1 100644
--- a/src/shared/components/ncTable/partials/rowTypePartials/NumberForm.vue
+++ b/src/shared/components/ncTable/partials/rowTypePartials/NumberForm.vue
@@ -107,11 +107,11 @@ export default {
 <style lang="scss" scoped>
 
 .prefix {
-	padding-right: calc(var(--default-grid-baseline) * 2);
+	padding-inline-end: calc(var(--default-grid-baseline) * 2);
 }
 
 .suffix {
-	padding-left: calc(var(--default-grid-baseline) * 2);
+	padding-inline-start: calc(var(--default-grid-baseline) * 2);
 }
 
 </style>
diff --git a/src/shared/components/ncTable/partials/rowTypePartials/NumberProgressForm.vue b/src/shared/components/ncTable/partials/rowTypePartials/NumberProgressForm.vue
index 99910e471a..e157a74893 100644
--- a/src/shared/components/ncTable/partials/rowTypePartials/NumberProgressForm.vue
+++ b/src/shared/components/ncTable/partials/rowTypePartials/NumberProgressForm.vue
@@ -71,12 +71,12 @@ export default {
 <style scoped>
 
 .hint-padding-left {
-	padding-left: 20px;
+	padding-inline-start: 20px;
 }
 
 @media only screen and (max-width: 641px) {
 	.hint-padding-left {
-		padding-left: 0;
+		padding-inline-start: 0;
 	}
 }
 
diff --git a/src/shared/components/ncTable/partials/rowTypePartials/RowFormWrapper.vue b/src/shared/components/ncTable/partials/rowTypePartials/RowFormWrapper.vue
index 9ffba6eaf8..3a0f894ddf 100644
--- a/src/shared/components/ncTable/partials/rowTypePartials/RowFormWrapper.vue
+++ b/src/shared/components/ncTable/partials/rowTypePartials/RowFormWrapper.vue
@@ -87,7 +87,7 @@ export default {
 }
 
 .material-design-icon.loading-icon {
-	margin-left: calc(var(--default-grid-baseline) * 1);
+	margin-inline-start: calc(var(--default-grid-baseline) * 1);
 }
 
 pre {
diff --git a/src/shared/components/ncTable/partials/rowTypePartials/SelectionCheckForm.vue b/src/shared/components/ncTable/partials/rowTypePartials/SelectionCheckForm.vue
index a08a63b48c..59a98c9d24 100644
--- a/src/shared/components/ncTable/partials/rowTypePartials/SelectionCheckForm.vue
+++ b/src/shared/components/ncTable/partials/rowTypePartials/SelectionCheckForm.vue
@@ -50,12 +50,12 @@ export default {
 <style scoped>
 
 .hint-padding-left {
-	padding-left: 20px;
+	padding-inline-start: 20px;
 }
 
 @media only screen and (max-width: 641px) {
 	.hint-padding-left {
-		padding-left: 0;
+		padding-inline-start: 0;
 	}
 }
 
diff --git a/src/shared/components/ncTable/partials/rowTypePartials/SelectionForm.vue b/src/shared/components/ncTable/partials/rowTypePartials/SelectionForm.vue
index c6a82d505a..9ea6cddbb6 100644
--- a/src/shared/components/ncTable/partials/rowTypePartials/SelectionForm.vue
+++ b/src/shared/components/ncTable/partials/rowTypePartials/SelectionForm.vue
@@ -65,12 +65,12 @@ export default {
 <style scoped>
 
 .hint-padding-left {
-	padding-left: 20px;
+	padding-inline-start: 20px;
 }
 
 @media only screen and (max-width: 641px) {
 	.hint-padding-left {
-		padding-left: 0;
+		padding-inline-start: 0;
 	}
 }
 
diff --git a/src/shared/components/ncTable/partials/rowTypePartials/SelectionMultiForm.vue b/src/shared/components/ncTable/partials/rowTypePartials/SelectionMultiForm.vue
index f008a75499..528e352269 100644
--- a/src/shared/components/ncTable/partials/rowTypePartials/SelectionMultiForm.vue
+++ b/src/shared/components/ncTable/partials/rowTypePartials/SelectionMultiForm.vue
@@ -76,12 +76,12 @@ export default {
 <style scoped>
 
 .hint-padding-left {
-	padding-left: 20px;
+	padding-inline-start: 20px;
 }
 
 @media only screen and (max-width: 641px) {
 	.hint-padding-left {
-		padding-left: 0;
+		padding-inline-start: 0;
 	}
 }
 
diff --git a/src/shared/components/ncTable/partials/rowTypePartials/TextLineForm.vue b/src/shared/components/ncTable/partials/rowTypePartials/TextLineForm.vue
index df48c47873..6d084fb554 100644
--- a/src/shared/components/ncTable/partials/rowTypePartials/TextLineForm.vue
+++ b/src/shared/components/ncTable/partials/rowTypePartials/TextLineForm.vue
@@ -50,12 +50,12 @@ export default {
 <style scoped>
 
 .hint-padding-left {
-	padding-left: 20px;
+	padding-inline-start: 20px;
 }
 
 @media only screen and (max-width: 641px) {
 	.hint-padding-left {
-		padding-left: 0;
+		padding-inline-start: 0;
 	}
 }
 
diff --git a/src/shared/components/ncTable/partials/rowTypePartials/TextRichForm.vue b/src/shared/components/ncTable/partials/rowTypePartials/TextRichForm.vue
index fd0c7313bc..4fafe0cf19 100644
--- a/src/shared/components/ncTable/partials/rowTypePartials/TextRichForm.vue
+++ b/src/shared/components/ncTable/partials/rowTypePartials/TextRichForm.vue
@@ -87,7 +87,7 @@ export default {
 	.closeModalButton {
 		position: fixed;
 		bottom: calc(var(--default-grid-baseline) * 2);
-		right: calc(var(--default-grid-baseline) * 2);
+		inset-inline-end: calc(var(--default-grid-baseline) * 2);
 	}
 
 </style>
diff --git a/src/shared/components/ncTable/sections/CustomTable.vue b/src/shared/components/ncTable/sections/CustomTable.vue
index 3190be92ef..000c0a42bf 100644
--- a/src/shared/components/ncTable/sections/CustomTable.vue
+++ b/src/shared/components/ncTable/sections/CustomTable.vue
@@ -429,7 +429,7 @@ export default {
 }
 
 .selected-page{
-	padding-left: 5px;
+	padding-inline-start: 5px;
 
 	display:inline-flex;
 	align-items: center;
@@ -441,7 +441,7 @@ export default {
 
 .large-width{
 	width: 100vw !important;
-	left: 0 !important;
+	inset-inline-start: 0 !important;
 }
 
 .pagination-items{
@@ -479,7 +479,7 @@ export default {
 	// white-space: nowrap;
 
 	td, th {
-		padding-right: 8px;
+		padding-inline-end: 8px;
 		max-width: 500px;
 	}
 
@@ -492,8 +492,7 @@ export default {
 	}
 
 	td:not(:first-child), th:not(:first-child) {
-		padding-right: 8px;
-		padding-left: 8px;
+		padding-inline: 8px;
 	}
 
 	tr {
@@ -520,7 +519,7 @@ export default {
 	tbody {
 
 		td {
-			text-align: left;
+			text-align: start;
 			vertical-align: middle;
 			border: 1px solid var(--color-border-dark);
 		}
@@ -574,7 +573,7 @@ export default {
 
 		.icon-loading-inline {
 			position: absolute;
-			right: 8px;
+			inset-inline-end: 8px;
 			top: 50%;
 			transform: translateY(-50%);
 		}
@@ -586,9 +585,8 @@ export default {
 
 	tr>th.sticky:first-child,tr>td.sticky:first-child {
 		position: sticky;
-		left: 0;
-		padding-left: calc(var(--default-grid-baseline) * 4);
-		padding-right: calc(var(--default-grid-baseline) * 4);
+		inset-inline-start: 0;
+		padding-inline: calc(var(--default-grid-baseline) * 4);
 		width: 60px;
 		background-color: inherit;
 		z-index: 5;
@@ -596,10 +594,10 @@ export default {
 
 	tr>th.sticky:last-child,tr>td.sticky:last-child {
 		position: sticky;
-		right: 0;
+		inset-inline-end: 0;
 		width: 55px;
 		background-color: inherit;
-		padding-right: 16px;
+		padding-inline-end: 16px;
 	}
 
 	tr>td.sticky:last-child {
diff --git a/src/shared/components/ncTable/sections/Options.vue b/src/shared/components/ncTable/sections/Options.vue
index b988a9c7f7..1e4ca0a513 100644
--- a/src/shared/components/ncTable/sections/Options.vue
+++ b/src/shared/components/ncTable/sections/Options.vue
@@ -184,7 +184,7 @@ export default {
 	position: -webkit-sticky; /* Safari */
 	position: sticky;
 	top: 90px;
-	left: 0;
+	inset-inline-start: 0;
 }
 
 .selected-rows-option {
@@ -196,7 +196,7 @@ export default {
 }
 
 .add-padding-left {
-	padding-left: calc(var(--default-grid-baseline) * 1);
+	padding-inline-start: calc(var(--default-grid-baseline) * 1);
 }
 
 :deep(.counter-bubble__counter) {
@@ -206,7 +206,7 @@ export default {
 .actionButtonsLeft {
 	display: inline-flex;
 	align-items: center;
-	padding-left: calc(var(--default-grid-baseline) * 1);
+	padding-inline-start: calc(var(--default-grid-baseline) * 1);
 }
 
 :deep(.actionButtonsLeft button) {
@@ -215,7 +215,7 @@ export default {
 }
 
 .searchAndFilter {
-	margin-left: calc(var(--default-grid-baseline) * 3);
+	margin-inline-start: calc(var(--default-grid-baseline) * 3);
 	width: auto;
 	min-width: 100px;
 }
diff --git a/src/styles/smart-picker.scss b/src/styles/smart-picker.scss
index a57b167c36..cad2705227 100644
--- a/src/styles/smart-picker.scss
+++ b/src/styles/smart-picker.scss
@@ -34,8 +34,7 @@
 		th, td {
 			border: none !important;
 			width: 50%;
-			padding-left: calc(var(--default-grid-baseline) * 2);
-			padding-right: calc(var(--default-grid-baseline) * 2);
+			padding-inline: calc(var(--default-grid-baseline) * 2);
 		}
 	}
 
@@ -43,11 +42,11 @@
 		display: flex;
 
 		> span {
-			padding-right: calc(var(--default-grid-baseline) * 6);
+			padding-inline-end: calc(var(--default-grid-baseline) * 6);
 		}
 
 		label .material-design-icon {
-			padding-right: calc(var(--default-grid-baseline) * 1);
+			padding-inline-end: calc(var(--default-grid-baseline) * 1);
 		}
 	}
 
@@ -64,8 +63,7 @@
 		width: 100%;
 
 		.selection {
-			margin-left: auto;
-			margin-right: auto;
+			margin-inline: auto;
 			width: 550px;
 		}
 	}
diff --git a/src/views/ContentReferenceWidget.vue b/src/views/ContentReferenceWidget.vue
index 64d5c8d8bc..b060b8a54c 100644
--- a/src/views/ContentReferenceWidget.vue
+++ b/src/views/ContentReferenceWidget.vue
@@ -218,7 +218,7 @@ export default {
 		& .header {
 			position: sticky;
 			top: 0;
-			left: 0;
+			inset-inline-start: 0;
 			z-index: 1;
 
 			:where(.options) {
@@ -268,7 +268,7 @@ export default {
 
 			:where(.pagination-footer) {
 				width: unset !important;
-				left: unset !important;
+				inset-inline-start: unset !important;
 			}
 		}
 
diff --git a/src/views/LinkReferenceWidget.vue b/src/views/LinkReferenceWidget.vue
index 559a3e67ed..2c53e33b58 100644
--- a/src/views/LinkReferenceWidget.vue
+++ b/src/views/LinkReferenceWidget.vue
@@ -96,7 +96,7 @@ export default {
 	}
 
 	&--image {
-		margin-right: 12px;
+		margin-inline-end: 12px;
 		display: flex;
 		align-items: center;
 		.table-emoji {
diff --git a/src/views/partials/SearchAndSelectOption.vue b/src/views/partials/SearchAndSelectOption.vue
index 9da56eca89..a94dd602a4 100644
--- a/src/views/partials/SearchAndSelectOption.vue
+++ b/src/views/partials/SearchAndSelectOption.vue
@@ -102,7 +102,7 @@ export default {
 		display: flex;
 		align-items: center;
 		img, :deep(svg) {
-			margin-right: calc(var(--default-grid-baseline) * 2);
+			margin-inline-end: calc(var(--default-grid-baseline) * 2);
 		}
 	}
 
diff --git a/src/views/sections/Search.vue b/src/views/sections/Search.vue
index 914cc6fd79..54bcd1936e 100644
--- a/src/views/sections/Search.vue
+++ b/src/views/sections/Search.vue
@@ -136,7 +136,7 @@ export default {
 	}
 
 	:deep(#smartpicker-select .vs__selected) {
-		margin-left: 0;
+		margin-inline-start: 0;
 	}
 
 </style>