From 4e51fce70b23b3ee6a83c184142916ec6b7e0a60 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Tue, 26 Sep 2023 14:32:43 -0400
Subject: [PATCH] CSR-1593 modal desktop sidebar slide-in development.

---
 src/digital-components/modal/modal.vue        | 20 +++++++++++++++++--
 .../time-slot-modal-question.vue              |  3 ---
 src/styles/common-styles.scss                 |  8 --------
 3 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/src/digital-components/modal/modal.vue b/src/digital-components/modal/modal.vue
index 899a63b8f..435ec625a 100644
--- a/src/digital-components/modal/modal.vue
+++ b/src/digital-components/modal/modal.vue
@@ -148,12 +148,25 @@ export default {
     }
     &.modal-component {
         .modal-dialog {
-            max-width: 576px;
+            max-width: 767px;
             margin: 0 auto;
+            @include media-breakpoint-up(md) {
+                width: 376px;
+                position: absolute;
+                top: 0;
+                right: 0;
+                transform: translate(100%, 0);
+            }
             .modal-content {
-                margin: 0 auto;
+                margin: 1.5rem auto 0 auto;
                 box-shadow: 0px 16px 48px -16px 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;
+                    height: 100vh;
+                    margin: 0 auto;
+                }
                 .modal-body {
                     .modal-sub-body {
                         color: $gray-600;
@@ -166,6 +179,9 @@ export default {
                             margin-bottom: 0;
                         }
                     }
+                    @include media-breakpoint-up(md) {
+                        overflow: scroll;
+                    }
                 }
             }
             &.modal-dialog-centered {
diff --git a/src/layouts/schedule/time-slot-modal-question/time-slot-modal-question.vue b/src/layouts/schedule/time-slot-modal-question/time-slot-modal-question.vue
index b6cc95365..9a64710b2 100644
--- a/src/layouts/schedule/time-slot-modal-question/time-slot-modal-question.vue
+++ b/src/layouts/schedule/time-slot-modal-question/time-slot-modal-question.vue
@@ -516,9 +516,6 @@ export default {
 
 <style lang="scss">
 .time-slots-modal.modal.modal-component {
-    > .modal-dialog > .modal-content {
-        margin-top: 24px;
-    }
     .modal-header {
         padding-bottom: 0;
         margin-bottom: 0 !important;
diff --git a/src/styles/common-styles.scss b/src/styles/common-styles.scss
index 7c48414a4..406b3ee53 100644
--- a/src/styles/common-styles.scss
+++ b/src/styles/common-styles.scss
@@ -41,14 +41,6 @@ body {
         height: 1px;
         overflow: hidden;
     }
-
-    //Footer modal backdrop adjustments for positioning
-    .modal-backdrop {
-        left: 50%;
-        transform: translateX(-50%);
-        max-width: 576px;
-        height: calc(100% - 72px);
-    }
 }
 //Disable scroll of main container when modal is open
 .modal-open {