diff --git a/src/components/ConfirmationModal.vue b/src/components/ConfirmationModal.vue
index 5c74ff1cf0..42708a6c2b 100644
--- a/src/components/ConfirmationModal.vue
+++ b/src/components/ConfirmationModal.vue
@@ -4,7 +4,7 @@
 -->
 
 <template>
-	<NcModal closeOnClickOutside @close="cancel">
+	<NcModal class="confirm-modal" :name="title" @close="cancel">
 		<div class="confirm-modal">
 			<h2>{{ title }}</h2>
 			<slot />
@@ -14,8 +14,8 @@
 				</NcButton>
 				<NcButton
 					:href="confirmUrl"
-					:rel="confirmUrl ? 'noopener noreferrer' : false"
-					:target="confirmUrl ? '_blank' : false"
+					:rel="confirmUrl ? 'noopener noreferrer' : undefined"
+					:target="confirmUrl ? '_blank' : undefined"
 					:disabled="disabled"
 					variant="primary"
 					@click="confirm">
diff --git a/src/components/TagItem.vue b/src/components/TagItem.vue
index 35710ba68c..5b2ab03de1 100644
--- a/src/components/TagItem.vue
+++ b/src/components/TagItem.vue
@@ -12,55 +12,57 @@
 			}">
 			{{ translateTagDisplayName(tag) }}
 		</button>
-		<NcActions :forceMenu="true" @close="closeEditTag">
-			<NcActionButton
-				v-if="renameTagLabel"
-				@click="openEditTag">
-				<template #icon>
-					<IconEdit :size="22" />
-				</template>
-				{{ t('mail', 'Edit name or color') }}
-			</NcActionButton>
-			<NcColorPicker
-				v-if="!renameTagLabel"
-				v-model="editColor"
-				class="app-navigation-entry-bullet-wrapper"
-				@submit="updateColor">
-				<div :style="{ backgroundColor: editColor }" class="color0 app-navigation-entry-bullet" />
-			</NcColorPicker>
-			<NcActionInput
-				v-if="renameTagInput"
-				v-model="currentTagName"
-				:error="hasError()"
-				:helperText="errorMessage"
-				@submit="renameTag(tag, $event)" />
-			<NcActionText v-if="showSaving">
-				<template #icon>
-					<NcLoadingIcon :size="22" />
-				</template>
-				{{ t('mail', 'Saving new tag name …') }}
-			</NcActionText>
-			<NcActionButton
-				v-if="!tag.isDefaultTag || !renameTagLabel"
-				@click="deleteTag">
-				<template #icon>
-					<DeleteIcon :size="22" />
-				</template>
-				{{ t('mail', 'Delete tag') }}
-			</NcActionButton>
-		</NcActions>
-		<button
-			v-if="!isSet(tag.imapLabel)"
-			class="tag-actions"
-			@click="addTag(tag.imapLabel)">
-			{{ t('mail', 'Set tag') }}
-		</button>
-		<button
-			v-else
-			class="tag-actions"
-			@click="removeTag(tag.imapLabel)">
-			{{ t('mail', 'Unset tag') }}
-		</button>
+		<div class="tag-group__actions">
+			<NcActions :forceMenu="true" @close="closeEditTag">
+				<NcActionButton
+					v-if="renameTagLabel"
+					@click="openEditTag">
+					<template #icon>
+						<IconEdit :size="22" />
+					</template>
+					{{ t('mail', 'Edit name or color') }}
+				</NcActionButton>
+				<NcColorPicker
+					v-if="!renameTagLabel"
+					v-model="editColor"
+					class="app-navigation-entry-bullet-wrapper"
+					@submit="updateColor">
+					<div :style="{ backgroundColor: editColor }" class="color0 app-navigation-entry-bullet" />
+				</NcColorPicker>
+				<NcActionInput
+					v-if="renameTagInput"
+					v-model="currentTagName"
+					:error="hasError()"
+					:helperText="errorMessage"
+					@submit="renameTag(tag, $event)" />
+				<NcActionText v-if="showSaving">
+					<template #icon>
+						<NcLoadingIcon :size="22" />
+					</template>
+					{{ t('mail', 'Saving new tag name …') }}
+				</NcActionText>
+				<NcActionButton
+					v-if="!tag.isDefaultTag || !renameTagLabel"
+					@click="deleteTag">
+					<template #icon>
+						<DeleteIcon :size="22" />
+					</template>
+					{{ t('mail', 'Delete tag') }}
+				</NcActionButton>
+			</NcActions>
+			<button
+				v-if="!isSet(tag.imapLabel)"
+				class="tag-actions"
+				@click="addTag(tag.imapLabel)">
+				{{ t('mail', 'Set tag') }}
+			</button>
+			<button
+				v-else
+				class="tag-actions"
+				@click="removeTag(tag.imapLabel)">
+				{{ t('mail', 'Unset tag') }}
+			</button>
+		</div>
 	</div>
 </template>
 
@@ -172,7 +174,7 @@ export default {
 			return this.errorMessage !== ''
 		},
 
-		async renameTag(tag, event) {
+		async renameTag(tag) {
 			this.currentTagName = this.currentTagName.trim()
 
 			const otherTags = this.mainStore.getTags
@@ -260,36 +262,48 @@ export default {
 }
 
 .tag-group {
-	display: block;
-	position: relative;
-	margin: 0 1px;
-	overflow: hidden;
-}
-
-.tag-actions {
-	background-color: transparent;
-	border: none;
-	float: inline-end;
-	&:hover,
-	&:focus {
-		background-color: var(--color-border-dark);
-	}
+	display: flex;
+	align-items: center;
+	gap: var(--default-grid-baseline);
+	min-height: 44px;
+	padding-inline: var(--default-grid-baseline);
 }
 
 .tag-group__label {
-	z-index: 2;
+	flex: 0 1 auto;
+	min-width: 0;
 	font-weight: bold;
 	border: none;
 	background-color: transparent;
 	padding-inline: 10px;
+	padding-block: 4px;
+	border-radius: var(--border-radius-pill);
 	overflow: hidden;
 	text-overflow: ellipsis;
-	max-width: 94px;
+	white-space: nowrap;
+	text-align: start;
+	cursor: default;
+}
+
+.tag-group__actions {
+	margin-inline-start: auto;
+	display: flex;
+	align-items: center;
+	flex-shrink: 0;
 }
 
-.action-item {
-	inset-inline-end: 8px;
-	float: inline-end;
+.tag-actions {
+	background-color: transparent;
+	border: none;
+	border-radius: var(--border-radius);
+	padding-inline: calc(var(--default-grid-baseline) * 2);
+	padding-block: var(--default-grid-baseline);
+	white-space: nowrap;
+	cursor: pointer;
+	&:hover,
+	&:focus {
+		background-color: var(--color-border-dark);
+	}
 }
 
 :deep(.input-field) {
diff --git a/src/components/TagModal.vue b/src/components/TagModal.vue
index cb3f8df4d8..8d44fdcc52 100644
--- a/src/components/TagModal.vue
+++ b/src/components/TagModal.vue
@@ -18,47 +18,51 @@
 		labelId="tag-modal-heading"
 		@close="onClose">
 		<div class="modal-content">
-			<h2 id="tag-modal-heading" class="tag-title">
-				{{ t('mail', 'Add default tags') }}
-			</h2>
-			<TagItem
-				v-for="tag in tags"
-				:key="tag.id"
-				:tag="tag"
-				:envelopes="envelopes"
-				@deleteTag="deleteTag" />
-
-			<h2 class="tag-title">
-				{{ t('mail', 'Add tag') }}
-			</h2>
-			<div class="create-tag">
-				<NcButton
-					v-if="!editing"
-					class="tagButton"
-					@click="addTagInput">
-					<template #icon>
-						<IconAdd :size="20" />
-					</template>
+			<div class="tag-list">
+				<h2 id="tag-modal-heading" class="tag-title">
+					{{ t('mail', 'Add default tags') }}
+				</h2>
+				<TagItem
+					v-for="tag in tags"
+					:key="tag.id"
+					:tag="tag"
+					:envelopes="envelopes"
+					@deleteTag="deleteTag" />
+			</div>
+
+			<div class="create-tag-section">
+				<h2 class="tag-title">
 					{{ t('mail', 'Add tag') }}
-				</NcButton>
-				<NcActionInput v-if="editing" :disabled="showSaving" @submit="createTag">
-					<template #icon>
-						<IconTag :size="20" />
-					</template>
-				</NcActionInput>
-				<NcActionText v-if="showSaving">
-					<template #icon>
-						<NcLoadingIcon :size="20" />
-					</template>
-					{{ t('mail', 'Saving tag …') }}
-				</NcActionText>
+				</h2>
+				<div class="create-tag">
+					<NcButton
+						v-if="!editing"
+						class="tagButton"
+						@click="addTagInput">
+						<template #icon>
+							<IconAdd :size="20" />
+						</template>
+						{{ t('mail', 'Add tag') }}
+					</NcButton>
+					<NcActionInput v-if="editing" :disabled="showSaving" @submit="createTag">
+						<template #icon>
+							<IconTag :size="20" />
+						</template>
+					</NcActionInput>
+					<NcActionText v-if="showSaving">
+						<template #icon>
+							<NcLoadingIcon :size="20" />
+						</template>
+						{{ t('mail', 'Saving tag …') }}
+					</NcActionText>
+				</div>
 			</div>
 		</div>
 	</NcModal>
 </template>
 
 <script>
-import { showError, showInfo } from '@nextcloud/dialogs'
+import { showError } from '@nextcloud/dialogs'
 import { mapStores } from 'pinia'
 import NcActionInput from '@nextcloud/vue/components/NcActionInput'
 import NcActionText from '@nextcloud/vue/components/NcActionText'
@@ -206,33 +210,50 @@ export default {
 
 <style lang="scss" scoped>
 :deep(.modal-content) {
-	padding: 20px 20px 20px 20px;
-	max-height: calc(100vh - 210px);
-	overflow-y: auto;
+	display: flex;
+	flex-direction: column;
+	height: calc(100vh - 210px);
+	min-width: min(480px, 90vw);
+	padding: 0;
 }
 
-.tag-modal :deep(.modal-container) {
-	width: auto !important;
+:deep(.modal-container) {
+	min-width: min(480px, 90vw);
 }
 
-.tagButton {
-	display: inline-block;
-	margin-inline-start: 10px;
+.tag-list {
+	flex: 1;
+	min-height: 0;
+	overflow-y: auto;
+	padding: calc(var(--default-grid-baseline) * 5);
+	padding-bottom: calc(var(--default-grid-baseline) * 3);
+}
+
+.create-tag-section {
+	flex-shrink: 0;
+	border-top: 1px solid var(--color-border);
+	padding: calc(var(--default-grid-baseline) * 3) calc(var(--default-grid-baseline) * 5);
 }
 
 .tag-title {
-	margin-top: 20px;
-	margin-inline-start: 10px;
+	margin-top: 0;
+	margin-bottom: calc(var(--default-grid-baseline) * 2);
+	margin-inline-start: var(--default-grid-baseline);
+}
+
+.tagButton {
+	display: inline-block;
+	margin-inline-start: var(--default-grid-baseline);
 }
 
 .create-tag {
 	list-style: none;
-	margin-bottom:12px;
 }
+
 @media only screen and (max-width: 512px) {
-	.tag-modal :deep(.modal-container) {
-	top: 100px !important;
-	max-height: calc(100vh - 170px) !important
+	:deep(.modal-container) {
+		top: 100px !important;
+		max-height: calc(100vh - 170px) !important;
 	}
 }
 </style>