Merge pull request #887 from Safelite/feature/richardson/SSR-1512.2

Some UI clean up

src/layouts/provider-preference/shop-preference-modal/shop-preference-modal.vue

@@ -2,15 +2,16 @@
      <modal
         :ref="ModalName"
         :modalId="ModalName"
+        :onModalClosedCallback="onModalClosed"
         :footerButtonText="ModalCloseButtonText"
         @footerButtonEvent="footerButtonClick">
         <h5 class="text-center mb-4">
         {{ ModalHeadline }}
         </h5>
-            <div>
-                <div
-                    class="mb-4"
-                    v-html="ModalBodyText"></div>
+        <div>
+            <div
+                class="mb-4"
+                v-html="ModalBodyText"></div>
             <a
                 v-if="showSteeringLink"
                 class="modal-text"
@@ -35,6 +36,11 @@ export default {
         showSteeringLink: Boolean
     },
     emits: ['openSteering'],
+    data() {
+        return {
+            clickedSteeringLink: false
+        };
+    },
     computed: {
         ModalName() {
             return this.cmsWidgetName;
@@ -63,12 +69,18 @@ export default {
         openModal() {
             this.$refs[this.ModalName].openModal();
         },
+        onModalClosed() {
+            if (this.clickedSteeringLink) {
+                this.$emit('openSteering');
+                this.clickedSteeringLink = false;
+            }
+        },
         footerButtonClick() {
             this.$refs[this.ModalName].closeModal();
         },
         openSteeringModal() {
+            this.clickedSteeringLink = true;
             this.$refs[this.ModalName].closeModal();
-            this.$emit('openSteering');
         }
     }
 };

src/styles/common-styles.scss

@@ -98,10 +98,22 @@ body {
         @include media-breakpoint-up(xl) {
             padding-bottom: unset;
         }
+
+        div.modal.show {
+            padding-bottom: 3rem;
+
+            @include media-breakpoint-up(xl) {
+                padding-bottom: unset;
+            }
+        }
     }
 
     div#app:has(~ div#onetrust-consent-sdk div#onetrust-banner-sdk[style*="display: none"]) {
         padding-bottom: 0;
+
+        div.modal.show {
+            padding-bottom: 0;
+        }
     }
 }