From d290f2e99c74962263e19b71faa844c7339366e1 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sat, 2 Aug 2025 10:53:21 +0200
Subject: [PATCH] feat: add logical utils

---
 frontend/src/components/home/AppHeader.vue    |  2 +-
 frontend/src/components/home/ImportHint.vue   |  2 +-
 frontend/src/components/home/Navigation.vue   |  2 +-
 frontend/src/components/input/ColorPicker.vue |  2 +-
 frontend/src/components/input/Multiselect.vue |  2 +-
 .../src/components/input/editor/TipTap.vue    |  2 +-
 frontend/src/components/misc/ApiConfig.vue    |  2 +-
 frontend/src/components/misc/CreateEdit.vue   |  2 +-
 .../src/components/misc/NoAuthWrapper.vue     |  2 +-
 frontend/src/components/misc/Nothing.vue      |  2 +-
 frontend/src/components/misc/Ready.vue        |  2 +-
 .../misc/keyboard-shortcuts/index.vue         |  2 +-
 .../notifications/Notifications.vue           |  4 +-
 .../src/components/project/ProjectWrapper.vue |  2 +-
 .../components/project/partials/Filters.vue   |  4 +-
 .../project/views/ProjectKanban.vue           |  2 +-
 .../components/project/views/ProjectTable.vue |  6 +--
 .../components/project/views/ViewEditForm.vue |  8 ++--
 .../src/components/sharing/LinkSharing.vue    | 10 ++---
 frontend/src/components/sharing/UserTeam.vue  |  4 +-
 frontend/src/components/tasks/AddTask.vue     |  2 +-
 .../components/tasks/partials/Attachments.vue |  2 +-
 .../components/tasks/partials/Comments.vue    | 10 ++---
 .../components/tasks/partials/Description.vue |  2 +-
 .../src/components/tasks/partials/Heading.vue |  4 +-
 .../components/tasks/partials/KanbanCard.vue  |  2 +-
 .../tasks/partials/RelatedTasks.vue           |  4 +-
 .../components/tasks/partials/RepeatAfter.vue |  6 +--
 .../tasks/partials/SingleTaskInProject.vue    | 16 ++++----
 .../partials/SingleTaskInlineReadonly.vue     |  8 ++--
 frontend/src/styles/theme/_index.scss         |  1 +
 .../src/styles/theme/logical-spacing.scss     | 40 +++++++++++++++++++
 frontend/src/views/Home.vue                   |  4 +-
 .../src/views/migrate/MigrationHandler.vue    |  8 ++--
 .../settings/ProjectSettingsBackground.vue    |  4 +-
 .../project/settings/ProjectSettingsShare.vue |  2 +-
 .../project/settings/ProjectSettingsViews.vue |  8 ++--
 .../settings/ProjectSettingsWebhooks.vue      |  2 +-
 .../src/views/sharing/LinkSharingAuth.vue     | 17 ++++----
 frontend/src/views/tasks/ShowTasks.vue        |  8 ++--
 frontend/src/views/tasks/TaskDetailView.vue   |  8 ++--
 frontend/src/views/teams/EditTeam.vue         |  4 +-
 .../src/views/user/DataExportDownload.vue     |  4 +-
 frontend/src/views/user/Login.vue             | 12 +++---
 frontend/src/views/user/OpenIdAuth.vue        |  2 +-
 frontend/src/views/user/PasswordReset.vue     |  6 +--
 frontend/src/views/user/Register.vue          |  8 ++--
 .../src/views/user/RequestPasswordReset.vue   |  6 +--
 .../src/views/user/settings/ApiTokens.vue     | 12 +++---
 frontend/src/views/user/settings/Avatar.vue   |  6 +--
 frontend/src/views/user/settings/Caldav.vue   |  6 +--
 .../src/views/user/settings/DataExport.vue    |  4 +-
 frontend/src/views/user/settings/Deletion.vue |  4 +-
 .../src/views/user/settings/EmailUpdate.vue   |  2 +-
 .../views/user/settings/PasswordUpdate.vue    |  2 +-
 frontend/src/views/user/settings/TOTP.vue     |  2 +-
 56 files changed, 172 insertions(+), 130 deletions(-)
 create mode 100644 frontend/src/styles/theme/logical-spacing.scss

diff --git a/frontend/src/components/home/AppHeader.vue b/frontend/src/components/home/AppHeader.vue
index 09ced5cc9..48a0e672d 100644
--- a/frontend/src/components/home/AppHeader.vue
+++ b/frontend/src/components/home/AppHeader.vue
@@ -74,7 +74,7 @@
 						>
 						<span class="username">{{ authStore.userDisplayName }}</span>
 						<span
-							class="ms-1 dropdown-icon icon is-small"
+							class="mis-1 dropdown-icon icon is-small"
 							:style="{
 								transform: open ? 'rotate(180deg)' : 'rotate(0)',
 							}"
diff --git a/frontend/src/components/home/ImportHint.vue b/frontend/src/components/home/ImportHint.vue
index 74033c674..d8d0fbd2c 100644
--- a/frontend/src/components/home/ImportHint.vue
+++ b/frontend/src/components/home/ImportHint.vue
@@ -34,7 +34,7 @@ onMounted(async () => {
 
 <template>
 	<template v-if="show && !loading">
-		<p class="mt-4">
+		<p class="mbs-4">
 			{{ $t('home.project.importText') }}
 		</p>
 		<XButton
diff --git a/frontend/src/components/home/Navigation.vue b/frontend/src/components/home/Navigation.vue
index ed6aaad67..0a411fa8c 100644
--- a/frontend/src/components/home/Navigation.vue
+++ b/frontend/src/components/home/Navigation.vue
@@ -110,7 +110,7 @@
 		</template>
 
 		<PoweredByLink
-			class="mt-auto"
+			class="mbs-auto"
 			utm-medium="navigation"
 		/>
 	</aside>
diff --git a/frontend/src/components/input/ColorPicker.vue b/frontend/src/components/input/ColorPicker.vue
index 5c6622ea6..f63e595eb 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 ms-2"
+			class="is-small mis-2"
 			:shadow="false"
 			variant="secondary"
 			@click="reset"
diff --git a/frontend/src/components/input/Multiselect.vue b/frontend/src/components/input/Multiselect.vue
index 8e5ffb10f..90030e5df 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 ms-2 mt-2"
+								class="tag mis-2 mbs-2"
 							>
 								{{ label !== '' ? item[label] : item }}
 								<BaseButton
diff --git a/frontend/src/components/input/editor/TipTap.vue b/frontend/src/components/input/editor/TipTap.vue
index 59c439667..3038ba669 100644
--- a/frontend/src/components/input/editor/TipTap.vue
+++ b/frontend/src/components/input/editor/TipTap.vue
@@ -125,7 +125,7 @@
 		<XButton
 			v-else-if="isEditing && showSave"
 			v-cy="'saveEditor'"
-			class="mt-4"
+			class="mbs-4"
 			variant="secondary"
 			:shadow="false"
 			:disabled="!contentHasChanged"
diff --git a/frontend/src/components/misc/ApiConfig.vue b/frontend/src/components/misc/ApiConfig.vue
index a9acaa4a5..82a5cef27 100644
--- a/frontend/src/components/misc/ApiConfig.vue
+++ b/frontend/src/components/misc/ApiConfig.vue
@@ -53,7 +53,7 @@
 		<Message
 			v-if="errorMsg !== ''"
 			variant="danger"
-			class="mt-2"
+			class="mbs-2"
 		>
 			{{ errorMsg }}
 		</Message>
diff --git a/frontend/src/components/misc/CreateEdit.vue b/frontend/src/components/misc/CreateEdit.vue
index 127ac8663..846b2f4bd 100644
--- a/frontend/src/components/misc/CreateEdit.vue
+++ b/frontend/src/components/misc/CreateEdit.vue
@@ -38,7 +38,7 @@
 						variant="primary"
 						:icon="primaryIcon"
 						:disabled="primaryDisabled || loading"
-						class="ms-2"
+						class="mis-2"
 						@click.prevent.stop="primary"
 					>
 						{{ primaryLabel || $t('misc.create') }}
diff --git a/frontend/src/components/misc/NoAuthWrapper.vue b/frontend/src/components/misc/NoAuthWrapper.vue
index 5a914e3d3..db7a684b8 100644
--- a/frontend/src/components/misc/NoAuthWrapper.vue
+++ b/frontend/src/components/misc/NoAuthWrapper.vue
@@ -28,7 +28,7 @@
 					<ApiConfig v-if="showApiConfig" />
 					<Message
 						v-if="motd !== ''"
-						class="is-hidden-tablet mb-4"
+						class="is-hidden-tablet mbe-4"
 					>
 						{{ motd }}
 					</Message>
diff --git a/frontend/src/components/misc/Nothing.vue b/frontend/src/components/misc/Nothing.vue
index 15fd1f072..a2e9cc9ad 100644
--- a/frontend/src/components/misc/Nothing.vue
+++ b/frontend/src/components/misc/Nothing.vue
@@ -1,5 +1,5 @@
 <template>
-	<p class="has-text-centered has-text-grey is-italic p-4 mb-4">
+	<p class="has-text-centered has-text-grey is-italic p-4 mbe-4">
 		<slot />
 	</p>
 </template>
diff --git a/frontend/src/components/misc/Ready.vue b/frontend/src/components/misc/Ready.vue
index a53ccd4e4..a1c845160 100644
--- a/frontend/src/components/misc/Ready.vue
+++ b/frontend/src/components/misc/Ready.vue
@@ -26,7 +26,7 @@
 			<Message
 				v-else
 				variant="danger"
-				class="mb-4"
+				class="mbe-4"
 			>
 				<p>
 					{{ $t('ready.errorOccured') }}<br>
diff --git a/frontend/src/components/misc/keyboard-shortcuts/index.vue b/frontend/src/components/misc/keyboard-shortcuts/index.vue
index 6fb035e4e..9d453fe91 100644
--- a/frontend/src/components/misc/keyboard-shortcuts/index.vue
+++ b/frontend/src/components/misc/keyboard-shortcuts/index.vue
@@ -15,7 +15,7 @@
 
 				<Message
 					v-if="s.available"
-					class="mb-4"
+					class="mbe-4"
 				>
 					{{
 						typeof s.available === 'undefined' ?
diff --git a/frontend/src/components/notifications/Notifications.vue b/frontend/src/components/notifications/Notifications.vue
index 49fffdbe1..3a6d988b7 100644
--- a/frontend/src/components/notifications/Notifications.vue
+++ b/frontend/src/components/notifications/Notifications.vue
@@ -44,7 +44,7 @@
 						<div>
 							<span
 								v-if="n.notification.doer"
-								class="has-text-weight-bold me-1"
+								class="has-text-weight-bold mie-1"
 							>
 								{{ getDisplayName(n.notification.doer) }}
 							</span>
@@ -66,7 +66,7 @@
 				<XButton
 					v-if="notifications.length > 0 && unreadNotifications > 0"
 					variant="tertiary"
-					class="mt-2 is-fullwidth" 
+					class="mbs-2 is-fullwidth" 
 					@click="markAllRead"
 				>
 					{{ $t('notification.markAllRead') }}
diff --git a/frontend/src/components/project/ProjectWrapper.vue b/frontend/src/components/project/ProjectWrapper.vue
index bbb784a19..bbec6cd07 100644
--- a/frontend/src/components/project/ProjectWrapper.vue
+++ b/frontend/src/components/project/ProjectWrapper.vue
@@ -34,7 +34,7 @@
 			<Message
 				v-if="currentProject?.isArchived"
 				variant="warning"
-				class="mb-4"
+				class="mbe-4"
 			>
 				{{ $t('project.archivedMessage') }}
 			</Message>
diff --git a/frontend/src/components/project/partials/Filters.vue b/frontend/src/components/project/partials/Filters.vue
index 1db43df38..8067c298e 100644
--- a/frontend/src/components/project/partials/Filters.vue
+++ b/frontend/src/components/project/partials/Filters.vue
@@ -13,7 +13,7 @@
 		
 		<div 
 			v-if="filterFromView"
-			class="tw-text-sm tw-mb-2"
+			class="tw-text-sm tw-mbe-2"
 		>
 			{{ $t('filters.fromView') }}
 			<code>{{ filterFromView }}</code><br>
@@ -37,7 +37,7 @@
 		>
 			<XButton
 				variant="secondary"
-				class="me-2"
+				class="mie-2"
 				:disabled="filterQuery === ''"
 				@click.prevent.stop="clearFiltersAndEmit"
 			>
diff --git a/frontend/src/components/project/views/ProjectKanban.vue b/frontend/src/components/project/views/ProjectKanban.vue
index 91b5e487d..9ba259f19 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 me-2"
+										class="icon is-small has-text-success mie-2"
 									>
 										<Icon icon="check-double" />
 									</span>
diff --git a/frontend/src/components/project/views/ProjectTable.vue b/frontend/src/components/project/views/ProjectTable.vue
index 8f6c97e5f..c9d114c3b 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="me-2"
+							class="mie-2"
 							@click.prevent.stop="toggle()"
 						>
 							{{ $t('project.table.columns') }}
@@ -87,7 +87,7 @@
 					:has-content="false"
 				>
 					<div class="has-horizontal-overflow">
-						<table class="table has-actions is-hoverable is-fullwidth mb-0">
+						<table class="table has-actions is-hoverable is-fullwidth mbe-0">
 							<thead>
 								<tr>
 									<th v-if="activeColumns.index">
@@ -219,7 +219,7 @@
 											v-if="t.assignees.length > 0"
 											:assignees="t.assignees"
 											:avatar-size="28"
-											class="ms-1"
+											class="mis-1"
 											:inline="true"
 										/>
 									</td>
diff --git a/frontend/src/components/project/views/ViewEditForm.vue b/frontend/src/components/project/views/ViewEditForm.vue
index 086b66d74..c0fa462ef 100644
--- a/frontend/src/components/project/views/ViewEditForm.vue
+++ b/frontend/src/components/project/views/ViewEditForm.vue
@@ -177,10 +177,10 @@ function handleBubbleSave() {
 			v-model="view.filter.filter"
 			:project-id="view.projectId"
 			:input-label="$t('project.views.filter')"
-			class="mb-1"
+			class="mbe-1"
 		/>
 
-		<div class="is-size-7 mb-3">
+		<div class="is-size-7 mbe-3">
 			<FilterInputDocs />
 		</div>
 
@@ -260,7 +260,7 @@ function handleBubbleSave() {
 							v-model="view.bucketConfiguration[index].filter.filter"
 							:project-id="view.projectId"
 							:input-label="$t('project.views.filter')"
-							class="mb-2"
+							class="mbe-2"
 						/>
 
 						<div class="is-size-7">
@@ -285,7 +285,7 @@ function handleBubbleSave() {
 		>
 			<XButton
 				variant="tertiary"
-				class="me-2"
+				class="mie-2"
 				@click="emit('cancel')"
 			>
 				{{ $t('misc.cancel') }}
diff --git a/frontend/src/components/sharing/LinkSharing.vue b/frontend/src/components/sharing/LinkSharing.vue
index 5dfcadde4..11c183d6b 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 ms-3"
+				class="is-size-7 has-text-grey is-italic mis-3"
 			>
 				{{ $t('project.share.links.what') }}
 			</span>
@@ -14,7 +14,7 @@
 			<XButton
 				v-if="!(linkShares.length === 0 || showNewForm)"
 				icon="plus"
-				class="mb-4"
+				class="mbe-4"
 				@click="showNewForm = true"
 			>
 				{{ $t('project.share.links.create') }}
@@ -114,12 +114,12 @@
 						<td>
 							<p
 								v-if="s.name !== ''"
-								class="mb-2 is-italic"
+								class="mbe-2 is-italic"
 							>
 								{{ s.name }}
 							</p>
 
-							<p class="mb-2">
+							<p class="mbe-2">
 								<i18n-t
 									keypath="project.share.links.sharedBy"
 									scope="global"
@@ -128,7 +128,7 @@
 								</i18n-t>
 							</p>
 
-							<p class="mb-2">
+							<p class="mbe-2">
 								<template v-if="s.right === RIGHTS.ADMIN">
 									<span class="icon is-small">
 										<Icon icon="lock" />
diff --git a/frontend/src/components/sharing/UserTeam.vue b/frontend/src/components/sharing/UserTeam.vue
index 041f539d7..63c0b3460 100644
--- a/frontend/src/components/sharing/UserTeam.vue
+++ b/frontend/src/components/sharing/UserTeam.vue
@@ -43,7 +43,7 @@
 
 		<table
 			v-if="sharables.length > 0"
-			class="table has-actions is-striped is-hoverable is-fullwidth mb-4"
+			class="table has-actions is-striped is-hoverable is-fullwidth mbe-4"
 		>
 			<tbody>
 				<tr
@@ -97,7 +97,7 @@
 						<div class="select">
 							<select
 								v-model="selectedRight[s.id]"
-								class="me-2"
+								class="mie-2"
 								@change="toggleType(s)"
 							>
 								<option
diff --git a/frontend/src/components/tasks/AddTask.vue b/frontend/src/components/tasks/AddTask.vue
index 03e12e3c4..604d7649d 100644
--- a/frontend/src/components/tasks/AddTask.vue
+++ b/frontend/src/components/tasks/AddTask.vue
@@ -46,7 +46,7 @@
 		<Expandable :open="errorMessage !== ''">
 			<p
 				v-if="errorMessage !== ''"
-				class="pt-3 mt-0 help is-danger"
+				class="pbs-3 mbs-0 help is-danger"
 			>
 				{{ errorMessage }}
 			</p>
diff --git a/frontend/src/components/tasks/partials/Attachments.vue b/frontend/src/components/tasks/partials/Attachments.vue
index 6a06b103e..e6aa4743c 100644
--- a/frontend/src/components/tasks/partials/Attachments.vue
+++ b/frontend/src/components/tasks/partials/Attachments.vue
@@ -113,7 +113,7 @@
 		<XButton
 			v-if="editEnabled"
 			:disabled="loading"
-			class="mb-4"
+			class="mbe-4"
 			icon="cloud-upload-alt"
 			variant="secondary"
 			:shadow="false"
diff --git a/frontend/src/components/tasks/partials/Comments.vue b/frontend/src/components/tasks/partials/Comments.vue
index 3c9429127..d3c67d508 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 ms-2"
+				class="is-flex is-align-items-center my-4 mis-2"
 			>
-				<span class="loader is-inline-block me-2" />
+				<span class="loader is-inline-block mie-2" />
 				{{ $t('task.comment.loading') }}
 			</span>
 			<div
@@ -79,7 +79,7 @@
 								"
 								class="is-inline-flex"
 							>
-								<span class="loader is-inline-block me-2" />
+								<span class="loader is-inline-block mie-2" />
 								{{ $t('misc.saving') }}
 							</span>
 							<span
@@ -115,7 +115,7 @@
 					/>
 					<Reactions 
 						v-model="c.reactions"
-						class="mt-2" 
+						class="mbs-2" 
 						entity-kind="comments"
 						:entity-id="c.id"
 						:disabled="!canWrite"
@@ -153,7 +153,7 @@
 								v-if="taskCommentService.loading && creating"
 								class="is-inline-flex"
 							>
-								<span class="loader is-inline-block me-2" />
+								<span class="loader is-inline-block mie-2" />
 								{{ $t('task.comment.creating') }}
 							</span>
 						</CustomTransition>
diff --git a/frontend/src/components/tasks/partials/Description.vue b/frontend/src/components/tasks/partials/Description.vue
index b263382b8..c80d38cf9 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 me-2" />
+					<span class="loader is-inline-block mie-2" />
 					{{ $t('misc.saving') }}
 				</span>
 				<span
diff --git a/frontend/src/components/tasks/partials/Heading.vue b/frontend/src/components/tasks/partials/Heading.vue
index d5ee93f40..f40ae162d 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 me-2" />
+				<span class="loader is-inline-block mie-2" />
 				{{ $t('misc.saving') }}
 			</span>
 			<span
@@ -55,7 +55,7 @@
 			>
 				<Icon
 					icon="check"
-					class="me-2"
+					class="mie-2"
 				/>
 				{{ $t('misc.saved') }}
 			</span>
diff --git a/frontend/src/components/tasks/partials/KanbanCard.vue b/frontend/src/components/tasks/partials/KanbanCard.vue
index 9149d4a9b..3081d452f 100644
--- a/frontend/src/components/tasks/partials/KanbanCard.vue
+++ b/frontend/src/components/tasks/partials/KanbanCard.vue
@@ -74,7 +74,7 @@
 					v-if="task.assignees.length > 0"
 					:assignees="task.assignees"
 					:avatar-size="24"
-					class="me-1"
+					class="mie-1"
 				/>
 				<ChecklistSummary
 					:task="task"
diff --git a/frontend/src/components/tasks/partials/RelatedTasks.vue b/frontend/src/components/tasks/partials/RelatedTasks.vue
index f2952f2b5..0dd7774e9 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 me-2" />
+							<span class="loader is-inline-block mie-2" />
 							{{ $t('misc.saving') }}
 						</span>
 						<span
@@ -80,7 +80,7 @@
 				</div>
 				<div
 					key="field-kind"
-					class="field has-addons mb-4"
+					class="field has-addons mbe-4"
 				>
 					<div class="control is-expanded">
 						<div class="select is-fullwidth has-defaults">
diff --git a/frontend/src/components/tasks/partials/RepeatAfter.vue b/frontend/src/components/tasks/partials/RepeatAfter.vue
index a57ba7e31..ec6065dea 100644
--- a/frontend/src/components/tasks/partials/RepeatAfter.vue
+++ b/frontend/src/components/tasks/partials/RepeatAfter.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="control repeat-after-input">
-		<div class="buttons has-addons is-centered mt-2">
+		<div class="buttons has-addons is-centered mbs-2">
 			<XButton
 				variant="secondary"
 				class="is-small"
@@ -23,7 +23,7 @@
 				{{ $t('task.repeat.every30d') }}
 			</XButton>
 		</div>
-		<div class="is-flex is-align-items-center mb-2">
+		<div class="is-flex is-align-items-center mbe-2">
 			<label
 				for="repeatMode"
 				class="is-fullwidth"
@@ -54,7 +54,7 @@
 			v-if="task.repeatMode !== TASK_REPEAT_MODES.REPEAT_MODE_MONTH"
 			class="is-flex"
 		>
-			<p class="pe-4">
+			<p class="pis-4">
 				{{ $t('task.repeat.each') }}
 			</p>
 			<div class="field has-addons is-fullwidth">
diff --git a/frontend/src/components/tasks/partials/SingleTaskInProject.vue b/frontend/src/components/tasks/partials/SingleTaskInProject.vue
index 3b1ff337e..b36210125 100644
--- a/frontend/src/components/tasks/partials/SingleTaskInProject.vue
+++ b/frontend/src/components/tasks/partials/SingleTaskInProject.vue
@@ -18,7 +18,7 @@
 			<ColorBubble
 				v-if="!showProjectSeparately && projectColor !== '' && currentProject?.id !== task.projectId"
 				:color="projectColor"
-				class="me-1"
+				class="mie-1"
 			/>
 
 			<div
@@ -30,8 +30,8 @@
 						v-if="showProject && typeof project !== 'undefined'"
 						v-tooltip="$t('task.detail.belongsToProject', {project: project.title})"
 						:to="{ name: 'project.index', params: { projectId: task.projectId } }"
-						class="task-project me-1"
-						:class="{'me-2': task.hexColor !== ''}"
+						class="task-project mie-1"
+						:class="{'mie-2': task.hexColor !== ''}"
 						@click.stop
 					>
 						{{ project.title }}
@@ -40,13 +40,13 @@
 					<ColorBubble
 						v-if="task.hexColor !== ''"
 						:color="getHexColor(task.hexColor)"
-						class="me-1"
+						class="mie-1"
 					/>
 	
 					<PriorityLabel
 						:priority="task.priority"
 						:done="task.done"
-						class="pe-2"
+						class="pis-2"
 					/>
 
 					<RouterLink
@@ -61,7 +61,7 @@
 
 				<Labels
 					v-if="task.labels.length > 0"
-					class="labels ms-2 me-1"
+					class="labels mis-2 mie-1"
 					:labels="task.labels"
 				/>
 
@@ -69,7 +69,7 @@
 					v-if="task.assignees.length > 0"
 					:assignees="task.assignees"
 					:avatar-size="25"
-					class="ms-1"
+					class="mis-1"
 					:inline="true"
 				/>
 
@@ -134,7 +134,7 @@
 			<ColorBubble
 				v-if="showProjectSeparately && projectColor !== '' && currentProject?.id !== task.projectId"
 				:color="projectColor"
-				class="me-1"
+				class="mie-1"
 			/>
 
 			<RouterLink
diff --git a/frontend/src/components/tasks/partials/SingleTaskInlineReadonly.vue b/frontend/src/components/tasks/partials/SingleTaskInlineReadonly.vue
index 06184934d..8c89393cf 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="{'me-2': task.hexColor !== ''}"
+				:class="{'mie-2': task.hexColor !== ''}"
 			>
 				{{ project.title }}
 			</span>
@@ -13,7 +13,7 @@
 			<ColorBubble
 				v-if="task.hexColor !== ''"
 				:color="getHexColor(task.hexColor)"
-				class="me-1"
+				class="mie-1"
 			/>
 
 			<PriorityLabel
@@ -36,7 +36,7 @@
 
 		<Labels
 			v-if="task.labels.length > 0"
-			class="labels ms-2 me-1"
+			class="labels mis-2 mie-1"
 			:labels="task.labels"
 		/>
 
@@ -44,7 +44,7 @@
 			v-if="task.assignees.length > 0"
 			:assignees="task.assignees"
 			:avatar-size="20"
-			class="ms-1"
+			class="mis-1"
 			:inline="true"
 		/>
 
diff --git a/frontend/src/styles/theme/_index.scss b/frontend/src/styles/theme/_index.scss
index 88434ce6b..eec739984 100644
--- a/frontend/src/styles/theme/_index.scss
+++ b/frontend/src/styles/theme/_index.scss
@@ -11,3 +11,4 @@
 @import "typography";
 @import 'helpers';
 @import 'navigation';
+@import 'logical-spacing';
diff --git a/frontend/src/styles/theme/logical-spacing.scss b/frontend/src/styles/theme/logical-spacing.scss
new file mode 100644
index 000000000..d030ba6f4
--- /dev/null
+++ b/frontend/src/styles/theme/logical-spacing.scss
@@ -0,0 +1,40 @@
+$bulma-sizes: (
+  0: 0,
+  1: 0.25rem,
+  2: 0.5rem,
+  3: 0.75rem,
+  4: 1rem,
+  5: 1.5rem,
+  6: 3rem,
+);
+
+$types: (
+  p: padding,
+  m: margin,
+  b: border,
+);
+
+@each $name, $val in $bulma-sizes {
+  @each $type, $property in $types {
+    .#{$type}is-#{$name} {
+      #{$property}-inline-start: #{$val};
+    }
+    .#{$type}ie-#{$name} {
+      #{$property}-inline-end: #{$val};
+    }
+    .#{$type}bs-#{$name} {
+      #{$property}-block-start: #{$val};
+    }
+    .#{$type}be-#{$name} {
+      #{$property}-block-end: #{$val};
+    }
+  }
+}
+
+.has-text-start {
+  text-align: start;
+}
+
+.has-text-end {
+  text-align: end;
+}
diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
index 11bb42b40..fbbdc35c3 100644
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -7,7 +7,7 @@
 		<Message
 			v-if="deletionScheduledAt !== null"
 			variant="danger"
-			class="mb-4"
+			class="mbe-4"
 		>
 			{{
 				$t('user.deletion.scheduled', {
@@ -26,7 +26,7 @@
 		<ImportHint v-if="tasksLoaded" />
 		<div
 			v-if="projectHistory.length > 0"
-			class="is-max-width-desktop has-text-start mt-4"
+			class="is-max-width-desktop has-text-start mbs-4"
 		>
 			<h3>{{ $t('home.lastViewed') }}</h3>
 			<ProjectCardGrid
diff --git a/frontend/src/views/migrate/MigrationHandler.vue b/frontend/src/views/migrate/MigrationHandler.vue
index 35bb23fdf..a6104e235 100644
--- a/frontend/src/views/migrate/MigrationHandler.vue
+++ b/frontend/src/views/migrate/MigrationHandler.vue
@@ -10,7 +10,7 @@
 					<Message
 						v-if="migrationError"
 						variant="danger"
-						class="mb-4"
+						class="mbe-4"
 					>
 						{{ migrationError }}
 					</Message>
@@ -62,7 +62,7 @@
 			</div>
 		</template>
 		<div v-else-if="!migrationJustStarted && lastMigrationStartedAt && lastMigrationFinishedAt === null">
-			<Message class="mb-4">
+			<Message class="mbe-4">
 				{{ $t('migrate.migrationInProgress') }}
 			</Message>
 			<XButton :to="{name: 'home'}">
@@ -92,13 +92,13 @@
 		<div v-else>
 			<Message
 				v-if="migrator.isFileMigrator"
-				class="mb-4"
+				class="mbe-4"
 			>
 				{{ message }}
 			</Message>
 			<Message
 				v-else
-				class="mb-4"
+				class="mbe-4"
 			>
 				{{ $t('migrate.migrationStartedWillReciveEmail', {service: migrator.name}) }}
 			</Message>
diff --git a/frontend/src/views/project/settings/ProjectSettingsBackground.vue b/frontend/src/views/project/settings/ProjectSettingsBackground.vue
index efea62289..6a755fecf 100644
--- a/frontend/src/views/project/settings/ProjectSettingsBackground.vue
+++ b/frontend/src/views/project/settings/ProjectSettingsBackground.vue
@@ -8,7 +8,7 @@
 	>
 		<div
 			v-if="uploadBackgroundEnabled"
-			class="mb-4"
+			class="mbe-4"
 		>
 			<input
 				ref="backgroundUploadInput"
@@ -76,7 +76,7 @@
 			<XButton
 				v-if="backgroundSearchResult.length > 0"
 				:disabled="backgroundService.loading"
-				class="is-load-more-button mt-4"
+				class="is-load-more-button mbs-4"
 				:shadow="false"
 				variant="secondary"
 				@click="searchBackgrounds(currentPage + 1)"
diff --git a/frontend/src/views/project/settings/ProjectSettingsShare.vue b/frontend/src/views/project/settings/ProjectSettingsShare.vue
index 704020027..df4610aa4 100644
--- a/frontend/src/views/project/settings/ProjectSettingsShare.vue
+++ b/frontend/src/views/project/settings/ProjectSettingsShare.vue
@@ -19,7 +19,7 @@
 		<LinkSharing
 			v-if="linkSharingEnabled"
 			:project-id="projectId"
-			class="mt-4"
+			class="mbs-4"
 		/>
 	</CreateEdit>
 </template>
diff --git a/frontend/src/views/project/settings/ProjectSettingsViews.vue b/frontend/src/views/project/settings/ProjectSettingsViews.vue
index af0df5059..c8e3eae90 100644
--- a/frontend/src/views/project/settings/ProjectSettingsViews.vue
+++ b/frontend/src/views/project/settings/ProjectSettingsViews.vue
@@ -132,11 +132,11 @@ async function saveViewPosition(e) {
 		<ViewEditForm
 			v-if="showCreateForm"
 			v-model="newView"
-			class="mb-4"
+			class="mbe-4"
 		/>
 		<div
 			v-if="isAdmin"
-			class="is-flex is-justify-content-end mb-4"
+			class="is-flex is-justify-content-end mbe-4"
 		>
 			<XButton
 				:loading="projectViewService.loading"
@@ -178,7 +178,7 @@ async function saveViewPosition(e) {
 							<td colspan="3">
 								<ViewEditForm
 									v-model="viewToEdit"
-									class="mb-4"
+									class="mbe-4"
 									:loading="projectViewService.loading"
 									:show-save-buttons="true"
 									@cancel="viewToEdit = null"
@@ -192,7 +192,7 @@ async function saveViewPosition(e) {
 							<td class="has-text-end actions">
 								<XButton
 									v-if="isAdmin"
-									class="is-danger me-2"
+									class="is-danger mie-2"
 									icon="trash-alt"
 									@click="() => {
 										viewIdToDelete = v.id
diff --git a/frontend/src/views/project/settings/ProjectSettingsWebhooks.vue b/frontend/src/views/project/settings/ProjectSettingsWebhooks.vue
index 540dc8eba..de5a1fe8f 100644
--- a/frontend/src/views/project/settings/ProjectSettingsWebhooks.vue
+++ b/frontend/src/views/project/settings/ProjectSettingsWebhooks.vue
@@ -124,7 +124,7 @@ function validateSelectedEvents() {
 		<XButton
 			v-if="!(webhooks?.length === 0 || showNewForm)"
 			icon="plus"
-			class="mb-4"
+			class="mbe-4"
 			@click="showNewForm = true"
 		>
 			{{ $t('project.webhooks.create') }}
diff --git a/frontend/src/views/sharing/LinkSharingAuth.vue b/frontend/src/views/sharing/LinkSharingAuth.vue
index 190109ddf..0feef6dc9 100644
--- a/frontend/src/views/sharing/LinkSharingAuth.vue
+++ b/frontend/src/views/sharing/LinkSharingAuth.vue
@@ -7,7 +7,7 @@
 			v-if="authenticateWithPassword"
 			class="box"
 		>
-			<p class="pb-2">
+			<p class="pbe-2">
 				{{ $t('sharing.passwordRequired') }}
 			</p>
 			<div class="field">
@@ -34,7 +34,7 @@
 			<Message
 				v-if="errorMessage !== ''"
 				variant="danger"
-				class="mt-4"
+				class="mbs-4"
 			>
 				{{ errorMessage }}
 			</Message>
@@ -72,12 +72,13 @@ function useAuth() {
 	const password = ref('')
 
 	const authLinkShare = computed(() => authStore.authLinkShare)
-	
+
 	function redirectToProject(projectId: IProject['id']) {
 		const hash = LINK_SHARE_HASH_PREFIX + route.params.share
-		
-		const viewId = new URLSearchParams(window.location.search).get('view') || null
-		
+
+		const viewId =
+			new URLSearchParams(window.location.search).get('view') || null
+
 		const last = getLastVisitedRoute()
 		if (last) {
 			return router.push({
@@ -85,8 +86,8 @@ function useAuth() {
 				hash,
 			})
 		}
-		
-		if(viewId) {
+
+		if (viewId) {
 			return router.push({
 				name: 'project.view',
 				params: {
diff --git a/frontend/src/views/tasks/ShowTasks.vue b/frontend/src/views/tasks/ShowTasks.vue
index 17ceb9259..07748362b 100644
--- a/frontend/src/views/tasks/ShowTasks.vue
+++ b/frontend/src/views/tasks/ShowTasks.vue
@@ -3,7 +3,7 @@
 		v-cy="'showTasks'"
 		class="is-max-width-desktop has-text-start"
 	>
-		<h3 class="mb-2 title">
+		<h3 class="mbe-2 title">
 			{{ pageTitle }}
 		</h3>
 		<p
@@ -15,7 +15,7 @@
 					<XButton
 						variant="primary"
 						:shadow="false"
-						class="mb-2"
+						class="mbe-2"
 						@click.prevent.stop="toggle()"
 					>
 						{{ $t('task.show.select') }}
@@ -24,7 +24,7 @@
 			</DatepickerWithRange>
 			<FancyCheckbox
 				:model-value="showNulls"
-				class="me-2"
+				class="mie-2"
 				@update:modelValue="setShowNulls"
 			>
 				{{ $t('task.show.noDates') }}
@@ -37,7 +37,7 @@
 			</FancyCheckbox>
 		</p>
 		<template v-if="!loading && (!tasks || tasks.length === 0) && showNothingToDo">
-			<h3 class="has-text-centered mt-6">
+			<h3 class="has-text-centered mbs-6">
 				{{ $t('task.show.noTasks') }}
 			</h3>
 			<LlamaCool class="llama-cool" />
diff --git a/frontend/src/views/tasks/TaskDetailView.vue b/frontend/src/views/tasks/TaskDetailView.vue
index 904b2935e..44c49d67b 100644
--- a/frontend/src/views/tasks/TaskDetailView.vue
+++ b/frontend/src/views/tasks/TaskDetailView.vue
@@ -51,7 +51,7 @@
 			<ChecklistSummary :task="task" />
 
 			<!-- Content and buttons -->
-			<div class="columns mt-2">
+			<div class="columns mbs-2">
 				<!-- Content -->
 				<div
 					:class="{'is-two-thirds': canWrite}"
@@ -77,7 +77,7 @@
 							<AssigneeList
 								v-else
 								:assignees="task.assignees"
-								class="mt-2"
+								class="mbs-2"
 							/>
 						</div>
 						<CustomTransition
@@ -352,7 +352,7 @@
 					<!-- Related Tasks -->
 					<div
 						v-if="activeFields.relatedTasks"
-						class="content details mb-0"
+						class="content details mbe-0"
 					>
 						<h3>
 							<span class="icon is-grey">
@@ -576,7 +576,7 @@
 			</template>
 
 			<template #text>
-				<p class="tw-text-balance !tw-mb-0">
+				<p class="tw-text-balance !tw-mbe-0">
 					{{ $t('task.detail.delete.text1') }}
 				</p>
 				<p class="tw-text-balance">
diff --git a/frontend/src/views/teams/EditTeam.vue b/frontend/src/views/teams/EditTeam.vue
index b505c8bb6..0a9b53fcd 100644
--- a/frontend/src/views/teams/EditTeam.vue
+++ b/frontend/src/views/teams/EditTeam.vue
@@ -71,7 +71,7 @@
 				</div>
 			</form>
 
-			<div class="field has-addons mt-4">
+			<div class="field has-addons mbs-4">
 				<div class="control is-fullwidth">
 					<XButton
 						:loading="teamService.loading"
@@ -176,7 +176,7 @@
 							<XButton
 								v-if="m.id !== userInfo.id"
 								:loading="teamMemberService.loading"
-								class="me-2"
+								class="mie-2"
 								@click="() => toggleUserType(m)"
 							>
 								{{ m.admin ? $t('team.edit.makeMember') : $t('team.edit.makeAdmin') }}
diff --git a/frontend/src/views/user/DataExportDownload.vue b/frontend/src/views/user/DataExportDownload.vue
index b424db35b..59c9b68be 100644
--- a/frontend/src/views/user/DataExportDownload.vue
+++ b/frontend/src/views/user/DataExportDownload.vue
@@ -34,13 +34,13 @@
 		<XButton
 			v-focus
 			:loading="dataExportService.loading"
-			class="mt-4 me-4"
+			class="mbs-4 mie-4"
 			@click="download()"
 		>
 			{{ $t('misc.download') }}
 		</XButton>
 		<XButton
-			class="button mt-4"
+			class="button mbs-4"
 			:to="{name:'user.settings.data-export'}"
 			variant="tertary"
 		>
diff --git a/frontend/src/views/user/Login.vue b/frontend/src/views/user/Login.vue
index 5fe9aea7f..b54e5ebc4 100644
--- a/frontend/src/views/user/Login.vue
+++ b/frontend/src/views/user/Login.vue
@@ -4,14 +4,14 @@
 			v-if="confirmedEmailSuccess"
 			variant="success"
 			text-align="center"
-			class="mb-4"
+			class="mbe-4"
 		>
 			{{ $t('user.auth.confirmEmailSuccess') }}
 		</Message>
 		<Message
 			v-if="errorMessage"
 			variant="danger"
-			class="mb-4"
+			class="mbe-4"
 		>
 			{{ errorMessage }}
 		</Message>
@@ -100,7 +100,7 @@
 					<input
 						v-model="rememberMe"
 						type="checkbox"
-						class="me-1"
+						class="mie-1"
 					>
 					{{ $t('user.auth.remember') }}
 				</label>
@@ -115,7 +115,7 @@
 			</XButton>
 			<p
 				v-if="registrationEnabled"
-				class="mt-2"
+				class="mbs-2"
 			>
 				{{ $t('user.auth.noAccountYet') }}
 				<RouterLink
@@ -130,13 +130,13 @@
 
 		<div
 			v-if="hasOpenIdProviders"
-			class="mt-4"
+			class="mbs-4"
 		>
 			<XButton
 				v-for="(p, k) in openidConnect.providers"
 				:key="k"
 				variant="secondary"
-				class="is-fullwidth mt-2"
+				class="is-fullwidth mbs-2"
 				@click="redirectToProvider(p)"
 			>
 				{{ $t('user.auth.loginWith', {provider: p.name}) }}
diff --git a/frontend/src/views/user/OpenIdAuth.vue b/frontend/src/views/user/OpenIdAuth.vue
index 7a36cd96b..33268c80b 100644
--- a/frontend/src/views/user/OpenIdAuth.vue
+++ b/frontend/src/views/user/OpenIdAuth.vue
@@ -9,7 +9,7 @@
 		<Message
 			v-if="errorMessageFromQuery"
 			variant="danger"
-			class="mt-2"
+			class="mbs-2"
 		>
 			{{ errorMessageFromQuery }}
 		</Message>
diff --git a/frontend/src/views/user/PasswordReset.vue b/frontend/src/views/user/PasswordReset.vue
index d11098a9b..0f7c4b64d 100644
--- a/frontend/src/views/user/PasswordReset.vue
+++ b/frontend/src/views/user/PasswordReset.vue
@@ -2,20 +2,20 @@
 	<div>
 		<Message
 			v-if="errorMsg"
-			class="mb-4"
+			class="mbe-4"
 		>
 			{{ errorMsg }}
 		</Message>
 		<div
 			v-if="successMessage"
-			class="has-text-centered mb-4"
+			class="has-text-centered mbe-4"
 		>
 			<Message variant="success">
 				{{ successMessage }}
 			</Message>
 			<XButton
 				:to="{ name: 'user.login' }"
-				class="mt-4"
+				class="mbs-4"
 			>
 				{{ $t('user.auth.login') }}
 			</XButton>
diff --git a/frontend/src/views/user/Register.vue b/frontend/src/views/user/Register.vue
index 63bba69de..45d2d773a 100644
--- a/frontend/src/views/user/Register.vue
+++ b/frontend/src/views/user/Register.vue
@@ -3,7 +3,7 @@
 		<Message
 			v-if="errorMessage !== ''"
 			variant="danger"
-			class="mb-4"
+			class="mbe-4"
 		>
 			{{ errorMessage }}
 		</Message>
@@ -82,7 +82,7 @@
 			<XButton
 				id="register-submit"
 				:loading="isLoading"
-				class="me-2"
+				class="mie-2"
 				:disabled="!everythingValid"
 				@click="submit"
 			>
@@ -92,14 +92,14 @@
 			<Message
 				v-if="configStore.demoModeEnabled"
 				variant="warning"
-				class="mt-4"
+				class="mbs-4"
 			>
 				{{ $t('demo.title') }}
 				{{ $t('demo.accountWillBeDeleted') }}<br>
 				<strong class="is-uppercase">{{ $t('demo.everythingWillBeDeleted') }}</strong>
 			</Message>
 
-			<p class="mt-2">
+			<p class="mbs-2">
 				{{ $t('user.auth.alreadyHaveAnAccount') }}
 				<RouterLink :to="{ name: 'user.login' }">
 					{{ $t('user.auth.login') }}
diff --git a/frontend/src/views/user/RequestPasswordReset.vue b/frontend/src/views/user/RequestPasswordReset.vue
index 1d2b46bf8..efe34d362 100644
--- a/frontend/src/views/user/RequestPasswordReset.vue
+++ b/frontend/src/views/user/RequestPasswordReset.vue
@@ -3,20 +3,20 @@
 		<Message
 			v-if="errorMsg"
 			variant="danger"
-			class="mb-4"
+			class="mbe-4"
 		>
 			{{ errorMsg }}
 		</Message>
 		<div
 			v-if="isSuccess"
-			class="has-text-centered mb-4"
+			class="has-text-centered mbe-4"
 		>
 			<Message variant="success">
 				{{ $t('user.auth.resetPasswordSuccess') }}
 			</Message>
 			<XButton
 				:to="{ name: 'user.login' }"
-				class="mt-4"
+				class="mbs-4"
 			>
 				{{ $t('user.auth.login') }}
 			</XButton>
diff --git a/frontend/src/views/user/settings/ApiTokens.vue b/frontend/src/views/user/settings/ApiTokens.vue
index 321e56a07..4f6746f4b 100644
--- a/frontend/src/views/user/settings/ApiTokens.vue
+++ b/frontend/src/views/user/settings/ApiTokens.vue
@@ -162,7 +162,7 @@ function toggleGroupPermissionsFromChild(group: string, checked: boolean) {
 	<Card :title="$t('user.settings.apiTokens.title')">
 		<Message
 			v-if="tokenCreatedSuccessMessage !== ''"
-			class="has-text-centered mb-4"
+			class="has-text-centered mbe-4"
 		>
 			{{ tokenCreatedSuccessMessage }}<br>
 			{{ $t('user.settings.apiTokens.tokenCreatedNotSeeAgain') }}
@@ -290,7 +290,7 @@ function toggleGroupPermissionsFromChild(group: string, checked: boolean) {
 					<flat-pickr
 						v-if="newTokenExpiry === 'custom'"
 						v-model="newTokenExpiryCustom"
-						class="ms-2"
+						class="mis-2"
 						:config="flatPickerConfig"
 					/>
 				</div>
@@ -303,14 +303,14 @@ function toggleGroupPermissionsFromChild(group: string, checked: boolean) {
 				<div
 					v-for="(routes, group) in availableRoutes"
 					:key="group"
-					class="mb-2"
+					class="mbe-2"
 				>
 					<template
 						v-if="Object.keys(routes).length >= 1"
 					>
 						<FancyCheckbox
 							v-model="newTokenPermissionsGroup[group]"
-							class="me-2 is-capitalized has-text-weight-bold"
+							class="mie-2 is-capitalized has-text-weight-bold"
 							@update:modelValue="checked => selectPermissionGroup(group, checked)"
 						>
 							{{ formatPermissionTitle(group) }}
@@ -323,7 +323,7 @@ function toggleGroupPermissionsFromChild(group: string, checked: boolean) {
 					>
 						<FancyCheckbox
 							v-model="newTokenPermissions[group][route]"
-							class="ms-4 me-2 is-capitalized"
+							class="mis-4 mie-2 is-capitalized"
 							@update:modelValue="checked => toggleGroupPermissionsFromChild(group, checked)"
 						>
 							{{ formatPermissionTitle(route) }}
@@ -350,7 +350,7 @@ function toggleGroupPermissionsFromChild(group: string, checked: boolean) {
 		<XButton
 			v-else
 			icon="plus"
-			class="mb-4"
+			class="mbe-4"
 			:loading="service.loading"
 			@click="() => showCreateForm = true"
 		>
diff --git a/frontend/src/views/user/settings/Avatar.vue b/frontend/src/views/user/settings/Avatar.vue
index 51a872efc..27aff4927 100644
--- a/frontend/src/views/user/settings/Avatar.vue
+++ b/frontend/src/views/user/settings/Avatar.vue
@@ -9,7 +9,7 @@
 		</Message>
 
 		<template v-else>
-			<div class="control mb-4">
+			<div class="control mbe-4">
 				<label
 					v-for="(label, providerId) in AVATAR_PROVIDERS"
 					:key="providerId"
@@ -46,7 +46,7 @@
 						ref="cropper"
 						:src="avatarToCrop"
 						:stencil-props="{aspectRatio: 1}"
-						class="mb-4 cropper"
+						class="mbe-4 cropper"
 						@ready="() => loading = false"
 					/>
 					<XButton
@@ -61,7 +61,7 @@
 
 			<div
 				v-else
-				class="mt-2"
+				class="mbs-2"
 			>
 				<XButton
 					:loading="avatarService.loading || loading"
diff --git a/frontend/src/views/user/settings/Caldav.vue b/frontend/src/views/user/settings/Caldav.vue
index 5a43218df..d7778ef89 100644
--- a/frontend/src/views/user/settings/Caldav.vue
+++ b/frontend/src/views/user/settings/Caldav.vue
@@ -25,7 +25,7 @@
 			</div>
 		</div>
 
-		<h5 class="mt-5 mb-4 has-text-weight-bold">
+		<h5 class="mbs-5 mbe-4 has-text-weight-bold">
 			{{ $t('user.settings.caldav.tokens') }}
 		</h5>
 
@@ -72,7 +72,7 @@
 
 		<Message
 			v-if="newToken"
-			class="mb-4"
+			class="mbe-4"
 		>
 			{{ $t('user.settings.caldav.tokenCreated', {token: newToken.token}) }}<br>
 			{{ $t('user.settings.caldav.wontSeeItAgain') }}
@@ -80,7 +80,7 @@
 
 		<XButton
 			icon="plus"
-			class="mb-4"
+			class="mbe-4"
 			:loading="service.loading"
 			@click="createToken"
 		>
diff --git a/frontend/src/views/user/settings/DataExport.vue b/frontend/src/views/user/settings/DataExport.vue
index 3e0d59e34..b37fca8dc 100644
--- a/frontend/src/views/user/settings/DataExport.vue
+++ b/frontend/src/views/user/settings/DataExport.vue
@@ -2,7 +2,7 @@
 	<Card :title="$t('user.export.title')">
 		<Message
 			v-if="exportInfo"
-			class="mb-4"
+			class="mbe-4"
 		>
 			<div class="export-message">
 				<p>
@@ -63,7 +63,7 @@
 
 		<XButton
 			:loading="dataExportService.loading"
-			class="is-fullwidth mt-4"
+			class="is-fullwidth mbs-4"
 			@click="requestDataExport()"
 		>
 			{{ $t('user.export.request') }}
diff --git a/frontend/src/views/user/settings/Deletion.vue b/frontend/src/views/user/settings/Deletion.vue
index c28621181..2f8e402fd 100644
--- a/frontend/src/views/user/settings/Deletion.vue
+++ b/frontend/src/views/user/settings/Deletion.vue
@@ -51,7 +51,7 @@
 
 			<XButton
 				:loading="accountDeleteService.loading"
-				class="is-fullwidth mt-4"
+				class="is-fullwidth mbs-4"
 				@click="cancelDeletion()"
 			>
 				{{ $t('user.deletion.scheduledCancelConfirm') }}
@@ -101,7 +101,7 @@
 
 			<XButton
 				:loading="accountDeleteService.loading"
-				class="is-fullwidth mt-4 is-danger"
+				class="is-fullwidth mbs-4 is-danger"
 				@click="deleteAccount()"
 			>
 				{{ $t('user.deletion.confirm') }}
diff --git a/frontend/src/views/user/settings/EmailUpdate.vue b/frontend/src/views/user/settings/EmailUpdate.vue
index bf3010a63..6d10fc371 100644
--- a/frontend/src/views/user/settings/EmailUpdate.vue
+++ b/frontend/src/views/user/settings/EmailUpdate.vue
@@ -40,7 +40,7 @@
 
 		<XButton
 			:loading="emailUpdateService.loading"
-			class="is-fullwidth mt-4"
+			class="is-fullwidth mbs-4"
 			@click="updateEmail"
 		>
 			{{ $t('misc.save') }}
diff --git a/frontend/src/views/user/settings/PasswordUpdate.vue b/frontend/src/views/user/settings/PasswordUpdate.vue
index fabf6f3aa..60e654b13 100644
--- a/frontend/src/views/user/settings/PasswordUpdate.vue
+++ b/frontend/src/views/user/settings/PasswordUpdate.vue
@@ -60,7 +60,7 @@
 
 		<XButton
 			:loading="passwordUpdateService.loading"
-			class="is-fullwidth mt-4"
+			class="is-fullwidth mbs-4"
 			@click="updatePassword"
 		>
 			{{ $t('misc.save') }}
diff --git a/frontend/src/views/user/settings/TOTP.vue b/frontend/src/views/user/settings/TOTP.vue
index 1581bac01..409b34d38 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="ms-2"
+					class="mis-2"
 					@click="totpDisableForm = false"
 				>
 					{{ $t('misc.cancel') }}