Add prop to modal component to allow for centering

- Defaults to "edge" position, which is to the right on desktop,
  and bottom on mobile. This *should* be the same as current behavior.
- When set to "center", mobile appearance is mostly unchanged (mostly just
  being closer to centered vertically), but desktop modals are centered
  both vertically and horizontally, with a higher width and a height
  dependent on content.

src/digital-components/modal/modal.vue

@@ -11,17 +11,21 @@
             'hidden.bs.modal': onModalClosed,
             'shown.bs.modal': onModalOpened
         }">
-        <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-dialog"
+            :class="{
+                'modal-edge': modalPosition === 'edge',
+                'modal-center': modalPosition === 'center'
+            }">
             <div
                 class="modal-content"
                 role="dialog"
                 aria-modal="true">
                 <div class="modal-header mb-2 mt-2">
-                    <label
+                    <span
                         v-if="headerText"
-                        class="modal-title d-flex justify-content-center pb-0 w-100">
-                        {{ headerText }}
-                    </label>
+                        class="modal-title d-flex justify-content-center pb-0 w-100"
+                        :innerHTML="headerText">
+                    </span>
                     <button
                         ref="closeButton"
                         type="button"
@@ -77,6 +81,10 @@ export default {
         buttonVariant: {
             type: String,
             default: 'success'
+        },
+        modalPosition: {
+            type: String,
+            default: 'edge'
         }
     },
     emits: ['footer-button-event', 'isModalOpened'],
@@ -192,24 +200,11 @@ export default {
     }
     &.modal-component {
         .modal-dialog {
+            display: flex;
             max-width: 47.9375rem;
-            margin: 0 auto;
-            @include media-breakpoint-up(md) {
-                width: 23.5rem;
-                position: absolute;
-                top: 0;
-                right: 0;
-                transform: translate(100%, 0);
-            }
+            align-items: flex-end;
             .modal-content {
                 margin: 1.5rem auto 0 auto;
-                box-shadow: 0px 1rem 3rem -1rem rgba(0, 0, 0, 0.25);
-                border-radius: 1.5rem 1.5rem 0 0;
-                @include media-breakpoint-up(md) {
-                    box-shadow: none;
-                    border-radius: 0;
-                    margin: 0 auto;
-                }
                 .modal-body {
                     .col {
                         max-width: 100%;
@@ -235,11 +230,39 @@ export default {
                     }
                 }
             }
-            &.modal-dialog-centered {
-                align-items: flex-end;
+            &.modal-edge {
                 min-height: 100%;
+                margin: 0 auto;
                 @include media-breakpoint-up(md) {
                     align-items: inherit;
+                    width: 23.5rem;
+                    position: absolute;
+                    top: 0;
+                    right: 0;
+                    transform: translate(100%);
+                }
+                .modal-content {
+                    box-shadow: 0px 1rem 3rem -1rem rgba(0, 0, 0, 0.25);
+                    border-radius: 1.5rem 1.5rem 0 0;
+                    @include media-breakpoint-up(md) {
+                        box-shadow: none;
+                        border-radius: 0;
+                        margin: 0 auto;
+                    }
+                }
+            }
+            &.modal-center {
+                .modal-content {
+                    box-shadow: 0px 1rem 3rem -1rem rgba(0, 0, 0, 0.25);
+                    border-radius: 1.5rem;
+                    overflow: auto;
+                }
+            }
+        }
+        &.show .modal-dialog {
+            &.modal-edge {
+                @include media-breakpoint-up(md) {
+                    transform: translateY(0);
                 }
             }
         }
@@ -251,9 +274,6 @@ export default {
             }
         }
     }
-    &.show .modal-dialog {
-        transform: translateY(0);
-    }
     @include media-breakpoint-up(md) {
         &.fade {
             transition: opacity 0.25s linear;

src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue

@@ -15,6 +15,7 @@
         :onModalOpenedCallback="onModalOpened"
         :onModalClosedCallback="onModalClosed"
         :footerButtonText="modalFooterText"
+        :modalPosition="'center'"
         @footerButtonEvent="setZipCode">
         <serviceZipQuestion
             ref="serviceZipCodeQuestion"