Responsive button layout via ButtonGroup

frontend/src/components/form/ActionButton.vue

@@ -29,8 +29,6 @@ function onClick() {
 @import "../../scss/variables";
 
 button {
-    margin: 0.3em;
-
     padding: $button-padding;
     border-radius: $button-border-radius;
     border-width: $button-border-width;

frontend/src/components/form/ButtonGroup.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import type {ButtonSize} from "@/types";
+
+interface Props {
+    buttonSize: ButtonSize;
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+    <div :class="['button-group', buttonSize]">
+        <slot></slot>
+    </div>
+</template>
+
+<style lang="scss">
+@import "../../scss/variables";
+@import "../../scss/mixins";
+
+.button-group {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+
+    button {
+        margin: $button-margin;
+    }
+}
+
+@include max-page-breakpoint(smaller) {
+    .button-group {
+        flex-direction: column;
+
+        button {
+            margin: $button-margin 0;
+            width: 100%;
+        }
+    }
+}
+@include page-breakpoint(smaller) {
+    .button-group {
+        align-items: center;
+        button {
+            flex-grow: 1;
+            max-width: 80%;
+        }
+    }
+}
+</style>