fix: remove usage of .buttons

frontend/src/components/misc/Notification.vue

@@ -41,7 +41,7 @@
 				</div>
 				<div
 					v-if="item.data?.actions?.length > 0"
-					class="buttons is-right"
+					class="tw-flex tw-justify-end tw-gap-2"
 				>
 					<XButton
 						v-for="(action, i) in item.data.actions"
@@ -64,7 +64,7 @@
 	z-index: 9999;
 }
 
-.buttons {
+.tw-flex {
 	margin-block-start: 0.5rem;
 }
 </style>

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 mbs-2">
+		<div class="button-group mbs-2">
 			<XButton
 				variant="secondary"
 				class="is-small"
@@ -168,4 +168,19 @@ p {
 .input {
 	min-inline-size: 2rem;
 }
+
+.button-group {
+	display: flex;
+	justify-content: center;
+
+	:deep(.button:not(:last-child)) {
+		border-start-end-radius: 0;
+		border-end-end-radius: 0;
+	}
+
+	:deep(.button:not(:first-child)) {
+		border-start-start-radius: 0;
+		border-end-start-radius: 0;
+	}
+}
 </style>

frontend/src/views/migrate/MigrationHandler.vue

@@ -76,7 +76,7 @@
 				}}<br>
 				{{ $t('migrate.alreadyMigrated2') }}
 			</p>
-			<div class="buttons">
+			<div class="migration-buttons">
 				<XButton @click="migrate">
 					{{ $t('migrate.confirm') }}
 				</XButton>
@@ -326,4 +326,12 @@ async function migrate() {
 		}
 	}
 }
+
+.migration-buttons {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	justify-content: flex-start;
+	gap: 0.5rem;
+}
 </style>