Add card to display errors that scrolls into view.

frontend/src/components/ErrorCard.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import {onMounted, ref} from "vue";
+
+const element = ref<HTMLElement>();
+
+function scrollIntoView() {
+    element.value?.scrollIntoView({
+        behavior: "smooth",
+        block: "nearest"
+    });
+}
+
+onMounted(scrollIntoView);
+</script>
+
+<template>
+    <div ref="element" class="error-card">
+        <slot></slot>
+    </div>
+</template>
+
+<style lang="scss">
+@import "../scss/variables";
+
+.error-card {
+    margin: $error-card-margin;
+    padding: $error-card-padding;
+
+    border: $error-card-border;
+    border-radius: $error-card-border-radius;
+
+    font-weight: $error-card-font-weight;
+
+    background-color: $error-card-background-color;
+    color: $error-card-color;
+}
+</style>

frontend/src/scss/_variables.scss

@@ -77,6 +77,12 @@ $h2-margin: 0.5em 0;
 $link-color: $variant-color-warning;
 $link-hover-color: $variant-color-warning;
 
+// Form
+$label-font-weight: 600;
+$fieldset-border: 0.1em solid $gray;
+$fieldset-border-radius: 0.5em;
+$fieldset-background-color: $gray-darker;
+
 // Inputs
 $input-padding: 0.25em 0.5em;
 $input-background-color: $gray-lighter;
@@ -99,6 +105,16 @@ $button-sizes: (
     large: 1.15em,
 );
 
+// Error cards
+$error-card-margin: 1em 0;
+$error-card-padding: 0.5em;
+$error-card-border: 0.1em solid $variant-color-danger;
+$error-card-border-radius: 0.5em;
+$error-card-font-weight: 600;
+$error-card-background-color: lighten($variant-color-danger, 10%);
+$error-card-color: $page-background-color;
+
+
 // Navigation
 $nav-bar-background-color: $gray-dark;
 $nav-link-color: $page-text-color;