From fcd7b5a0db1e426fc8a12670b4649b003155841d Mon Sep 17 00:00:00 2001
From: Alex Humphries <Alex.Humphries@safelite.com>
Date: Wed, 7 Jan 2026 14:59:57 -0500
Subject: [PATCH] Better vertical centering, undo label->span change

---
 src/digital-components/modal/modal.vue | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/digital-components/modal/modal.vue b/src/digital-components/modal/modal.vue
index 22f71a02..1677aedd 100644
--- a/src/digital-components/modal/modal.vue
+++ b/src/digital-components/modal/modal.vue
@@ -13,19 +13,19 @@
         }">
         <div class="modal-dialog"
             :class="{
-                'modal-edge': modalPosition === 'edge',
-                'modal-center': modalPosition === 'center'
+                'modal-dialog-edge': modalPosition === 'edge',
+                'modal-dialog-centered': modalPosition === 'center'
             }">
             <div
                 class="modal-content"
                 role="dialog"
                 aria-modal="true">
                 <div class="modal-header mb-2 mt-2">
-                    <span
+                    <label
                         v-if="headerText"
-                        class="modal-title d-flex justify-content-center pb-0 w-100"
-                        :innerHTML="headerText">
-                    </span>
+                        class="modal-title d-flex justify-content-center pb-0 w-100">
+                        {{ headerText }}
+                    </label>
                     <button
                         ref="closeButton"
                         type="button"
@@ -202,7 +202,6 @@ export default {
         .modal-dialog {
             display: flex;
             max-width: 47.9375rem;
-            align-items: flex-end;
             .modal-content {
                 margin: 1.5rem auto 0 auto;
                 .modal-body {
@@ -230,9 +229,10 @@ export default {
                     }
                 }
             }
-            &.modal-edge {
+            &.modal-dialog-edge {
                 min-height: 100%;
                 margin: 0 auto;
+                align-items: flex-end;
                 @include media-breakpoint-up(md) {
                     align-items: inherit;
                     width: 23.5rem;
@@ -251,7 +251,7 @@ export default {
                     }
                 }
             }
-            &.modal-center {
+            &.modal-dialog-centered {
                 .modal-content {
                     box-shadow: 0px 1rem 3rem -1rem rgba(0, 0, 0, 0.25);
                     border-radius: 1.5rem;
@@ -260,7 +260,7 @@ export default {
             }
         }
         &.show .modal-dialog {
-            &.modal-edge {
+            &.modal-dialog-edge {
                 @include media-breakpoint-up(md) {
                     transform: translateY(0);
                 }