From 16f7fa087a7fa80dbb92a02c329facc9ef8a8288 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sat, 2 Aug 2025 10:29:21 +0200
Subject: [PATCH] fix: convert all css properties to logical

---
 .../src/components/base/BasePagination.vue    |  4 ++--
 .../components/date/DatepickerWithRange.vue   |  8 +++----
 .../components/date/DatepickerWithValues.vue  |  8 +++----
 frontend/src/components/home/ContentAuth.vue  | 12 +++++-----
 .../src/components/home/ContentLinkShare.vue  |  2 +-
 frontend/src/components/home/Navigation.vue   |  6 ++---
 .../src/components/home/PoweredByLink.vue     |  4 ++--
 .../home/ProjectsNavigationItem.vue           |  2 +-
 .../components/input/AutocompleteDropdown.vue |  4 ++--
 frontend/src/components/input/Button.vue      |  2 +-
 frontend/src/components/input/ColorPicker.vue |  2 +-
 .../src/components/input/DatepickerInline.vue |  2 +-
 .../src/components/input/FancyCheckbox.vue    |  6 ++---
 frontend/src/components/input/Multiselect.vue |  8 +++----
 frontend/src/components/input/Reactions.vue   |  6 ++---
 .../src/components/input/SimpleButton.vue     |  2 +-
 .../components/input/editor/CommandsList.vue  |  4 ++--
 .../components/input/editor/EditorToolbar.vue | 14 +++++------
 .../src/components/input/editor/TipTap.vue    | 24 +++++++++----------
 frontend/src/components/misc/ApiConfig.vue    |  4 ++--
 frontend/src/components/misc/Card.vue         |  2 +-
 frontend/src/components/misc/CreateEdit.vue   |  4 ++--
 frontend/src/components/misc/Dropdown.vue     |  6 ++---
 frontend/src/components/misc/DropdownItem.vue |  2 +-
 frontend/src/components/misc/Legal.vue        |  4 ++--
 frontend/src/components/misc/Message.vue      |  2 +-
 frontend/src/components/misc/Modal.vue        |  4 ++--
 .../src/components/misc/NoAuthWrapper.vue     |  2 +-
 frontend/src/components/misc/Notification.vue |  2 +-
 frontend/src/components/misc/Ready.vue        |  4 ++--
 frontend/src/components/misc/User.vue         |  2 +-
 .../misc/keyboard-shortcuts/index.vue         |  8 +++----
 .../notifications/Notifications.vue           |  8 +++----
 .../src/components/project/ProjectWrapper.vue |  8 +++----
 .../project/partials/FilterInput.vue          |  2 +-
 .../components/project/partials/Filters.vue   |  2 +-
 .../project/partials/ProjectCard.vue          |  2 +-
 .../project/partials/ProjectCardGrid.vue      |  2 +-
 .../components/project/views/ProjectGantt.vue | 12 +++++-----
 .../project/views/ProjectKanban.vue           |  8 +++----
 .../components/project/views/ProjectList.vue  |  6 ++---
 .../components/project/views/ProjectTable.vue |  4 ++--
 .../components/project/views/ViewEditForm.vue |  6 ++---
 .../components/quick-actions/QuickActions.vue | 12 +++++-----
 .../src/components/sharing/LinkSharing.vue    |  2 +-
 frontend/src/components/sharing/UserTeam.vue  |  2 +-
 frontend/src/components/tasks/AddTask.vue     |  2 +-
 frontend/src/components/tasks/GanttChart.vue  |  4 ++--
 frontend/src/components/tasks/TaskForm.vue    |  2 +-
 .../tasks/partials/AssigneeList.vue           |  6 ++---
 .../components/tasks/partials/Attachments.vue |  8 +++----
 .../tasks/partials/ChecklistSummary.vue       |  4 ++--
 .../components/tasks/partials/Comments.vue    | 14 +++++------
 .../tasks/partials/CreatedUpdated.vue         |  2 +-
 .../components/tasks/partials/Description.vue |  4 ++--
 .../tasks/partials/EditAssignees.vue          |  2 +-
 .../src/components/tasks/partials/Heading.vue | 10 ++++----
 .../components/tasks/partials/KanbanCard.vue  | 20 ++++++++--------
 .../src/components/tasks/partials/Label.vue   |  2 +-
 .../src/components/tasks/partials/Labels.vue  |  4 ++--
 .../tasks/partials/PriorityLabel.vue          |  2 +-
 .../tasks/partials/RelatedTasks.vue           |  6 ++---
 .../components/tasks/partials/Reminders.vue   |  4 ++--
 .../components/tasks/partials/RepeatAfter.vue |  4 ++--
 .../tasks/partials/SingleTaskInProject.vue    | 16 ++++++-------
 .../partials/SingleTaskInlineReadonly.vue     | 18 +++++++-------
 frontend/src/styles/theme/form.scss           |  2 +-
 frontend/src/styles/theme/loading.scss        |  2 +-
 frontend/src/styles/theme/theme.scss          |  2 +-
 frontend/src/views/Home.vue                   |  2 +-
 frontend/src/views/migrate/Migration.vue      |  2 +-
 .../src/views/migrate/MigrationHandler.vue    |  4 ++--
 frontend/src/views/project/ListProjects.vue   |  6 ++---
 frontend/src/views/project/ProjectInfo.vue    |  2 +-
 .../settings/ProjectSettingsBackground.vue    |  4 ++--
 .../project/settings/ProjectSettingsViews.vue |  8 +++----
 .../settings/ProjectSettingsWebhooks.vue      |  2 +-
 frontend/src/views/tasks/ShowTasks.vue        |  4 ++--
 frontend/src/views/tasks/TaskDetailView.vue   | 22 ++++++++---------
 frontend/src/views/teams/EditTeam.vue         |  4 ++--
 frontend/src/views/teams/ListTeams.vue        |  2 +-
 .../src/views/user/DataExportDownload.vue     |  2 +-
 frontend/src/views/user/Login.vue             |  6 ++---
 frontend/src/views/user/Register.vue          |  2 +-
 frontend/src/views/user/Settings.vue          | 10 ++++----
 frontend/src/views/user/settings/Caldav.vue   |  4 ++--
 .../src/views/user/settings/DataExport.vue    |  4 ++--
 frontend/src/views/user/settings/General.vue  |  4 ++--
 frontend/src/views/user/settings/TOTP.vue     |  2 +-
 89 files changed, 239 insertions(+), 239 deletions(-)

diff --git a/frontend/src/components/base/BasePagination.vue b/frontend/src/components/base/BasePagination.vue
index 68e90f040..2b6e53f54 100644
--- a/frontend/src/components/base/BasePagination.vue
+++ b/frontend/src/components/base/BasePagination.vue
@@ -77,7 +77,7 @@ const pages = computed(() => createPagination(props.totalPages, props.currentPag
 
 <style lang="scss" scoped>
 .pagination {
-	padding-bottom: 1rem;
+	padding-block-end: 1rem;
 }
 
 .pagination-previous,
@@ -90,7 +90,7 @@ const pages = computed(() => createPagination(props.totalPages, props.currentPag
 
 .pagination-list {
 	&, & li {
-		margin-top: 0;
+		margin-block-start: 0;
 	}
 }
 </style>
diff --git a/frontend/src/components/date/DatepickerWithRange.vue b/frontend/src/components/date/DatepickerWithRange.vue
index 926615cb1..461997362 100644
--- a/frontend/src/components/date/DatepickerWithRange.vue
+++ b/frontend/src/components/date/DatepickerWithRange.vue
@@ -227,7 +227,7 @@ const buttonText = computed<string>(() => {
 
 :deep(.popup) {
 	z-index: 10;
-	margin-top: 1rem;
+	margin-block-start: 1rem;
 	border-radius: $radius;
 	border: 1px solid var(--grey-200);
 	background-color: var(--white);
@@ -253,7 +253,7 @@ const buttonText = computed<string>(() => {
 
 .flatpickr-container {
 	width: 70%;
-	border-left: 1px solid var(--grey-200);
+	border-inline-start: 1px solid var(--grey-200);
 	padding: 1rem;
 	font-size: .9rem;
 
@@ -282,13 +282,13 @@ const buttonText = computed<string>(() => {
 	width: 30%;
 	display: flex;
 	flex-direction: column;
-	padding-top: .5rem;
+	padding-block-start: .5rem;
 	overflow-y: scroll;
 
 	button {
 		display: block;
 		width: 100%;
-		text-align: left;
+		text-align: start;
 		padding: .5rem 1rem;
 		transition: $transition;
 		font-size: .9rem;
diff --git a/frontend/src/components/date/DatepickerWithValues.vue b/frontend/src/components/date/DatepickerWithValues.vue
index 40087eb10..fe2cb732e 100644
--- a/frontend/src/components/date/DatepickerWithValues.vue
+++ b/frontend/src/components/date/DatepickerWithValues.vue
@@ -173,7 +173,7 @@ const customRangeActive = computed<boolean>(() => {
 
 :deep(.popup) {
 	z-index: 10;
-	margin-top: 1rem;
+	margin-block-start: 1rem;
 	border-radius: $radius;
 	border: 1px solid var(--grey-200);
 	background-color: var(--white);
@@ -199,7 +199,7 @@ const customRangeActive = computed<boolean>(() => {
 
 .flatpickr-container {
 	width: 70%;
-	border-left: 1px solid var(--grey-200);
+	border-inline-start: 1px solid var(--grey-200);
 	padding: 1rem;
 	font-size: .9rem;
 
@@ -228,13 +228,13 @@ const customRangeActive = computed<boolean>(() => {
 	width: 30%;
 	display: flex;
 	flex-direction: column;
-	padding-top: .5rem;
+	padding-block-start: .5rem;
 	overflow-y: scroll;
 
 	button {
 		display: block;
 		width: 100%;
-		text-align: left;
+		text-align: start;
 		padding: .5rem 1rem;
 		transition: $transition;
 		font-size: .9rem;
diff --git a/frontend/src/components/home/ContentAuth.vue b/frontend/src/components/home/ContentAuth.vue
index d6030fee8..efb34f574 100644
--- a/frontend/src/components/home/ContentAuth.vue
+++ b/frontend/src/components/home/ContentAuth.vue
@@ -164,7 +164,7 @@ projectStore.loadAllProjects()
 	min-height: calc(100vh - 65px);
 
 	@media screen and (max-width: $tablet) {
-		padding-top: $navbar-height;
+		padding-block-start: $navbar-height;
 	}
 }
 
@@ -181,8 +181,8 @@ projectStore.loadAllProjects()
 	}
 
 	@media screen and (max-width: $tablet) {
-		margin-left: 0;
-		margin-right: 0;
+		margin-inline-start: 0;
+		margin-inline-end: 0;
 		min-height: calc(100vh - 4rem);
 	}
 
@@ -192,13 +192,13 @@ projectStore.loadAllProjects()
 
 	&.is-menu-enabled {
 		@media screen and (min-width: $tablet) {
-			margin-left: $navbar-width;
+			margin-inline-start: $navbar-width;
 		}
 		
 		[dir="rtl"] & {
 			@media screen and (min-width: $tablet) {
-				margin-left: 0;
-				margin-right: $navbar-width;
+				margin-inline-start: 0;
+				margin-inline-end: $navbar-width;
 			}
 		}
 	}
diff --git a/frontend/src/components/home/ContentLinkShare.vue b/frontend/src/components/home/ContentLinkShare.vue
index 2853ff86d..9bf75cc82 100644
--- a/frontend/src/components/home/ContentLinkShare.vue
+++ b/frontend/src/components/home/ContentLinkShare.vue
@@ -19,7 +19,7 @@
 			>
 				{{ currentProject?.title === '' ? $t('misc.loading') : currentProject?.title }}
 			</h1>
-			<div class="box has-text-left view">
+			<div class="box has-text-start view">
 				<RouterView />
 				<PoweredByLink utm-medium="link_share" />
 			</div>
diff --git a/frontend/src/components/home/Navigation.vue b/frontend/src/components/home/Navigation.vue
index 5dece0039..ed6aaad67 100644
--- a/frontend/src/components/home/Navigation.vue
+++ b/frontend/src/components/home/Navigation.vue
@@ -141,7 +141,7 @@ const savedFilterProjects = computed(() => projectStore.savedFilterProjects)
 
 	padding-inline-start: 1rem;
 	margin-inline-end: 1rem;
-	margin-bottom: 1rem;
+	margin-block-end: 1rem;
 
 	@media screen and (min-width: $tablet) {
 		display: none;
@@ -193,12 +193,12 @@ const savedFilterProjects = computed(() => projectStore.savedFilterProjects)
 		display: inline-block;
 
 		.icon {
-			padding-bottom: .25rem;
+			padding-block-end: .25rem;
 		}
 	}
 }
 
 .menu + .menu {
-	padding-top: math.div($navbar-padding, 2);
+	padding-block-start: math.div($navbar-padding, 2);
 }
 </style>
diff --git a/frontend/src/components/home/PoweredByLink.vue b/frontend/src/components/home/PoweredByLink.vue
index e3d47a5fe..ed4048f2c 100644
--- a/frontend/src/components/home/PoweredByLink.vue
+++ b/frontend/src/components/home/PoweredByLink.vue
@@ -25,8 +25,8 @@ const computedUrl = computed(() => `${poweredByUrl}&utm_medium=${props.utmMedium
 	color: var(--grey-300);
 	text-align: center;
 	display: block;
-	padding-top: 1rem;
-	padding-bottom: 1rem;
+	padding-block-start: 1rem;
+	padding-block-end: 1rem;
 	font-size: .8rem;
 }
 </style>
diff --git a/frontend/src/components/home/ProjectsNavigationItem.vue b/frontend/src/components/home/ProjectsNavigationItem.vue
index b7234625a..db77a2014 100644
--- a/frontend/src/components/home/ProjectsNavigationItem.vue
+++ b/frontend/src/components/home/ProjectsNavigationItem.vue
@@ -173,7 +173,7 @@ const childProjects = computed(() => {
 	display: flex;
 	align-items: center;
 	justify-content: flex-start;
-	margin-right: .25rem;
+	margin-inline-end: .25rem;
 	flex-shrink: 0;
 
 	.color-bubble, .icon {
diff --git a/frontend/src/components/input/AutocompleteDropdown.vue b/frontend/src/components/input/AutocompleteDropdown.vue
index 1b0e2b704..106eab3ab 100644
--- a/frontend/src/components/input/AutocompleteDropdown.vue
+++ b/frontend/src/components/input/AutocompleteDropdown.vue
@@ -197,7 +197,7 @@ function onUpdateField(e) {
 		z-index: 100;
 		max-width: 100%;
 		min-width: 100%;
-		margin-top: -2px;
+		margin-block-start: -2px;
 
 		button {
 			width: 100%;
@@ -207,7 +207,7 @@ function onUpdateField(e) {
 			font-size: .9rem;
 			width: 100%;
 			color: var(--grey-800);
-			text-align: left;
+			text-align: start;
 			box-shadow: none;
 			text-transform: none;
 			font-family: $family-sans-serif;
diff --git a/frontend/src/components/input/Button.vue b/frontend/src/components/input/Button.vue
index a9c7463a7..9a9db2fbc 100644
--- a/frontend/src/components/input/Button.vue
+++ b/frontend/src/components/input/Button.vue
@@ -90,7 +90,7 @@ const variantClass = computed(() => VARIANT_CLASS_MAP[props.variant])
 	}
 
 	&.fullheight {
-		padding-right: 7px;
+		padding-inline-end: 7px;
 		height: 100%;
 	}
 
diff --git a/frontend/src/components/input/ColorPicker.vue b/frontend/src/components/input/ColorPicker.vue
index 6a4533737..5c6622ea6 100644
--- a/frontend/src/components/input/ColorPicker.vue
+++ b/frontend/src/components/input/ColorPicker.vue
@@ -55,7 +55,7 @@
 		<XButton
 			v-if="!isEmpty"
 			:disabled="isEmpty"
-			class="is-small ml-2"
+			class="is-small ms-2"
 			:shadow="false"
 			variant="secondary"
 			@click="reset"
diff --git a/frontend/src/components/input/DatepickerInline.vue b/frontend/src/components/input/DatepickerInline.vue
index 10ed595b2..fbe975cd2 100644
--- a/frontend/src/components/input/DatepickerInline.vue
+++ b/frontend/src/components/input/DatepickerInline.vue
@@ -240,7 +240,7 @@ function getWeekdayFromStringInterval(dateString: string) {
 		font-size: .85rem;
 		display: flex;
 		justify-content: space-between;
-		padding-right: .25rem;
+		padding-inline-end: .25rem;
 
 		.weekday {
 			color: var(--text-light);
diff --git a/frontend/src/components/input/FancyCheckbox.vue b/frontend/src/components/input/FancyCheckbox.vue
index 3bb92d1d7..9e847cf11 100644
--- a/frontend/src/components/input/FancyCheckbox.vue
+++ b/frontend/src/components/input/FancyCheckbox.vue
@@ -40,8 +40,8 @@ const emit = defineEmits<{
 <style lang="scss" scoped>
 .fancy-checkbox {
   display: inline-block;
-  padding-right: 5px;
-  padding-top: 3px;
+  padding-inline-end: 5px;
+  padding-block-start: 3px;
 
 	&.is-block {
 		display: block;
@@ -52,7 +52,7 @@ const emit = defineEmits<{
 .fancy-checkbox__content {
 	font-size: 0.8rem;
 	vertical-align: top;
-	padding-left: .5rem;
+	padding-inline-start: .5rem;
 }
 
 .fancy-checkbox__icon:deep() {
diff --git a/frontend/src/components/input/Multiselect.vue b/frontend/src/components/input/Multiselect.vue
index f58a970bb..8e5ffb10f 100644
--- a/frontend/src/components/input/Multiselect.vue
+++ b/frontend/src/components/input/Multiselect.vue
@@ -28,7 +28,7 @@
 						>
 							<span
 								:key="`item${key}`"
-								class="tag ml-2 mt-2"
+								class="tag ms-2 mt-2"
 							>
 								{{ label !== '' ? item[label] : item }}
 								<BaseButton
@@ -484,7 +484,7 @@ function focus() {
 		max-width: 250px;
 
 		input {
-			padding-left: 0;
+			padding-inline-start: 0;
 		}
 	}
 
@@ -529,7 +529,7 @@ function focus() {
 
 .search-result-button {
 	background: transparent;
-	text-align: left;
+	text-align: start;
 	box-shadow: none;
 	border-radius: 0;
 	text-transform: none;
@@ -572,7 +572,7 @@ function focus() {
 	font-size: .75rem;
 	color: transparent;
 	transition: color $transition;
-	padding-left: .5rem;
+	padding-inline-start: .5rem;
 }
 
 .has-removal-button {
diff --git a/frontend/src/components/input/Reactions.vue b/frontend/src/components/input/Reactions.vue
index 8f1aef487..6cd651bb3 100644
--- a/frontend/src/components/input/Reactions.vue
+++ b/frontend/src/components/input/Reactions.vue
@@ -174,8 +174,8 @@ async function toggleReaction(value: string) {
 
 <style scoped lang="scss">
 .reaction-button {
-	margin-right: .25rem;
-	margin-bottom: .25rem;
+	margin-inline-end: .25rem;
+	margin-block-end: .25rem;
 	padding: .175rem .5rem .15rem;
 	border: 1px solid var(--grey-400);
 	background: var(--grey-100);
@@ -191,6 +191,6 @@ async function toggleReaction(value: string) {
 .emoji-picker {
 	position: absolute;
 	z-index: 99;
-	margin-top: .5rem;
+	margin-block-start: .5rem;
 }
 </style>
diff --git a/frontend/src/components/input/SimpleButton.vue b/frontend/src/components/input/SimpleButton.vue
index 43f1e9083..46214bc09 100644
--- a/frontend/src/components/input/SimpleButton.vue
+++ b/frontend/src/components/input/SimpleButton.vue
@@ -17,7 +17,7 @@ import BaseButton from '@/components/base/BaseButton.vue'
 	display: block;
 	margin: .1rem 0;
 	width: 100%;
-	text-align: left;
+	text-align: start;
 
 	&:hover {
 		background: var(--white);
diff --git a/frontend/src/components/input/editor/CommandsList.vue b/frontend/src/components/input/editor/CommandsList.vue
index abcbc5772..565d57ba6 100644
--- a/frontend/src/components/input/editor/CommandsList.vue
+++ b/frontend/src/components/input/editor/CommandsList.vue
@@ -111,7 +111,7 @@ export default {
 	align-items: center;
 	margin: 0;
 	width: 100%;
-	text-align: left;
+	text-align: start;
 	background: transparent;
 	border-radius: $radius;
 	border: 0;
@@ -129,7 +129,7 @@ export default {
 		height: 2rem;
 		border: 1px solid var(--grey-300);
 		padding: .5rem;
-		margin-right: .5rem;
+		margin-inline-end: .5rem;
 		border-radius: $radius;
 		color: var(--grey-700);
 	}
diff --git a/frontend/src/components/input/editor/EditorToolbar.vue b/frontend/src/components/input/editor/EditorToolbar.vue
index 900e72b24..6d2e2a966 100644
--- a/frontend/src/components/input/editor/EditorToolbar.vue
+++ b/frontend/src/components/input/editor/EditorToolbar.vue
@@ -397,9 +397,9 @@ function setLink(event) {
 	flex-wrap: wrap;
 
 	> * + * {
-		border-left: 1px solid var(--grey-200);
-		margin-left: 6px;
-		padding-left: 6px;
+		border-inline-start: 1px solid var(--grey-200);
+		margin-inline-start: 6px;
+		padding-inline-start: 6px;
 	}
 }
 
@@ -411,7 +411,7 @@ function setLink(event) {
 	color: var(--grey-700);
 	transition: all $transition;
 	background: transparent;
-	margin-right: .25rem;
+	margin-inline-end: .25rem;
 
 	&:hover {
 		background: var(--grey-100);
@@ -432,11 +432,11 @@ function setLink(event) {
 }
 
 .editor-toolbar__table-buttons {
-	margin-top: .5rem;
+	margin-block-start: .5rem;
 
 	> .editor-toolbar__button {
-		margin-right: .5rem;
-		margin-bottom: .5rem;
+		margin-inline-end: .5rem;
+		margin-block-end: .5rem;
 		padding: 0 .25rem;
 		border: 1px solid var(--grey-400);
 		font-size: .75rem;
diff --git a/frontend/src/components/input/editor/TipTap.vue b/frontend/src/components/input/editor/TipTap.vue
index c1b0e1040..59c439667 100644
--- a/frontend/src/components/input/editor/TipTap.vue
+++ b/frontend/src/components/input/editor/TipTap.vue
@@ -782,7 +782,7 @@ watch(
 	}
 
 	> * + * {
-		margin-top: 0.75em;
+		margin-block-start: 0.75em;
 	}
 
 	ul,
@@ -882,8 +882,8 @@ watch(
 	}
 
 	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);
 	}
 
 	hr {
@@ -913,13 +913,13 @@ watch(
 			position: relative;
 
 			> * {
-				margin-bottom: 0;
+				margin-block-end: 0;
 			}
 		}
 
 		th {
 			font-weight: bold;
-			text-align: left;
+			text-align: start;
 			background-color: var(--grey-200);
 		}
 
@@ -953,15 +953,15 @@ watch(
 	// Lists
 
 	ul {
-		margin-left: .5rem;
-		margin-top: 0 !important;
+		margin-inline-start: .5rem;
+		margin-block-start: 0 !important;
 
 		li {
-			margin-top: 0;
+			margin-block-start: 0;
 		}
 
 		p {
-			margin-bottom: 0 !important;
+			margin-block-end: 0 !important;
 		}
 	}
 }
@@ -979,7 +979,7 @@ watch(
 ul[data-type='taskList'] {
 	list-style: none;
 	padding: 0;
-	margin-left: 0;
+	margin-inline-start: 0;
 
 	li[data-checked='true'] {
 		color: var(--grey-500);
@@ -988,11 +988,11 @@ ul[data-type='taskList'] {
 
 	li {
 		display: flex;
-		margin-top: 0.25rem;
+		margin-block-start: 0.25rem;
 
 		> label {
 			flex: 0 0 auto;
-			margin-right: 0.5rem;
+			margin-inline-end: 0.5rem;
 			user-select: none;
 		}
 
diff --git a/frontend/src/components/misc/ApiConfig.vue b/frontend/src/components/misc/ApiConfig.vue
index 5b07abe20..a9acaa4a5 100644
--- a/frontend/src/components/misc/ApiConfig.vue
+++ b/frontend/src/components/misc/ApiConfig.vue
@@ -127,12 +127,12 @@ async function setApiUrl() {
 
 <style lang="scss" scoped>
 .api-config {
-	margin-bottom: .75rem;
+	margin-block-end: .75rem;
 }
 
 .api-url-info {
 	font-size: .9rem;
-	text-align: right;
+	text-align: end;
 }
 
 .url {
diff --git a/frontend/src/components/misc/Card.vue b/frontend/src/components/misc/Card.vue
index 60b79572d..6e191bdd8 100644
--- a/frontend/src/components/misc/Card.vue
+++ b/frontend/src/components/misc/Card.vue
@@ -70,7 +70,7 @@ defineEmits<{
 .card {
 	background-color: var(--white);
 	border-radius: $radius;
-	margin-bottom: 1rem;
+	margin-block-end: 1rem;
 	border: 1px solid var(--card-border-color);
 	box-shadow: var(--shadow-sm);
 
diff --git a/frontend/src/components/misc/CreateEdit.vue b/frontend/src/components/misc/CreateEdit.vue
index cf2219cee..127ac8663 100644
--- a/frontend/src/components/misc/CreateEdit.vue
+++ b/frontend/src/components/misc/CreateEdit.vue
@@ -8,7 +8,7 @@
 			:title="title"
 			:shadow="false"
 			:padding="false"
-			class="has-text-left"
+			class="has-text-start"
 			:loading="loading"
 			:show-close="true"
 			@close="$router.back()"
@@ -38,7 +38,7 @@
 						variant="primary"
 						:icon="primaryIcon"
 						:disabled="primaryDisabled || loading"
-						class="ml-2"
+						class="ms-2"
 						@click.prevent.stop="primary"
 					>
 						{{ primaryLabel || $t('misc.create') }}
diff --git a/frontend/src/components/misc/Dropdown.vue b/frontend/src/components/misc/Dropdown.vue
index 07c5a9f04..8a6705a8d 100644
--- a/frontend/src/components/misc/Dropdown.vue
+++ b/frontend/src/components/misc/Dropdown.vue
@@ -93,7 +93,7 @@ onClickOutside(dropdown, (e) => {
 
 .dropdown-menu {
 	min-width: 12rem;
-	padding-top: 4px;
+	padding-block-start: 4px;
 	position: absolute;
 	top: 100%;
 	z-index: 20;
@@ -105,8 +105,8 @@ onClickOutside(dropdown, (e) => {
 .dropdown-content {
 	background-color: var(--scheme-main);
 	border-radius: $radius;
-	padding-bottom: .5rem;
-	padding-top: .5rem;
+	padding-block-end: .5rem;
+	padding-block-start: .5rem;
 	box-shadow: var(--shadow-md);
 }
 
diff --git a/frontend/src/components/misc/DropdownItem.vue b/frontend/src/components/misc/DropdownItem.vue
index 1affd68e1..1a58d4d90 100644
--- a/frontend/src/components/misc/DropdownItem.vue
+++ b/frontend/src/components/misc/DropdownItem.vue
@@ -60,7 +60,7 @@ defineProps<DropDownItemProps>()
 }
 
 .icon {
-	padding-right: .5rem;
+	padding-inline-end: .5rem;
 	color: var(--grey-300);
 }
 
diff --git a/frontend/src/components/misc/Legal.vue b/frontend/src/components/misc/Legal.vue
index 3a9c7a138..6e6b6e20c 100644
--- a/frontend/src/components/misc/Legal.vue
+++ b/frontend/src/components/misc/Legal.vue
@@ -29,8 +29,8 @@ const privacyPolicyUrl = computed(() => configStore.legal.privacyPolicyUrl)
 
 <style lang="scss" scoped>
 .legal-links {
-  margin-top: 1rem;
-  text-align: right;
+  margin-block-start: 1rem;
+  text-align: end;
   color: var(--grey-300);
   font-size: 1rem;
 }
diff --git a/frontend/src/components/misc/Message.vue b/frontend/src/components/misc/Message.vue
index 16f8e8dc0..0303c7e06 100644
--- a/frontend/src/components/misc/Message.vue
+++ b/frontend/src/components/misc/Message.vue
@@ -23,7 +23,7 @@ const props = withDefaults(defineProps<{
 const TEXT_ALIGN_MAP = {
 	left: '',
 	center: 'has-text-centered',
-	right: 'has-text-right',
+	right: 'has-text-end',
 } as const
 
 export type TextAlignVariant = keyof typeof TEXT_ALIGN_MAP
diff --git a/frontend/src/components/misc/Modal.vue b/frontend/src/components/misc/Modal.vue
index 05dbed14e..92b0a44e9 100644
--- a/frontend/src/components/misc/Modal.vue
+++ b/frontend/src/components/misc/Modal.vue
@@ -205,7 +205,7 @@ $modal-width: 1024px;
 	z-index: 4600;
 
 	:deep(.card-content) {
-		text-align: left;
+		text-align: start;
 
 		.info {
 			font-style: italic;
@@ -259,7 +259,7 @@ $modal-width: 1024px;
 	display: flex;
 	flex-direction: column;
 	justify-content: space-between;
-	margin-bottom: 0 !important;
+	margin-block-end: 0 !important;
   }
 }
 
diff --git a/frontend/src/components/misc/NoAuthWrapper.vue b/frontend/src/components/misc/NoAuthWrapper.vue
index 5d6d2126c..5a914e3d3 100644
--- a/frontend/src/components/misc/NoAuthWrapper.vue
+++ b/frontend/src/components/misc/NoAuthWrapper.vue
@@ -77,7 +77,7 @@ useTitle(() => title.value)
 	place-items: center;
 
 	@media screen and (max-width: $fullhd) {
-		padding-bottom: 15rem;
+		padding-block-end: 15rem;
 	}
 }
 
diff --git a/frontend/src/components/misc/Notification.vue b/frontend/src/components/misc/Notification.vue
index 56039a70e..9159c0aa3 100644
--- a/frontend/src/components/misc/Notification.vue
+++ b/frontend/src/components/misc/Notification.vue
@@ -53,6 +53,6 @@
 }
 
 .buttons {
-	margin-top: 0.5rem;
+	margin-block-start: 0.5rem;
 }
 </style>
diff --git a/frontend/src/components/misc/Ready.vue b/frontend/src/components/misc/Ready.vue
index 1effdcd7e..a53ccd4e4 100644
--- a/frontend/src/components/misc/Ready.vue
+++ b/frontend/src/components/misc/Ready.vue
@@ -90,13 +90,13 @@ const baseStore = useBaseStore()
 }
 
 .logo {
-	margin-bottom: 1rem;
+	margin-block-end: 1rem;
 	width: 100px;
 	height: 100px;
 }
 
 .loader-container {
-	margin-right: 1rem;
+	margin-inline-end: 1rem;
 
 	&.is-loading::after {
 		border-left-color: var(--grey-400);
diff --git a/frontend/src/components/misc/User.vue b/frontend/src/components/misc/User.vue
index 9dab04df8..6e3820c18 100644
--- a/frontend/src/components/misc/User.vue
+++ b/frontend/src/components/misc/User.vue
@@ -58,6 +58,6 @@ watch(() => [props.user, props.avatarSize], loadAvatar, { immediate: true })
 .avatar {
 	border-radius: 100%;
 	vertical-align: middle;
-	margin-right: .5rem;
+	margin-inline-end: .5rem;
 }
 </style>
diff --git a/frontend/src/components/misc/keyboard-shortcuts/index.vue b/frontend/src/components/misc/keyboard-shortcuts/index.vue
index 445969b6e..6fb035e4e 100644
--- a/frontend/src/components/misc/keyboard-shortcuts/index.vue
+++ b/frontend/src/components/misc/keyboard-shortcuts/index.vue
@@ -64,11 +64,11 @@ function close() {
 
 <style scoped>
 .keyboard-shortcuts {
-	text-align: left;
+	text-align: start;
 }
 
 .message:not(:last-child) {
-	margin-bottom: 1rem;
+	margin-block-end: 1rem;
 }
 
 .message-body {
@@ -81,11 +81,11 @@ function close() {
 }
 
 .shortcut-title {
-	margin-bottom: .5rem;
+	margin-block-end: .5rem;
 }
 
 .shortcut-keys {
 	justify-content: end;
-	margin-bottom: .5rem;
+	margin-block-end: .5rem;
 }
 </style>
diff --git a/frontend/src/components/notifications/Notifications.vue b/frontend/src/components/notifications/Notifications.vue
index 44a67a31e..49fffdbe1 100644
--- a/frontend/src/components/notifications/Notifications.vue
+++ b/frontend/src/components/notifications/Notifications.vue
@@ -44,12 +44,12 @@
 						<div>
 							<span
 								v-if="n.notification.doer"
-								class="has-text-weight-bold mr-1"
+								class="has-text-weight-bold me-1"
 							>
 								{{ getDisplayName(n.notification.doer) }}
 							</span>
 							<BaseButton
-								class="has-text-left"
+								class="has-text-start"
 								@click="() => to(n, index)()"
 							>
 								{{ n.toText(userInfo) }}
@@ -283,7 +283,7 @@ async function markAllRead() {
 				}
 
 				img {
-					margin-right: 0;
+					margin-inline-end: 0;
 				}
 			}
 
@@ -292,7 +292,7 @@ async function markAllRead() {
 			}
 
 			&:last-child {
-				margin-bottom: .25rem;
+				margin-block-end: .25rem;
 			}
 
 			a {
diff --git a/frontend/src/components/project/ProjectWrapper.vue b/frontend/src/components/project/ProjectWrapper.vue
index 9d59eb033..bbb784a19 100644
--- a/frontend/src/components/project/ProjectWrapper.vue
+++ b/frontend/src/components/project/ProjectWrapper.vue
@@ -103,7 +103,7 @@ function getViewTitle(view: IProjectView) {
 <style lang="scss" scoped>
 .switch-view-container {
 	min-height: $switch-view-height;
-	margin-bottom: 1rem;
+	margin-block-end: 1rem;
 	
 	display: flex;
 	justify-content: space-between;
@@ -132,7 +132,7 @@ function getViewTitle(view: IProjectView) {
 	transition: all 100ms;
 
 	&:not(:last-child) {
-		margin-right: .5rem;
+		margin-inline-end: .5rem;
 	}
 
 	&:hover {
@@ -150,14 +150,14 @@ function getViewTitle(view: IProjectView) {
 
 // FIXME: this should be in notification and set via a prop
 .is-archived .notification.is-warning {
-	margin-bottom: 1rem;
+	margin-block-end: 1rem;
 }
 
 .project-title-print {
 	display: none;
 	font-size: 1.75rem;
 	text-align: center;
-	margin-bottom: .5rem;
+	margin-block-end: .5rem;
 
 	@media print {
 		display: block;
diff --git a/frontend/src/components/project/partials/FilterInput.vue b/frontend/src/components/project/partials/FilterInput.vue
index 3147d3d6e..28da11bee 100644
--- a/frontend/src/components/project/partials/FilterInput.vue
+++ b/frontend/src/components/project/partials/FilterInput.vue
@@ -373,7 +373,7 @@ const blurDebounced = useDebounceFn(() => emit('blur'), 500)
 	button.filter-query__date_value {
 		border-radius: $radius;
 		position: absolute;
-		margin-top: calc((0.25em - 0.125rem) * -1);
+		margin-block-start: calc((0.25em - 0.125rem) * -1);
 		height: 1.75rem;
 		padding: 0;
 		border: 0;
diff --git a/frontend/src/components/project/partials/Filters.vue b/frontend/src/components/project/partials/Filters.vue
index a4a76c209..1db43df38 100644
--- a/frontend/src/components/project/partials/Filters.vue
+++ b/frontend/src/components/project/partials/Filters.vue
@@ -37,7 +37,7 @@
 		>
 			<XButton
 				variant="secondary"
-				class="mr-2"
+				class="me-2"
 				:disabled="filterQuery === ''"
 				@click.prevent.stop="clearFiltersAndEmit"
 			>
diff --git a/frontend/src/components/project/partials/ProjectCard.vue b/frontend/src/components/project/partials/ProjectCard.vue
index fdd14839c..a010dc311 100644
--- a/frontend/src/components/project/partials/ProjectCard.vue
+++ b/frontend/src/components/project/partials/ProjectCard.vue
@@ -134,7 +134,7 @@ const textOnlyDescription = computed(() => {
 	line-height: var(--title-line-height);
 	color: var(--text);
 	width: 100%;
-	margin-bottom: 0;
+	margin-block-end: 0;
 	max-height: calc(100% - (var(--project-card-padding) + 1rem)); // padding & height of the "is archived" badge
 	overflow: hidden;
 	text-overflow: ellipsis;
diff --git a/frontend/src/components/project/partials/ProjectCardGrid.vue b/frontend/src/components/project/partials/ProjectCardGrid.vue
index 0cd569f46..6df434d43 100644
--- a/frontend/src/components/project/partials/ProjectCardGrid.vue
+++ b/frontend/src/components/project/partials/ProjectCardGrid.vue
@@ -75,6 +75,6 @@ const filteredProjects = computed(() => {
 
 .project-grid-item {
 	display: grid;
-	margin-top: 0; // remove padding coming form .content li + li
+	margin-block-start: 0; // remove padding coming form .content li + li
 }
 </style>
diff --git a/frontend/src/components/project/views/ProjectGantt.vue b/frontend/src/components/project/views/ProjectGantt.vue
index 641040d9c..fbd6cae18 100644
--- a/frontend/src/components/project/views/ProjectGantt.vue
+++ b/frontend/src/components/project/views/ProjectGantt.vue
@@ -167,14 +167,14 @@ const flatPickerConfig = computed(() => ({
 
 <style lang="scss" scoped>
 .gantt-chart-container {
-	padding-bottom: 1rem;
+	padding-block-end: 1rem;
 }
 
 .gantt-options {
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
-	margin-bottom: 1rem;
+	margin-block-end: 1rem;
 
 	@media screen and (max-width: $tablet) {
 		flex-direction: column;
@@ -191,18 +191,18 @@ const flatPickerConfig = computed(() => ({
 }
 
 .field {
-	margin-bottom: 0;
+	margin-block-end: 0;
 	width: 33%;
 
 	&:not(:last-child) {
-		padding-right: .5rem;
+		padding-inline-end: .5rem;
 	}
 
 	@media screen and (max-width: $tablet) {
 		width: 100%;
 		max-width: 100%;
-		margin-top: .5rem;
-		padding-right: 0 !important;
+		margin-block-start: .5rem;
+		padding-inline-end: 0 !important;
 	}
 
 	&, .input {
diff --git a/frontend/src/components/project/views/ProjectKanban.vue b/frontend/src/components/project/views/ProjectKanban.vue
index 66be9e259..91b5e487d 100644
--- a/frontend/src/components/project/views/ProjectKanban.vue
+++ b/frontend/src/components/project/views/ProjectKanban.vue
@@ -46,7 +46,7 @@
 									<span
 										v-if="bucket.id !== 0 && view?.doneBucketId === bucket.id"
 										v-tooltip="$t('project.kanban.doneBucketHint')"
-										class="icon is-small has-text-success mr-2"
+										class="icon is-small has-text-success me-2"
 									>
 										<Icon icon="check-double" />
 									</span>
@@ -875,11 +875,11 @@ $filter-container-height: '1rem - #{$switch-view-height}';
 			padding: .25rem .5rem;
 
 			&:first-of-type {
-				padding-top: .5rem;
+				padding-block-start: .5rem;
 			}
 
 			&:last-of-type {
-				padding-bottom: .5rem;
+				padding-block-end: .5rem;
 			}
 		}
 
@@ -912,7 +912,7 @@ $filter-container-height: '1rem - #{$switch-view-height}';
 			transform: rotate(90deg) translateY(-100%);
 			transform-origin: top left;
 			// Using negative margins instead of translateY here to make all other buckets fill the empty space
-			margin-right: calc((#{$bucket-width} - #{$bucket-header-height} - #{$bucket-right-margin}) * -1);
+			margin-inline-end: calc((#{$bucket-width} - #{$bucket-header-height} - #{$bucket-right-margin}) * -1);
 			cursor: pointer;
 
 			.tasks, .bucket-footer {
diff --git a/frontend/src/components/project/views/ProjectList.vue b/frontend/src/components/project/views/ProjectList.vue
index e36e05fe0..0c221ad24 100644
--- a/frontend/src/components/project/views/ProjectList.vue
+++ b/frontend/src/components/project/views/ProjectList.vue
@@ -357,7 +357,7 @@ onBeforeUnmount(() => {
 	.handle {
 		opacity: 1;
 		transition: opacity $transition;
-		margin-right: .25rem;
+		margin-inline-end: .25rem;
 		cursor: grab;
 	}
 
@@ -373,10 +373,10 @@ onBeforeUnmount(() => {
 }
 
 .list-view {
-	padding-bottom: 1rem;
+	padding-block-end: 1rem;
 
 	:deep(.card) {
-		margin-bottom: 0;
+		margin-block-end: 0;
 	}
 }
 </style>
diff --git a/frontend/src/components/project/views/ProjectTable.vue b/frontend/src/components/project/views/ProjectTable.vue
index 5376233d9..8f6c97e5f 100644
--- a/frontend/src/components/project/views/ProjectTable.vue
+++ b/frontend/src/components/project/views/ProjectTable.vue
@@ -12,7 +12,7 @@
 						<XButton
 							icon="th"
 							variant="secondary"
-							class="mr-2"
+							class="me-2"
 							@click.prevent.stop="toggle()"
 						>
 							{{ $t('project.table.columns') }}
@@ -219,7 +219,7 @@
 											v-if="t.assignees.length > 0"
 											:assignees="t.assignees"
 											:avatar-size="28"
-											class="ml-1"
+											class="ms-1"
 											:inline="true"
 										/>
 									</td>
diff --git a/frontend/src/components/project/views/ViewEditForm.vue b/frontend/src/components/project/views/ViewEditForm.vue
index 368012501..086b66d74 100644
--- a/frontend/src/components/project/views/ViewEditForm.vue
+++ b/frontend/src/components/project/views/ViewEditForm.vue
@@ -285,7 +285,7 @@ function handleBubbleSave() {
 		>
 			<XButton
 				variant="tertiary"
-				class="mr-2"
+				class="me-2"
 				@click="emit('cancel')"
 			>
 				{{ $t('misc.cancel') }}
@@ -308,12 +308,12 @@ function handleBubbleSave() {
 		background: transparent;
 		border: none;
 		color: var(--danger);
-		padding-right: .75rem;
+		padding-inline-end: .75rem;
 		cursor: pointer;
 	}
 
 	&-form {
-		margin-bottom: .5rem;
+		margin-block-end: .5rem;
 		padding: .5rem;
 		border: 1px solid var(--grey-200);
 		border-radius: $radius;
diff --git a/frontend/src/components/quick-actions/QuickActions.vue b/frontend/src/components/quick-actions/QuickActions.vue
index 710faa178..01e559fba 100644
--- a/frontend/src/components/quick-actions/QuickActions.vue
+++ b/frontend/src/components/quick-actions/QuickActions.vue
@@ -613,12 +613,12 @@ function reset() {
 		font-size: 1.5rem;
 		
 		@media screen and (max-width: $tablet) {
-			padding-right: .25rem;
+			padding-inline-end: .25rem;
 		}
 	}
 
 	&.has-active-cmd .input {
-		padding-left: .5rem;
+		padding-inline-start: .5rem;
 	}
 
 	.close {
@@ -633,13 +633,13 @@ function reset() {
 
 .active-cmd {
 	font-size: 1.25rem;
-	margin-left: .5rem;
+	margin-inline-start: .5rem;
 	background-color: var(--grey-100);
 	color: var(--grey-800);
 }
 
 .results {
-	text-align: left;
+	text-align: start;
 	width: 100%;
 	color: var(--grey-800);
 }
@@ -656,7 +656,7 @@ function reset() {
 	width: 100%;
 	background: transparent;
 	color: var(--grey-800);
-	text-align: left;
+	text-align: start;
 	box-shadow: none;
 	border-radius: 0;
 	text-transform: none;
@@ -679,7 +679,7 @@ function reset() {
 	.saved-filter-icon {
 		font-size: .75rem;
 		width: .75rem;
-		margin-right: .25rem;
+		margin-inline-end: .25rem;
 		color: var(--grey-400)
 	}
 	
diff --git a/frontend/src/components/sharing/LinkSharing.vue b/frontend/src/components/sharing/LinkSharing.vue
index 34e3ab191..5dfcadde4 100644
--- a/frontend/src/components/sharing/LinkSharing.vue
+++ b/frontend/src/components/sharing/LinkSharing.vue
@@ -4,7 +4,7 @@
 			{{ $t('project.share.links.title') }}
 			<span
 				v-tooltip="$t('project.share.links.explanation')"
-				class="is-size-7 has-text-grey is-italic ml-3"
+				class="is-size-7 has-text-grey is-italic ms-3"
 			>
 				{{ $t('project.share.links.what') }}
 			</span>
diff --git a/frontend/src/components/sharing/UserTeam.vue b/frontend/src/components/sharing/UserTeam.vue
index ee2741dd9..041f539d7 100644
--- a/frontend/src/components/sharing/UserTeam.vue
+++ b/frontend/src/components/sharing/UserTeam.vue
@@ -97,7 +97,7 @@
 						<div class="select">
 							<select
 								v-model="selectedRight[s.id]"
-								class="mr-2"
+								class="me-2"
 								@change="toggleType(s)"
 							>
 								<option
diff --git a/frontend/src/components/tasks/AddTask.vue b/frontend/src/components/tasks/AddTask.vue
index 28e9f841a..03e12e3c4 100644
--- a/frontend/src/components/tasks/AddTask.vue
+++ b/frontend/src/components/tasks/AddTask.vue
@@ -285,7 +285,7 @@ defineExpose({
 .task-add,
 	// overwrite bulma styles
 .task-add .add-task__field {
-	margin-bottom: 0;
+	margin-block-end: 0;
 }
 
 .add-task-button {
diff --git a/frontend/src/components/tasks/GanttChart.vue b/frontend/src/components/tasks/GanttChart.vue
index ff2324c12..50f82e46c 100644
--- a/frontend/src/components/tasks/GanttChart.vue
+++ b/frontend/src/components/tasks/GanttChart.vue
@@ -233,7 +233,7 @@ const dateIsToday = computed(() => (date: Date) => {
 
 .g-upper-timeunit {
 	font-weight: bold;
-	border-right: 1px solid var(--grey-200);
+	border-inline-end: 1px solid var(--grey-200);
 	padding: .5rem 0;
 }
 
@@ -282,7 +282,7 @@ const dateIsToday = computed(() => (date: Date) => {
 		height: 75% !important;
 		opacity: .75 !important;
 		border-radius: $radius !important;
-		margin-top: 4px;
+		margin-block-start: 4px;
 	}
 }
 </style>
diff --git a/frontend/src/components/tasks/TaskForm.vue b/frontend/src/components/tasks/TaskForm.vue
index 52d359ba0..88881b799 100644
--- a/frontend/src/components/tasks/TaskForm.vue
+++ b/frontend/src/components/tasks/TaskForm.vue
@@ -73,7 +73,7 @@ async function createTask() {
 	max-width: 450px;
 
 	.input {
-		margin-right: .7rem;
+		margin-inline-end: .7rem;
 		font-size: .8rem;
 	}
 
diff --git a/frontend/src/components/tasks/partials/AssigneeList.vue b/frontend/src/components/tasks/partials/AssigneeList.vue
index e1399dd70..d3ed5d253 100644
--- a/frontend/src/components/tasks/partials/AssigneeList.vue
+++ b/frontend/src/components/tasks/partials/AssigneeList.vue
@@ -59,7 +59,7 @@ defineEmits<{
 	}
 
 	&:hover .assignee:not(:first-child) {
-		margin-left: -0.5rem;
+		margin-inline-start: -0.5rem;
 	}
 }
 
@@ -68,12 +68,12 @@ defineEmits<{
 	transition: all $transition;
 
 	&:not(:first-child) {
-		margin-left: -1rem;
+		margin-inline-start: -1rem;
 	}
 
 	:deep(.user img) {
 		border: 2px solid var(--white);
-		margin-right: 0;
+		margin-inline-end: 0;
 	}
 }
 
diff --git a/frontend/src/components/tasks/partials/Attachments.vue b/frontend/src/components/tasks/partials/Attachments.vue
index bf27c1d21..6a06b103e 100644
--- a/frontend/src/components/tasks/partials/Attachments.vue
+++ b/frontend/src/components/tasks/partials/Attachments.vue
@@ -301,7 +301,7 @@ async function setCoverImage(attachment: IAttachment | null) {
 }
 
 .files {
-	margin-bottom: 1rem;
+	margin-block-end: 1rem;
 }
 
 .attachment {
@@ -329,7 +329,7 @@ async function setCoverImage(attachment: IAttachment | null) {
 	font-weight: bold;
 	height: 2rem;
 	color: var(--text);
-	text-align: left;
+	text-align: start;
 }
 
 .info {
@@ -339,7 +339,7 @@ async function setCoverImage(attachment: IAttachment | null) {
 	flex-direction: column;
 
 	p {
-		margin-bottom: 0;
+		margin-block-end: 0;
 		display: flex;
 
 		> span,
@@ -472,7 +472,7 @@ async function setCoverImage(attachment: IAttachment | null) {
 .is-task-cover {
 	background: var(--primary);
 	color: var(--white);
-	margin-left: .25rem;
+	margin-inline-start: .25rem;
 	padding: .25rem .35rem;
 	border-radius: 4px;
 	font-size: .75rem;
diff --git a/frontend/src/components/tasks/partials/ChecklistSummary.vue b/frontend/src/components/tasks/partials/ChecklistSummary.vue
index 1f632a04a..ed05f489a 100644
--- a/frontend/src/components/tasks/partials/ChecklistSummary.vue
+++ b/frontend/src/components/tasks/partials/ChecklistSummary.vue
@@ -64,14 +64,14 @@ const label = computed(() => {
 	color: var(--grey-500);
 	display: inline-flex;
 	align-items: center;
-	padding-left: .5rem;
+	padding-inline-start: .5rem;
 	font-size: .9rem;
 }
 
 svg {
 	transform: rotate(-90deg);
 	transition: stroke-dashoffset 0.35s;
-	margin-right: .25rem;
+	margin-inline-end: .25rem;
 }
 
 circle {
diff --git a/frontend/src/components/tasks/partials/Comments.vue b/frontend/src/components/tasks/partials/Comments.vue
index fbadfcba7..3c9429127 100644
--- a/frontend/src/components/tasks/partials/Comments.vue
+++ b/frontend/src/components/tasks/partials/Comments.vue
@@ -16,9 +16,9 @@
 		<div class="comments">
 			<span
 				v-if="taskCommentService.loading && saving === null && !creating"
-				class="is-flex is-align-items-center my-4 ml-2"
+				class="is-flex is-align-items-center my-4 ms-2"
 			>
-				<span class="loader is-inline-block mr-2" />
+				<span class="loader is-inline-block me-2" />
 				{{ $t('task.comment.loading') }}
 			</span>
 			<div
@@ -79,7 +79,7 @@
 								"
 								class="is-inline-flex"
 							>
-								<span class="loader is-inline-block mr-2" />
+								<span class="loader is-inline-block me-2" />
 								{{ $t('misc.saving') }}
 							</span>
 							<span
@@ -153,7 +153,7 @@
 								v-if="taskCommentService.loading && creating"
 								class="is-inline-flex"
 							>
-								<span class="loader is-inline-block mr-2" />
+								<span class="loader is-inline-block me-2" />
 								{{ $t('task.comment.creating') }}
 							</span>
 						</CustomTransition>
@@ -460,8 +460,8 @@ function getCommentUrl(commentId: string) {
 			display: block;
 			width: 20px;
 			height: 20px;
-			padding-right: 0;
-			margin-right: .5rem;
+			padding-inline-end: 0;
+			margin-inline-end: .5rem;
 		}
 
 		@media screen and (min-width: $tablet) {
@@ -498,6 +498,6 @@ function getCommentUrl(commentId: string) {
 }
 
 .comments-container {
-	scroll-margin-top: 4rem;
+	scroll-margin-block-start: 4rem;
 }
 </style>
diff --git a/frontend/src/components/tasks/partials/CreatedUpdated.vue b/frontend/src/components/tasks/partials/CreatedUpdated.vue
index e378c5eaa..9cfcd7da5 100644
--- a/frontend/src/components/tasks/partials/CreatedUpdated.vue
+++ b/frontend/src/components/tasks/partials/CreatedUpdated.vue
@@ -64,6 +64,6 @@ const doneFormatted = computed(() => formatDateLong(props.task.doneAt))
 .created {
 	font-size: .75rem;
 	color: var(--grey-500);
-	text-align: right;
+	text-align: end;
 }
 </style>
diff --git a/frontend/src/components/tasks/partials/Description.vue b/frontend/src/components/tasks/partials/Description.vue
index be4a0bb1a..b263382b8 100644
--- a/frontend/src/components/tasks/partials/Description.vue
+++ b/frontend/src/components/tasks/partials/Description.vue
@@ -10,7 +10,7 @@
 					v-if="loading && saving"
 					class="is-small is-inline-flex"
 				>
-					<span class="loader is-inline-block mr-2" />
+					<span class="loader is-inline-block me-2" />
 					{{ $t('misc.saving') }}
 				</span>
 				<span
@@ -146,6 +146,6 @@ async function uploadCallback(files: File[] | FileList): Promise<string[]> {
 .tiptap__task-description {
 	// The exact amount of pixels we need to make the description icon align with the buttons and the form inside the editor.
 	// The icon is not exactly the same length on all sides so we need to hack our way around it.
-	margin-left: 4px;
+	margin-inline-start: 4px;
 }
 </style>
diff --git a/frontend/src/components/tasks/partials/EditAssignees.vue b/frontend/src/components/tasks/partials/EditAssignees.vue
index e6bccfdab..79e657920 100644
--- a/frontend/src/components/tasks/partials/EditAssignees.vue
+++ b/frontend/src/components/tasks/partials/EditAssignees.vue
@@ -123,6 +123,6 @@ async function findUser(query: string) {
 
 <style lang="scss">
 .edit-assignees.has-assignees.multiselect .input {
-	padding-left: 0;
+	padding-inline-start: 0;
 }
 </style>
diff --git a/frontend/src/components/tasks/partials/Heading.vue b/frontend/src/components/tasks/partials/Heading.vue
index 02c36bce1..d5ee93f40 100644
--- a/frontend/src/components/tasks/partials/Heading.vue
+++ b/frontend/src/components/tasks/partials/Heading.vue
@@ -46,7 +46,7 @@
 				v-if="loading && saving"
 				class="is-inline-flex is-align-items-center"
 			>
-				<span class="loader is-inline-block mr-2" />
+				<span class="loader is-inline-block me-2" />
 				{{ $t('misc.saving') }}
 			</span>
 			<span
@@ -55,7 +55,7 @@
 			>
 				<Icon
 					icon="check"
-					class="mr-2"
+					class="me-2"
 				/>
 				{{ $t('misc.saved') }}
 			</span>
@@ -152,13 +152,13 @@ async function cancel(element: HTMLInputElement) {
 }
 
 .title {
-	margin-bottom: 0;
+	margin-block-end: 0;
 }
 
 .title.input {
 	// 1.8rem is the font-size, 1.125 is the line-height, .3rem padding everywhere, 1px border around the whole thing.
 	min-height: calc(1.8rem * 1.125 + .6rem + 2px);
-	margin-right: 0;
+	margin-inline-end: 0;
 
 	@media screen and (max-width: $tablet) {
 		margin: 0 -.3rem .5rem -.3rem; // the title has 0.3rem padding - this make the text inside of it align with the rest
@@ -177,7 +177,7 @@ async function cancel(element: HTMLInputElement) {
 
 .close {
 	font-size: 2rem;
-	margin-left: 0.5rem;
+	margin-inline-start: 0.5rem;
 	line-height: 1;
 
 	@media screen and (max-width: $tablet) {
diff --git a/frontend/src/components/tasks/partials/KanbanCard.vue b/frontend/src/components/tasks/partials/KanbanCard.vue
index 551c9a897..9149d4a9b 100644
--- a/frontend/src/components/tasks/partials/KanbanCard.vue
+++ b/frontend/src/components/tasks/partials/KanbanCard.vue
@@ -34,7 +34,7 @@
 					</template>
 					<span
 						v-if="showTaskPosition"
-						class="tw-text-red-600 tw-pl-2"
+						class="tw-text-red-600 tw-ps-2"
 					>
 						{{ task.position }}
 					</span>
@@ -74,7 +74,7 @@
 					v-if="task.assignees.length > 0"
 					:assignees="task.assignees"
 					:avatar-size="24"
-					class="mr-1"
+					class="me-1"
 				/>
 				<ChecklistSummary
 					:task="task"
@@ -248,7 +248,7 @@ $task-background: var(--white);
 		align-items: center;
 
 		.icon {
-			margin-right: .25rem;
+			margin-inline-end: .25rem;
 		}
 
 		&.overdue {
@@ -266,18 +266,18 @@ $task-background: var(--white);
 		display: flex;
 		flex-wrap: wrap;
 		align-items: center;
-		margin-top: .25rem;
+		margin-block-start: .25rem;
 
 		:deep(.tag),
 		:deep(.checklist-summary),
 		.assignees,
 		.icon,
 		.priority-label {
-			margin-right: .25rem;
+			margin-inline-end: .25rem;
 		}
 
 		:deep(.checklist-summary) {
-			padding-left: 0;
+			padding-inline-start: 0;
 		}
 
 		.assignees {
@@ -295,7 +295,7 @@ $task-background: var(--white);
 
 		// FIXME: should be in Labels.vue
 		:deep(.tag) {
-			margin-left: 0;
+			margin-inline-start: 0;
 		}
 
 		.priority-label {
@@ -305,7 +305,7 @@ $task-background: var(--white);
 			.icon {
 				height: 1rem;
 				padding: 0 .25rem;
-				margin-top: 0;
+				margin-block-start: 0;
 			}
 		}
 	}
@@ -325,7 +325,7 @@ $task-background: var(--white);
 	.task-id {
 		color: var(--grey-500);
 		font-size: .8rem;
-		margin-bottom: .25rem;
+		margin-block-end: .25rem;
 		display: flex;
 	}
 
@@ -378,7 +378,7 @@ $task-background: var(--white);
 }
 
 .kanban-card__done {
-	margin-right: .25rem;
+	margin-inline-end: .25rem;
 }
 
 .task-progress {
diff --git a/frontend/src/components/tasks/partials/Label.vue b/frontend/src/components/tasks/partials/Label.vue
index 8bfb03720..aa1dd0214 100644
--- a/frontend/src/components/tasks/partials/Label.vue
+++ b/frontend/src/components/tasks/partials/Label.vue
@@ -22,7 +22,7 @@ const {getLabelStyles} = useLabelStyles()
 <style scoped lang="scss">
 .tag {
 	& + & {
-		margin-left: 0.5rem;
+		margin-inline-start: 0.5rem;
 	}
 }
 </style>
diff --git a/frontend/src/components/tasks/partials/Labels.vue b/frontend/src/components/tasks/partials/Labels.vue
index 0bc8b7b87..55332c233 100644
--- a/frontend/src/components/tasks/partials/Labels.vue
+++ b/frontend/src/components/tasks/partials/Labels.vue
@@ -29,8 +29,8 @@ const displayLabels = computed(() =>
 	display: inline;
 	
 	:deep(.tag) {
-		margin-top: .125rem;
-		margin-bottom: .125rem;
+		margin-block-start: .125rem;
+		margin-block-end: .125rem;
 	}
 }
 </style>
diff --git a/frontend/src/components/tasks/partials/PriorityLabel.vue b/frontend/src/components/tasks/partials/PriorityLabel.vue
index 5d59d7c03..314c07d47 100644
--- a/frontend/src/components/tasks/partials/PriorityLabel.vue
+++ b/frontend/src/components/tasks/partials/PriorityLabel.vue
@@ -67,6 +67,6 @@ const minimumPriority = computed(() => {
 .icon {
 	vertical-align: top;
 	width: auto !important;
-	padding-right: .5rem;
+	padding-inline-end: .5rem;
 }
 </style>
diff --git a/frontend/src/components/tasks/partials/RelatedTasks.vue b/frontend/src/components/tasks/partials/RelatedTasks.vue
index 34f5ee435..f2952f2b5 100644
--- a/frontend/src/components/tasks/partials/RelatedTasks.vue
+++ b/frontend/src/components/tasks/partials/RelatedTasks.vue
@@ -23,7 +23,7 @@
 							v-if="taskRelationService.loading"
 							class="is-inline-flex"
 						>
-							<span class="loader is-inline-block mr-2" />
+							<span class="loader is-inline-block me-2" />
 							{{ $t('misc.saving') }}
 						</span>
 						<span
@@ -388,7 +388,7 @@ async function toggleTaskDone(task: ITask) {
 
 <style lang="scss" scoped>
 .add-task-relation-button {
-	margin-top: -3rem;
+	margin-block-start: -3rem;
 
 	svg {
 		transition: transform $transition;
@@ -462,6 +462,6 @@ async function toggleTaskDone(task: ITask) {
 .task-done-checkbox {
 	padding: 0;
 	height: 18px; // The exact height of the checkbox in the container
-	margin-right: .75rem;
+	margin-inline-end: .75rem;
 }
 </style>
diff --git a/frontend/src/components/tasks/partials/Reminders.vue b/frontend/src/components/tasks/partials/Reminders.vue
index 1b120fa2e..10dca5399 100644
--- a/frontend/src/components/tasks/partials/Reminders.vue
+++ b/frontend/src/components/tasks/partials/Reminders.vue
@@ -116,7 +116,7 @@ function removeReminderByIndex(index: number) {
 	}
 
 	&::last-child {
-		margin-bottom: 0.75rem;
+		margin-block-end: 0.75rem;
 	}
 }
 
@@ -127,7 +127,7 @@ function removeReminderByIndex(index: number) {
 .remove {
 	color: var(--danger);
 	vertical-align: top;
-	padding-left: .5rem;
+	padding-inline-start: .5rem;
 	line-height: 1;
 }
 </style>
diff --git a/frontend/src/components/tasks/partials/RepeatAfter.vue b/frontend/src/components/tasks/partials/RepeatAfter.vue
index 922187b96..a57ba7e31 100644
--- a/frontend/src/components/tasks/partials/RepeatAfter.vue
+++ b/frontend/src/components/tasks/partials/RepeatAfter.vue
@@ -54,7 +54,7 @@
 			v-if="task.repeatMode !== TASK_REPEAT_MODES.REPEAT_MODE_MONTH"
 			class="is-flex"
 		>
-			<p class="pr-4">
+			<p class="pe-4">
 				{{ $t('task.repeat.each') }}
 			</p>
 			<div class="field has-addons is-fullwidth">
@@ -162,7 +162,7 @@ function setRepeatAfter(amount: number, type: IRepeatAfter['type']) {
 
 <style lang="scss" scoped>
 p {
-	padding-top: 6px;
+	padding-block-start: 6px;
 }
 
 .input {
diff --git a/frontend/src/components/tasks/partials/SingleTaskInProject.vue b/frontend/src/components/tasks/partials/SingleTaskInProject.vue
index 4db96a8b7..3b1ff337e 100644
--- a/frontend/src/components/tasks/partials/SingleTaskInProject.vue
+++ b/frontend/src/components/tasks/partials/SingleTaskInProject.vue
@@ -420,7 +420,7 @@ defineExpose({
 
 		.dueDate {
 			display: inline-block;
-			margin-left: 5px;
+			margin-inline-start: 5px;
 
 			&:focus-visible {
 				box-shadow: none;
@@ -447,16 +447,16 @@ defineExpose({
 	.avatar {
 		border-radius: 50%;
 		vertical-align: bottom;
-		margin-left: 5px;
+		margin-inline-start: 5px;
 		height: 27px;
 		width: 27px;
 	}
 
 	.project-task-icon {
-		margin-left: 6px;
+		margin-inline-start: 6px;
 
 		&:not(:first-of-type) {
-			margin-left: 8px;
+			margin-inline-start: 8px;
 		}
 
 	}
@@ -503,8 +503,8 @@ defineExpose({
 
 	:deep(.fancy-checkbox) {
 		height: 18px;
-		padding-top: 0;
-		padding-right: .5rem;
+		padding-block-start: 0;
+		padding-inline-end: .5rem;
 
 		span {
 			display: none;
@@ -522,7 +522,7 @@ defineExpose({
 	}
 
 	.show-project .parent-tasks {
-		padding-left: .25rem;
+		padding-inline-start: .25rem;
 	}
 
 	.remove {
@@ -550,7 +550,7 @@ defineExpose({
 }
 
 .subtask-nested {
-	margin-left: 1.75rem;
+	margin-inline-start: 1.75rem;
 }
 
 :deep(.popup) {
diff --git a/frontend/src/components/tasks/partials/SingleTaskInlineReadonly.vue b/frontend/src/components/tasks/partials/SingleTaskInlineReadonly.vue
index 9d624c437..06184934d 100644
--- a/frontend/src/components/tasks/partials/SingleTaskInlineReadonly.vue
+++ b/frontend/src/components/tasks/partials/SingleTaskInlineReadonly.vue
@@ -5,7 +5,7 @@
 				v-if="showProject && typeof project !== 'undefined'"
 				v-tooltip="$t('task.detail.belongsToProject', {project: project.title})"
 				class="task-project"
-				:class="{'mr-2': task.hexColor !== ''}"
+				:class="{'me-2': task.hexColor !== ''}"
 			>
 				{{ project.title }}
 			</span>
@@ -13,7 +13,7 @@
 			<ColorBubble
 				v-if="task.hexColor !== ''"
 				:color="getHexColor(task.hexColor)"
-				class="mr-1"
+				class="me-1"
 			/>
 
 			<PriorityLabel
@@ -36,7 +36,7 @@
 
 		<Labels
 			v-if="task.labels.length > 0"
-			class="labels ml-2 mr-1"
+			class="labels ms-2 me-1"
 			:labels="task.labels"
 		/>
 
@@ -44,7 +44,7 @@
 			v-if="task.assignees.length > 0"
 			:assignees="task.assignees"
 			:avatar-size="20"
-			class="ml-1"
+			class="ms-1"
 			:inline="true"
 		/>
 
@@ -148,7 +148,7 @@ const project = computed(() => projectStore.projects[props.task.projectId])
 
 	.dueDate {
 		display: inline-block;
-		margin-left: 5px;
+		margin-inline-start: 5px;
 	}
 
 	.overdue {
@@ -165,16 +165,16 @@ const project = computed(() => projectStore.projects[props.task.projectId])
 	.avatar {
 		border-radius: 50%;
 		vertical-align: bottom;
-		margin-left: .5rem;
+		margin-inline-start: .5rem;
 		height: 21px;
 		width: 21px;
 	}
 
 	.project-task-icon {
-		margin-left: 6px;
+		margin-inline-start: 6px;
 
 		&:not(:first-of-type) {
-			margin-left: 8px;
+			margin-inline-start: 8px;
 		}
 
 	}
@@ -196,7 +196,7 @@ const project = computed(() => projectStore.projects[props.task.projectId])
 	span.parent-tasks {
 		color: var(--grey-500);
 		width: auto;
-		margin-left: .25rem;
+		margin-inline-start: .25rem;
 	}
 }
 </style>
diff --git a/frontend/src/styles/theme/form.scss b/frontend/src/styles/theme/form.scss
index f0e572231..a2b7dc79d 100644
--- a/frontend/src/styles/theme/form.scss
+++ b/frontend/src/styles/theme/form.scss
@@ -36,7 +36,7 @@
 }
 
 .select:after {
-  margin-top: -0.575rem;
+  margin-block-start: -0.575rem;
 }
 
 .select select {
diff --git a/frontend/src/styles/theme/loading.scss b/frontend/src/styles/theme/loading.scss
index 4cc5e77e7..5389bbf0a 100644
--- a/frontend/src/styles/theme/loading.scss
+++ b/frontend/src/styles/theme/loading.scss
@@ -34,7 +34,7 @@
     width: 2rem;
     height: 2rem;
     margin-inline-start: calc(50% - 1rem);
-    margin-top: 1rem;
+    margin-block-start: 1rem;
     border-width: 0.25rem;
   }
 }
diff --git a/frontend/src/styles/theme/theme.scss b/frontend/src/styles/theme/theme.scss
index 8af4c9651..6ec472a37 100644
--- a/frontend/src/styles/theme/theme.scss
+++ b/frontend/src/styles/theme/theme.scss
@@ -69,7 +69,7 @@ h6 {
 }
 
 button.table {
-  margin-bottom: 0 !important;
+  margin-block-end: 0 !important;
 }
 
 .is-max-width-desktop {
diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
index 6b778d93d..11bb42b40 100644
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -92,6 +92,6 @@ function updateTaskKey() {
 
 <style scoped lang="scss">
 .show-tasks {
-	margin-top: 2rem;
+	margin-block-start: 2rem;
 }
 </style>
diff --git a/frontend/src/views/migrate/Migration.vue b/frontend/src/views/migrate/Migration.vue
index ab62020ca..c63188624 100644
--- a/frontend/src/views/migrate/Migration.vue
+++ b/frontend/src/views/migrate/Migration.vue
@@ -48,7 +48,7 @@ const availableMigrators = computed(() => configStore.availableMigrators
     display: inline-block;
     width: 100px;
     text-transform: capitalize;
-    margin-right: 1rem;
+    margin-inline-end: 1rem;
 }
 
 .migration-service-image {
diff --git a/frontend/src/views/migrate/MigrationHandler.vue b/frontend/src/views/migrate/MigrationHandler.vue
index d80875636..35bb23fdf 100644
--- a/frontend/src/views/migrate/MigrationHandler.vue
+++ b/frontend/src/views/migrate/MigrationHandler.vue
@@ -249,7 +249,7 @@ async function migrate() {
 	max-width: 400px;
 	justify-content: space-between;
 	align-items: center;
-	margin-bottom: 2rem;
+	margin-block-end: 2rem;
 }
 
 .logo {
@@ -271,7 +271,7 @@ async function migrate() {
 		display: inline-block;
 		border-radius: 10px;
 		animation: wave 2s ease infinite;
-		margin-right: 5px;
+		margin-inline-end: 5px;
 
 		&:nth-child(1) {
 			animation-delay: 0;
diff --git a/frontend/src/views/project/ListProjects.vue b/frontend/src/views/project/ListProjects.vue
index dbd9271f8..63ff231eb 100644
--- a/frontend/src/views/project/ListProjects.vue
+++ b/frontend/src/views/project/ListProjects.vue
@@ -68,7 +68,7 @@ const projects = computed(() => {
 	justify-content: space-between;
 	align-items: center;
 	gap: 1rem;
-	margin-bottom: 1rem;
+	margin-block-end: 1rem;
 
 	@media screen and (max-width: $tablet) {
 		flex-direction: column;
@@ -88,7 +88,7 @@ const projects = computed(() => {
 }
 
 .project:not(:first-child) {
-	margin-top: 1rem;
+	margin-block-start: 1rem;
 }
 
 .project-title {
@@ -104,6 +104,6 @@ const projects = computed(() => {
 	border-radius: 3px;
 	font-family: $vikunja-font;
 	background: var(--white-translucent);
-	margin-left: .5rem;
+	margin-inline-start: .5rem;
 }
 </style>
diff --git a/frontend/src/views/project/ProjectInfo.vue b/frontend/src/views/project/ProjectInfo.vue
index 2dc62c386..0b6916570 100644
--- a/frontend/src/views/project/ProjectInfo.vue
+++ b/frontend/src/views/project/ProjectInfo.vue
@@ -11,7 +11,7 @@
 		>
 			<div
 				v-if="htmlDescription !== ''"
-				class="has-text-left"
+				class="has-text-start"
 				v-html="htmlDescription"
 			/>
 			<p
diff --git a/frontend/src/views/project/settings/ProjectSettingsBackground.vue b/frontend/src/views/project/settings/ProjectSettingsBackground.vue
index 0ed02cc3c..efea62289 100644
--- a/frontend/src/views/project/settings/ProjectSettingsBackground.vue
+++ b/frontend/src/views/project/settings/ProjectSettingsBackground.vue
@@ -232,7 +232,7 @@ async function removeBackground() {
 
 <style lang="scss" scoped>
 .unsplash-credit {
-	text-align: right;
+	text-align: end;
 	font-size: .8rem;
 }
 
@@ -259,7 +259,7 @@ async function removeBackground() {
 }
 
 .image-search__result-item {
-	margin-top: 0; // FIXME: removes padding from .content
+	margin-block-start: 0; // FIXME: removes padding from .content
 	aspect-ratio: 16 / 10;
 	background-size: cover;
 	background-position: center;
diff --git a/frontend/src/views/project/settings/ProjectSettingsViews.vue b/frontend/src/views/project/settings/ProjectSettingsViews.vue
index 80759b63c..af0df5059 100644
--- a/frontend/src/views/project/settings/ProjectSettingsViews.vue
+++ b/frontend/src/views/project/settings/ProjectSettingsViews.vue
@@ -159,7 +159,7 @@ async function saveViewPosition(e) {
 				<tr>
 					<th>{{ $t('project.views.title') }}</th>
 					<th>{{ $t('project.views.kind') }}</th>
-					<th class="has-text-right">
+					<th class="has-text-end">
 						{{ $t('project.views.actions') }}
 					</th>
 				</tr>
@@ -189,10 +189,10 @@ async function saveViewPosition(e) {
 						<template v-else>
 							<td>{{ v.title }}</td>
 							<td>{{ v.viewKind }}</td>
-							<td class="has-text-right actions">
+							<td class="has-text-end actions">
 								<XButton
 									v-if="isAdmin"
-									class="is-danger mr-2"
+									class="is-danger me-2"
 									icon="trash-alt"
 									@click="() => {
 										viewIdToDelete = v.id
@@ -233,7 +233,7 @@ async function saveViewPosition(e) {
 <style scoped>
 .handle {
 	cursor: grab;
-	margin-left: .25rem;
+	margin-inline-start: .25rem;
 }
 
 .actions {
diff --git a/frontend/src/views/project/settings/ProjectSettingsWebhooks.vue b/frontend/src/views/project/settings/ProjectSettingsWebhooks.vue
index fc2840464..540dc8eba 100644
--- a/frontend/src/views/project/settings/ProjectSettingsWebhooks.vue
+++ b/frontend/src/views/project/settings/ProjectSettingsWebhooks.vue
@@ -272,7 +272,7 @@ function validateSelectedEvents() {
 
 <style lang="scss" scoped>
 .available-events-check {
-	margin-right: .5rem;
+	margin-inline-end: .5rem;
 	width: 12.5rem;
 }
 </style>
diff --git a/frontend/src/views/tasks/ShowTasks.vue b/frontend/src/views/tasks/ShowTasks.vue
index f4baf5d6c..17ceb9259 100644
--- a/frontend/src/views/tasks/ShowTasks.vue
+++ b/frontend/src/views/tasks/ShowTasks.vue
@@ -1,7 +1,7 @@
 <template>
 	<div
 		v-cy="'showTasks'"
-		class="is-max-width-desktop has-text-left"
+		class="is-max-width-desktop has-text-start"
 	>
 		<h3 class="mb-2 title">
 			{{ pageTitle }}
@@ -24,7 +24,7 @@
 			</DatepickerWithRange>
 			<FancyCheckbox
 				:model-value="showNulls"
-				class="mr-2"
+				class="me-2"
 				@update:modelValue="setShowNulls"
 			>
 				{{ $t('task.show.noDates') }}
diff --git a/frontend/src/views/tasks/TaskDetailView.vue b/frontend/src/views/tasks/TaskDetailView.vue
index 1db1ec913..904b2935e 100644
--- a/frontend/src/views/tasks/TaskDetailView.vue
+++ b/frontend/src/views/tasks/TaskDetailView.vue
@@ -961,15 +961,15 @@ function setRelatedTasksActive() {
 .task-view-container {
 	// simulate sass lighten($primary, 30) by increasing lightness 30% to 73%
 	--primary-light: hsla(var(--primary-h), var(--primary-s), 73%, var(--primary-a));
-	padding-bottom: 0;
+	padding-block-end: 0;
 
 	@media screen and (min-width: $desktop) {
-		padding-bottom: 1rem;
+		padding-block-end: 1rem;
 	}
 }
 
 .task-view {
-	padding-top: 1rem;
+	padding-block-start: 1rem;
 	padding-inline: .5rem;
 	background-color: var(--site-background);
 
@@ -1000,7 +1000,7 @@ function setRelatedTasksActive() {
 
 .subtitle {
 	color: var(--grey-500);
-	margin-bottom: 1rem;
+	margin-block-end: 1rem;
 
 	a {
 		color: var(--grey-800);
@@ -1023,7 +1023,7 @@ h3 .button {
 .remove {
 	color: var(--danger);
 	vertical-align: middle;
-	padding-left: .5rem;
+	padding-inline-start: .5rem;
 	line-height: 1;
 }
 
@@ -1038,7 +1038,7 @@ h3 .button {
 		display: block;
 		margin: .1rem 0;
 		width: 100%;
-		text-align: left;
+		text-align: start;
 
 		&:hover {
 			background: var(--white);
@@ -1051,9 +1051,9 @@ h3 .button {
 }
 
 .details {
-	padding-bottom: 0.75rem;
+	padding-block-end: 0.75rem;
 	flex-flow: row wrap;
-	margin-bottom: 0;
+	margin-block-end: 0;
 
 	.detail-title {
 		display: block;
@@ -1125,7 +1125,7 @@ h3 .button {
 }
 
 .attachments {
-	margin-bottom: 0;
+	margin-block-end: 0;
 
 	table tr:last-child td {
 		border-bottom: none;
@@ -1141,7 +1141,7 @@ h3 .button {
 
 	.button {
 		width: 100%;
-		margin-bottom: .5rem;
+		margin-block-end: .5rem;
 		justify-content: left;
 
 		&.has-light-text {
@@ -1163,7 +1163,7 @@ h3 .button {
 }
 
 .checklist-summary {
-	padding-left: .25rem;
+	padding-inline-start: .25rem;
 }
 
 .detail-content {
diff --git a/frontend/src/views/teams/EditTeam.vue b/frontend/src/views/teams/EditTeam.vue
index c557de2bf..b505c8bb6 100644
--- a/frontend/src/views/teams/EditTeam.vue
+++ b/frontend/src/views/teams/EditTeam.vue
@@ -176,7 +176,7 @@
 							<XButton
 								v-if="m.id !== userInfo.id"
 								:loading="teamMemberService.loading"
-								class="mr-2"
+								class="me-2"
 								@click="() => toggleUserType(m)"
 							>
 								{{ m.admin ? $t('team.edit.makeMember') : $t('team.edit.makeAdmin') }}
@@ -413,7 +413,7 @@ async function leave() {
 
 <style lang="scss" scoped>
 .card.is-fullwidth {
-	margin-bottom: 1rem;
+	margin-block-end: 1rem;
 
 	.content {
 		padding: 0;
diff --git a/frontend/src/views/teams/ListTeams.vue b/frontend/src/views/teams/ListTeams.vue
index 0189c4ade..058816f3c 100644
--- a/frontend/src/views/teams/ListTeams.vue
+++ b/frontend/src/views/teams/ListTeams.vue
@@ -59,7 +59,7 @@ teamService.getAll().then((result) => {
 <style lang="scss" scoped>
 ul.teams {
   padding: 0;
-  margin-left: 0;
+  margin-inline-start: 0;
   overflow: hidden;
 
   li {
diff --git a/frontend/src/views/user/DataExportDownload.vue b/frontend/src/views/user/DataExportDownload.vue
index 7db6f6bd2..b424db35b 100644
--- a/frontend/src/views/user/DataExportDownload.vue
+++ b/frontend/src/views/user/DataExportDownload.vue
@@ -34,7 +34,7 @@
 		<XButton
 			v-focus
 			:loading="dataExportService.loading"
-			class="mt-4 mr-4"
+			class="mt-4 me-4"
 			@click="download()"
 		>
 			{{ $t('misc.download') }}
diff --git a/frontend/src/views/user/Login.vue b/frontend/src/views/user/Login.vue
index 74b254834..5fe9aea7f 100644
--- a/frontend/src/views/user/Login.vue
+++ b/frontend/src/views/user/Login.vue
@@ -100,7 +100,7 @@
 					<input
 						v-model="rememberMe"
 						type="checkbox"
-						class="mr-1"
+						class="me-1"
 					>
 					{{ $t('user.auth.remember') }}
 				</label>
@@ -255,10 +255,10 @@ async function submit() {
 .label-with-link {
 	display: flex;
 	justify-content: space-between;
-	margin-bottom: .5rem;
+	margin-block-end: .5rem;
 
 	.label {
-		margin-bottom: 0;
+		margin-block-end: 0;
 	}
 }
 </style>
diff --git a/frontend/src/views/user/Register.vue b/frontend/src/views/user/Register.vue
index 382254283..63bba69de 100644
--- a/frontend/src/views/user/Register.vue
+++ b/frontend/src/views/user/Register.vue
@@ -82,7 +82,7 @@
 			<XButton
 				id="register-submit"
 				:loading="isLoading"
-				class="mr-2"
+				class="me-2"
 				:disabled="!everythingValid"
 				@click="submit"
 			>
diff --git a/frontend/src/views/user/Settings.vue b/frontend/src/views/user/Settings.vue
index 24fd56e20..efc6674f3 100644
--- a/frontend/src/views/user/Settings.vue
+++ b/frontend/src/views/user/Settings.vue
@@ -132,11 +132,11 @@ const extraSettingsLinks = computed(() => authStore.settings.extraSettingsLinks)
 
 .navigation {
 	width: 25%;
-	padding-right: 1rem;
+	padding-inline-end: 1rem;
 
 	@media screen and (max-width: $tablet) {
 		width: 100%;
-		padding-left: 0;
+		padding-inline-start: 0;
 	}
 }
 
@@ -145,7 +145,7 @@ const extraSettingsLinks = computed(() => authStore.settings.extraSettingsLinks)
 	padding: .5rem;
 	color: var(--text);
 	width: 100%;
-	border-left: 3px solid transparent;
+	border-inline-start: 3px solid transparent;
 
 	&:hover,
 	&.router-link-active {
@@ -159,8 +159,8 @@ const extraSettingsLinks = computed(() => authStore.settings.extraSettingsLinks)
 
 	@media screen and (max-width: $tablet) {
 		width: 100%;
-		padding-left: 0;
-		padding-top: 1rem;
+		padding-inline-start: 0;
+		padding-block-start: 1rem;
 	}
 }
 </style>
diff --git a/frontend/src/views/user/settings/Caldav.vue b/frontend/src/views/user/settings/Caldav.vue
index 858bb2497..5a43218df 100644
--- a/frontend/src/views/user/settings/Caldav.vue
+++ b/frontend/src/views/user/settings/Caldav.vue
@@ -49,7 +49,7 @@
 			<tr>
 				<th>{{ $t('misc.id') }}</th>
 				<th>{{ $t('misc.created') }}</th>
-				<th class="has-text-right">
+				<th class="has-text-end">
 					{{ $t('misc.actions') }}
 				</th>
 			</tr>
@@ -59,7 +59,7 @@
 			>
 				<td>{{ tk.id }}</td>
 				<td>{{ formatDateShort(tk.created) }}</td>
-				<td class="has-text-right">
+				<td class="has-text-end">
 					<XButton
 						variant="secondary"
 						@click="deleteToken(tk)"
diff --git a/frontend/src/views/user/settings/DataExport.vue b/frontend/src/views/user/settings/DataExport.vue
index f5ea3cdf1..3e0d59e34 100644
--- a/frontend/src/views/user/settings/DataExport.vue
+++ b/frontend/src/views/user/settings/DataExport.vue
@@ -136,7 +136,7 @@ async function requestDataExport() {
 	gap: .5rem;
 	
 	> p {
-		margin-bottom: 0;
+		margin-block-end: 0;
 	}
 	
 	@media (max-width: $mobile) {
@@ -144,7 +144,7 @@ async function requestDataExport() {
 		align-items: flex-start;
 		
 		> p {
-			margin-bottom: 1rem;
+			margin-block-end: 1rem;
 		}
 		
 		> :deep(.button) {
diff --git a/frontend/src/views/user/settings/General.vue b/frontend/src/views/user/settings/General.vue
index 5266f99dc..328103d29 100644
--- a/frontend/src/views/user/settings/General.vue
+++ b/frontend/src/views/user/settings/General.vue
@@ -549,7 +549,7 @@ async function updateSettings() {
 }
 
 .section-block + .section-block {
-	margin-top: 1.5rem;
+	margin-block-start: 1.5rem;
 }
 
 .field-group {
@@ -566,7 +566,7 @@ async function updateSettings() {
 
 .two-col {
 	flex: 0 0 50%;
-	margin-left: .5rem;
+	margin-inline-start: .5rem;
 }
 
 .sticky-save {
diff --git a/frontend/src/views/user/settings/TOTP.vue b/frontend/src/views/user/settings/TOTP.vue
index 459b27c92..1581bac01 100644
--- a/frontend/src/views/user/settings/TOTP.vue
+++ b/frontend/src/views/user/settings/TOTP.vue
@@ -83,7 +83,7 @@
 				</XButton>
 				<XButton
 					variant="tertiary"
-					class="ml-2"
+					class="ms-2"
 					@click="totpDisableForm = false"
 				>
 					{{ $t('misc.cancel') }}