From 52b157407af69f18a1678b5182f3677aca912b8a Mon Sep 17 00:00:00 2001
From: Cade Ayres <ca469@kent.ac.uk>
Date: Tue, 17 Feb 2026 12:46:20 +0000
Subject: [PATCH] Modals have a backdrop-filter blur to make background content
 less distracting

---
 src/components/ModalCard.vue | 98 ++++++++++++++++++------------------
 src/css/custom.scss          |  4 ++
 2 files changed, 54 insertions(+), 48 deletions(-)

diff --git a/src/components/ModalCard.vue b/src/components/ModalCard.vue
index b7a8aa5ba..311ccc2d2 100644
--- a/src/components/ModalCard.vue
+++ b/src/components/ModalCard.vue
@@ -1,48 +1,50 @@
-<template>
-    <div :class="['modal', {'is-active': isActive}]" :id="id">
-        <div class="modal-background" @click="closeModal"/>
-        <div class="modal-card py-4">
-            <header class="modal-card-head">
-                <slot name="header"/>
-            </header>
-            <template v-if="!!$slots.body">
-                <section class="modal-card-body">
-                    <slot name="body"/>
-                </section>
-            </template>
-            <template v-if="!!$slots.footer">
-                <footer class="modal-card-foot">
-                    <slot name="footer"/>
-                </footer>
-            </template>
-        </div>
-        <button v-if="canClose" class="modal-close is-large" aria-label="close" @click="closeModal"/>
-    </div>
-</template>
-
-<script lang="ts" setup>
-type ModalCardProps = {
-    id: string;
-    isActive?: boolean;
-    canClose?: boolean;
-}
-
-const props = withDefaults(defineProps<ModalCardProps>(), {
-    isActive: false,
-    canClose: true,
-});
-const emits = defineEmits<{
-    (e: 'close-modal'): void;
-}>();
-
-function closeModal() {
-    if (props.canClose) {
-        emits('close-modal');
-    }
-}
-</script>
-
-
-<style scoped lang="scss">
-
-</style>
+<template>
+    <div :class="['modal', {'is-active': isActive}]" :id="id">
+        <div class="modal-background" @click="closeModal"/>
+        <div class="modal-card py-4">
+            <header class="modal-card-head">
+                <slot name="header"/>
+            </header>
+            <template v-if="!!$slots.body">
+                <section class="modal-card-body">
+                    <slot name="body"/>
+                </section>
+            </template>
+            <template v-if="!!$slots.footer">
+                <footer class="modal-card-foot">
+                    <slot name="footer"/>
+                </footer>
+            </template>
+        </div>
+        <button v-if="canClose" class="modal-close is-large" aria-label="close" @click="closeModal"/>
+    </div>
+</template>
+
+<script lang="ts" setup>
+type ModalCardProps = {
+    id: string;
+    isActive?: boolean;
+    canClose?: boolean;
+}
+
+const props = withDefaults(defineProps<ModalCardProps>(), {
+    isActive: false,
+    canClose: true,
+});
+const emits = defineEmits<{
+    (e: 'close-modal'): void;
+}>();
+
+function closeModal() {
+    if (props.canClose) {
+        emits('close-modal');
+    }
+}
+</script>
+
+
+<style scoped lang="scss">
+.modal {
+    backdrop-filter: blur(5px);
+}
+</style>
diff --git a/src/css/custom.scss b/src/css/custom.scss
index a1472b6bc..ca029ed59 100644
--- a/src/css/custom.scss
+++ b/src/css/custom.scss
@@ -528,3 +528,7 @@ code {
 .v-popper__popper {
     z-index: 100 !important;
 }
+
+.modal-background {
+    backdrop-filter: blur(5px);
+}