From 14b482c3528292b859a89c069f118352f457bc11 Mon Sep 17 00:00:00 2001
From: Alex Humphries <Alex.Humphries@safelite.com>
Date: Wed, 7 Jan 2026 14:37:00 -0500
Subject: [PATCH 1/2] 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        | 70 ++++++++++++-------
 .../service-zip-modal-question.vue            |  1 +
 2 files changed, 46 insertions(+), 25 deletions(-)

diff --git a/src/digital-components/modal/modal.vue b/src/digital-components/modal/modal.vue
index 97f18ee6..22f71a02 100644
--- a/src/digital-components/modal/modal.vue
+++ b/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;
diff --git a/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue b/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue
index a537526a..9202fa0b 100644
--- a/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue
+++ b/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"

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 2/2] 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);
                 }