From 92f1c580077d9dc1f0074db06ba816b0a43f44c4 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Fri, 7 Apr 2023 19:03:12 -0400
Subject: [PATCH] WIP Scrolling page.

---
 .../button-question/button-question.vue       |  25 +-
 .../site-header/menu-modal/menu-modal.vue     |   6 +-
 .../policy-holder-details.vue                 | 195 +++---
 src/layouts/vehicle-damage/vehicle-damage.vue | 424 ++++++------
 src/layouts/vehicle-make/vehicle-make.vue     | 142 ++--
 src/layouts/vehicle-model/vehicle-model.vue   | 169 ++---
 src/layouts/vehicle-style/vehicle-style.vue   |  45 +-
 src/layouts/vehicle-year/vehicle-year.vue     | 164 ++---
 src/layouts/welcome-page/welcome-page.vue     | 634 +++++++++---------
 src/styles/common-styles.scss                 |   2 +-
 10 files changed, 943 insertions(+), 863 deletions(-)

diff --git a/src/digital-components/button-question/button-question.vue b/src/digital-components/button-question/button-question.vue
index 63dde223..b2f57269 100644
--- a/src/digital-components/button-question/button-question.vue
+++ b/src/digital-components/button-question/button-question.vue
@@ -4,7 +4,7 @@
         :class="
             isOverflowScrollable ? 'button-question button-question-overflow' : 'button-question'
         ">
-        <div v-if="questionText && answers && answers.length > 0" class="question-text d-flex" 
+        <div v-if="questionText && answers && answers.length > 0" class="question-text d-flex"
             :class="{'small-question-text': isSmallQuestionText,'small-question-label-text':isSmallQuestionLabelText}">
             <span class="fw-bold w-100">{{ questionText }}</span>
         </div>
@@ -13,7 +13,6 @@
             <fieldset
                 class="w-100"
                 :aria-required="isRequired"
-                :class="getFieldSetClasses"
                 :role="isMultiSelect ? 'group' : 'radiogroup'"
                 :aria-labelledby="formatString(groupName)">
                 <legend
@@ -145,7 +144,7 @@ export default {
 
             const SmallQuestionTextClass = this.isSmallQuestionText
                 ? baseClasses + "small-question-text"
-                : baseClasses;            
+                : baseClasses;
 
             const SmallQuestionLabelText = this.isSmallQuestionLabelText
                 ? SmallQuestionTextClass + "small-question-label-text"
@@ -234,16 +233,16 @@ export default {
 </script>
 
 <style lang="scss">
-.button-question-overflow {
-    height: calc(100vh - 274px);
-
-    .overflow-scroll {
-        // Height will be determined by overall height of content above list
-        height: calc(100% - 400px);
-        overflow-x: hidden !important;
-        -webkit-overflow-scrolling: touch;
-    }
-}
+// .button-question-overflow {
+//     height: calc(100vh - 274px);
+//
+//     .overflow-scroll {
+//         // Height will be determined by overall height of content above list
+//         height: calc(100% - 400px);
+//         overflow-x: hidden !important;
+//         -webkit-overflow-scrolling: touch;
+//     }
+// }
 .button-question {
     color: $black;
 
diff --git a/src/iss-components/site-header/menu-modal/menu-modal.vue b/src/iss-components/site-header/menu-modal/menu-modal.vue
index d4a4657b..398bf803 100644
--- a/src/iss-components/site-header/menu-modal/menu-modal.vue
+++ b/src/iss-components/site-header/menu-modal/menu-modal.vue
@@ -7,7 +7,7 @@
         </button>
     </div>
     <!-- Modal -->
-    <div class="modal menu-modal fade" data-bs-backdrop="false" id="footerModal" tabindex="-1" aria-labelledby="footerModalLabel" aria-hidden="true" v-on="{ 'show.bs.modal' : show, 'hide.bs.modal' : hide }" :style="`height: calc(100% - ${currentFooterAndHeaderHeight}px);`">
+    <div class="modal menu-modal fade" data-bs-backdrop="false" id="footerModal" tabindex="-1" aria-labelledby="footerModalLabel" aria-hidden="true" v-on="{ 'show.bs.modal' : show, 'hide.bs.modal' : hide }">
         <div class="menu-modal-container">
             <button
             class="menu-button"
@@ -78,8 +78,8 @@ export default {
         show() {
             this.currentFooterAndHeaderHeight = this.getFooterInfoBoxHeight() + 72;
             this.isActive = true;
-            document.querySelector('.page-container-grouped-styles').scrollTo({
-                top: 0,  behavior: 'smooth'
+            document.querySelector('.fade-on-route-transition,.page-container-grouped-styles').scrollTo({
+                top: 0,  behavior: 'instant'
             });
         },
         hide() {
diff --git a/src/layouts/policy-holder-details/policy-holder-details.vue b/src/layouts/policy-holder-details/policy-holder-details.vue
index 17fea202..43650316 100644
--- a/src/layouts/policy-holder-details/policy-holder-details.vue
+++ b/src/layouts/policy-holder-details/policy-holder-details.vue
@@ -1,13 +1,14 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm"  v-slot="{ meta }" >
-        <div class="page-container-grouped-styles  ">
-            <siteHeader cmsWidgetName="SiteHeaderWidget"/>
-            <div class="fade-on-route-transition px-5 overflow-scroll">
-                <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" id="sub-header"/>
-                <addressQuestions ref="addressQuestions" v-model="customerQuestions.addressQuestions" includeStreetAddress2="true" id="address-questions-wrapper"/>
-                <div class="row mt-4 ">
-                    <div class="col">
-                        <textboxQuestion
+        <div class="page-container-grouped-styles">
+            <div class="fade-on-route-transition position-relative">
+                <siteHeader cmsWidgetName="SiteHeaderWidget"/>
+                <div class="container-fluid">
+                    <div class="row mt-4 px-3">
+                        <div class="col">
+                            <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" id="sub-header"/>
+                            <addressQuestions ref="addressQuestions" v-model="customerQuestions.addressQuestions" includeStreetAddress2="true" id="address-questions-wrapper"/>
+                            <textboxQuestion
                             inputId="firstNameField"
                             cmsWidgetName="PolicyholderFirstNameQuestion"
                             v-model="customerQuestions.firstName"
@@ -15,11 +16,7 @@
                             ref="policyHolderFirstName"
                             disableAutoFill
                             validationRules="first-name-required" />
-                    </div>        
-                </div>
-                <div class="row mt-4 mb-2">
-                    <div class="col">
-                        <textboxQuestion
+                            <textboxQuestion
                             inputId="lastNameField"
                             cmsWidgetName="PolicyholderLastNameQuestion"
                             v-model="customerQuestions.lastName"
@@ -27,15 +24,16 @@
                             ref="policyHolderLastName"
                             disableAutoFill
                             validationRules="last-name-required" />
-                    </div>        
-                </div>
-                <siteFooter
+                        </div>
+                    </div>
+                    <siteFooter
                     cmsWidgetName="SiteFooterWidget"
                     ref="siteFooter"
                     :isForwardActionDisabled="!meta.valid"
                     @ForwardClicked="forwardButtonAction"
                     @back-clicked="backButtonAction"
-                     />
+                    />
+                </div>
             </div>
         </div>
     </Form>
@@ -60,7 +58,7 @@ import { useMainStore } from '@/store';
 //define validation rules
 defineRule("first-name-required", required(errorMessages.POLICYHOLDER_FIRST_NAME_REQUIRED));
 defineRule("last-name-required", required(errorMessages.POLICYHOLDER_LAST_NAME_REQUIRED));
-    
+
 export default {
     name: "policy-holder-details",
     mixins: [BaseFormMixin],
@@ -73,94 +71,101 @@ export default {
         const mainStore = useMainStore();
         return { mainStore };
     },
-    async beforeRouteEnter(to, from, next) 
+    async beforeRouteEnter(to, from, next)
     {
         // Call APIs
         const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
 
         // Settle promises and get results
         const promiseResultMap = [
+            {
+                resultKey: "cmsContent",
+                promise: cmsContentPromise,
+            },];
+
+
+            //use resultMap to populate layout content.
+            let resultMap = await settleAllPromises(promiseResultMap);
+
+            next((vm) => {
+                vm.setCmsContent(resultMap.cmsContent);
+            });
+        },
+        methods:
         {
-            resultKey: "cmsContent",
-            promise: cmsContentPromise,
-        },];
+            backButtonAction() {
+                this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
+            },
 
-                
-        //use resultMap to populate layout content.
-        let resultMap = await settleAllPromises(promiseResultMap);
+            forwardButtonAction()
+            {
+                this.mainStore.updatePolicyHolderDetails(this.customerQuestions);
+                return this.navigateForward();
+            },
 
-        next((vm) => {
-           vm.setCmsContent(resultMap.cmsContent);
-        });
-    },
-    methods:
+            navigateForward() {
+                this.$router.navigate(
+                    this.navigationScenarios.CLICKED_FORWARD_POLICY_HOLDER_DETAILS,
+                    this.$route
+                );
+            },
+            getPolicyHolderDetailsFromStore() {
+                return {
+                    addressQuestions :
+                    {
+                        streetAddress: this.mainStore.order.customer.address.streetAddress,
+                        streetAddress2: this.mainStore.order.customer.address.streetAddress2,
+                        city: this.mainStore.order.customer.address.city,
+                        state: this.mainStore.order.customer.address.state,
+                        zipCode: this.mainStore.order.customer.address.zipCode,
+                    },
+                    firstName : this.mainStore.order.customer.firstName,
+                    lastName : this.mainStore.order.customer.lastName,
+                }
+            },
+        },
+        components: {
+            siteHeader,
+            siteSubHeader,
+            textboxQuestion,
+            addressQuestions,
+            siteFooter,
+            Form,
+        },
+    }
+    </script>
+    <style lang="scss">
+    .fade-on-route-transition {
+        height: calc(100% - 120px);
+        overflow: scroll;
+        overflow-x: hidden;
+    }
+
+    .modal-open {
+        .fade-on-route-transition {
+            overflow: hidden;
+        }
+    }
+    .alert.alert-warning
     {
-        backButtonAction() {
-            this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
-        },
-        
-        forwardButtonAction()
-        {
-            this.mainStore.updatePolicyHolderDetails(this.customerQuestions);
-            return this.navigateForward();
-        },
+        margin-top: 20px;
+    }
 
-        navigateForward() {            
-            this.$router.navigate(
-                this.navigationScenarios.CLICKED_FORWARD_POLICY_HOLDER_DETAILS,
-                this.$route
-            );
-        },
-        getPolicyHolderDetailsFromStore() {
-            return {
-                addressQuestions :
-                {
-                    streetAddress: this.mainStore.order.customer.address.streetAddress,
-                    streetAddress2: this.mainStore.order.customer.address.streetAddress2,
-                    city: this.mainStore.order.customer.address.city,
-                    state: this.mainStore.order.customer.address.state,
-                    zipCode: this.mainStore.order.customer.address.zipCode,
-                },
-                firstName : this.mainStore.order.customer.firstName,
-                lastName : this.mainStore.order.customer.lastName,
-            }
-        },
-    },
-    components: {
-        siteHeader,
-        siteSubHeader,
-        textboxQuestion,
-        addressQuestions,
-        siteFooter,
-        Form,
-    },
-}
-</script>
-<style lang="scss">
-.overflow-scroll {    
-    height: calc(100% - 168px);   
-    overflow-X: hidden !important;   
-}
-.alert.alert-warning
-{
-    margin-top: 20px;
-}
+    #sub-header p {
+        font-size: 16px;
+        line-height: 26px;
+        color: #4D5151;
+    }
 
-#sub-header p {
-    font-size: 16px;
-    line-height: 26px;
-    color: #4D5151;
-}
+    #address-questions-wrapper {
+        margin-top: 24px;
+    }
 
-#address-questions-wrapper {
-    margin-top: 24px;
-}
+    #address-questions-wrapper .alert.heading  {
+        line-height: 24px;
+    }
 
-#address-questions-wrapper .alert.heading  {
-    line-height: 24px;
-}
-
-#address-questions-wrapper .form-test-error {
-    line-height: 24px;
-}
-</style>
\ No newline at end of file
+    #address-questions-wrapper .form-test-error {
+        line-height: 24px;
+    }
+    </style>
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index 41160435..717f3369 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -1,58 +1,64 @@
 <template>
-    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
-        <div class="page-container-grouped-styles vehicle-damage">
-            <siteHeader cmsWidgetName="SiteHeaderWidget" />
-            <div class="fade-on-route-transition sub-container overflow-scroll px-5">
-                <alert
-                    ref="vehicleChangeAlert"
-                    v-if="shouldDisplayVehicleChangeAlert"
-                    class="mt-5 mb-0"
-                    cmsWidgetName="VehicleChangeAlert"
-                    alertClass="alert-warning"
-                    :isDismissible="false" />
-                <vehicleBanner
-                    class="mb-3"
-                    cmsWidgetName="VehicleBannerWidget"
-                    :displayGenericVehicleImage="false" />
-                <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
-                <damageLocationQuestion
-                    ref="damageLocation"
-                    cmsWidgetName="DamageLocationQuestion"
-                    v-model="selectedDamageLocations"
-                    groupName="DamageLocationQuestion" />
-                <windshieldOptions
-                    ref="windshieldOptions"
-                    v-model="selectedWindshieldOptions"
-                    :hasRepairReplaceConflict="hasRepairReplaceConflict"
-                    :hasSplitSingleConflict="hasSplitSingleConflict"
-                    :selectedDamageLocations="selectedDamageLocations" />
-                <alert
-                    v-if="hasRepairReplaceConflict"
-                    class="my-5"
-                    cmsWidgetName="HasReplacementConflict"
-                    alertClass="alert-danger"
-                    :isDismissible="false" />
-                <sideDoorOptions
-                    ref="sideDoorOptions"
-                    cmsWidgetName="SideDoorSideQuestion"
-                    groupName="SideDoorSideQuestion"
-                    v-model="sideDoorOptionsData"
-                    v-show="!hasRepairReplaceConflict"
-                    :selectedDamageLocations="selectedDamageLocations" />
-                <replaceOptionsQuestion
-                    ref="backGlassOptions"
-                    cmsWidgetName="RearReplaceOptionsQuestion"
-                    :isAvailable="isRearWindowDamageLocation && !hasRepairReplaceConflict"
-                    v-model="selectedRearReplaceOptions"
-                    groupName="BackGlassReplaceOptionsQuestion"
-                    validationRules="replace-options-required" />
-                <site-footer
-                    cmsWidgetName="SiteFooterWidget"
-                    :isForwardActionDisabled="!meta.valid"
-                    @backClicked="backButtonAction"
-                    @forwardClicked="forwardButtonAction"
-                    ref="siteFooter"
-                />
+    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm"  v-slot="{ meta }" >
+        <div class="page-container-grouped-styles">
+            <div class="fade-on-route-transition position-relative">
+                <siteHeader cmsWidgetName="SiteHeaderWidget"/>
+                <div class="container-fluid">
+                    <div class="row mt-4 px-3">
+                        <div class="col">
+                            <alert
+                            ref="vehicleChangeAlert"
+                            v-if="shouldDisplayVehicleChangeAlert"
+                            class="mt-5 mb-0"
+                            cmsWidgetName="VehicleChangeAlert"
+                            alertClass="alert-warning"
+                            :isDismissible="false" />
+                            <vehicleBanner
+                            class="mb-3"
+                            cmsWidgetName="VehicleBannerWidget"
+                            :displayGenericVehicleImage="false" />
+                            <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
+                            <damageLocationQuestion
+                            ref="damageLocation"
+                            cmsWidgetName="DamageLocationQuestion"
+                            v-model="selectedDamageLocations"
+                            groupName="DamageLocationQuestion" />
+                            <windshieldOptions
+                            ref="windshieldOptions"
+                            v-model="selectedWindshieldOptions"
+                            :hasRepairReplaceConflict="hasRepairReplaceConflict"
+                            :hasSplitSingleConflict="hasSplitSingleConflict"
+                            :selectedDamageLocations="selectedDamageLocations" />
+                            <alert
+                            v-if="hasRepairReplaceConflict"
+                            class="my-5"
+                            cmsWidgetName="HasReplacementConflict"
+                            alertClass="alert-danger"
+                            :isDismissible="false" />
+                            <sideDoorOptions
+                            ref="sideDoorOptions"
+                            cmsWidgetName="SideDoorSideQuestion"
+                            groupName="SideDoorSideQuestion"
+                            v-model="sideDoorOptionsData"
+                            v-show="!hasRepairReplaceConflict"
+                            :selectedDamageLocations="selectedDamageLocations" />
+                            <replaceOptionsQuestion
+                            ref="backGlassOptions"
+                            cmsWidgetName="RearReplaceOptionsQuestion"
+                            :isAvailable="isRearWindowDamageLocation && !hasRepairReplaceConflict"
+                            v-model="selectedRearReplaceOptions"
+                            groupName="BackGlassReplaceOptionsQuestion"
+                            validationRules="replace-options-required" />
+                            <site-footer
+                            cmsWidgetName="SiteFooterWidget"
+                            :isForwardActionDisabled="!meta.valid"
+                            @backClicked="backButtonAction"
+                            @forwardClicked="forwardButtonAction"
+                            ref="siteFooter"
+                            />
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>
     </Form>
@@ -207,7 +213,7 @@ export default {
                     })
                 ) {
                     windShieldOptions.selectedWindshieldDamageType =
-                        damageLocationsSelected.REPLACE;
+                    damageLocationsSelected.REPLACE;
                     windShieldOptions.selectedWindshieldReplaceOptions.push(
                         damageLocationsSelected.SINGLE
                     );
@@ -222,7 +228,7 @@ export default {
                     })
                 ) {
                     windShieldOptions.selectedWindshieldDamageType =
-                        damageLocationsSelected.REPLACE;
+                    damageLocationsSelected.REPLACE;
                     windShieldOptions.selectedWindshieldReplaceOptions.push(
                         damageLocationsSelected.DRIVER
                     );
@@ -237,7 +243,7 @@ export default {
                     })
                 ) {
                     windShieldOptions.selectedWindshieldDamageType =
-                        damageLocationsSelected.REPLACE;
+                    damageLocationsSelected.REPLACE;
                     windShieldOptions.selectedWindshieldReplaceOptions.push(
                         damageLocationsSelected.PASSENGER
                     );
@@ -302,147 +308,147 @@ export default {
 
         async forwardButtonAction() {
             await this.mainStore.saveVehicleDamage(this.isWindshieldRepair,
-                    this.selectedGlassToReplace(),
-                    this.selectedWindshieldOptions.selectedWindshieldChipCount);
-            return this.navigateForward();
-        },
+                this.selectedGlassToReplace(),
+                this.selectedWindshieldOptions.selectedWindshieldChipCount);
+                return this.navigateForward();
+            },
 
-        navigateForward() {
-            if (this.mainStore.damage.isRepair) {
-                this.$router.navigate(
-                    this.navigationScenarios.CLICKED_FORWARD_WITH_REPAIR,
-                    this.$route
-                );
-            }
-            else {
-                // If vin already exists, navigate directly to vin-lookup
-                if (this.mainStore.order.vehicle.vin) {
+            navigateForward() {
+                if (this.mainStore.damage.isRepair) {
                     this.$router.navigate(
-                        this.navigationScenarios.CLICKED_FORWARD_WITH_VIN,
-                        this.$route
-                    );
-                } else {
-                    this.$router.navigate(
-                        this.navigationScenarios.CLICKED_FORWARD_WITHOUT_VIN,
+                        this.navigationScenarios.CLICKED_FORWARD_WITH_REPAIR,
                         this.$route
                     );
                 }
-            }
-        },
-
-        selectedGlassToReplace() {
-            const selectedGlassToReplace = [];
-            if (this.isWindshieldDamageLocation && !this.isWindshieldRepair) {
-                this.selectedWindshieldOptions.selectedWindshieldReplaceOptions.forEach(
-                    (wsItem) => {
-                        selectedGlassToReplace.push({
-                            glassLocation: damageLocationsSelected.WINDSHIELD,
-                            glassName: wsItem,
-                        });
+                else {
+                    // If vin already exists, navigate directly to vin-lookup
+                    if (this.mainStore.order.vehicle.vin) {
+                        this.$router.navigate(
+                            this.navigationScenarios.CLICKED_FORWARD_WITH_VIN,
+                            this.$route
+                        );
+                    } else {
+                        this.$router.navigate(
+                            this.navigationScenarios.CLICKED_FORWARD_WITHOUT_VIN,
+                            this.$route
+                        );
                     }
-                );
-            }
+                }
+            },
 
-            if (this.isDriverSideReplace) {
-                this.sideDoorOptionsData.selectedDriverSideReplaceOptions.forEach((driverItem) => {
-                    selectedGlassToReplace.push({
-                        glassLocation: damageLocationsSelected.DRIVER,
-                        glassName: driverItem,
+            selectedGlassToReplace() {
+                const selectedGlassToReplace = [];
+                if (this.isWindshieldDamageLocation && !this.isWindshieldRepair) {
+                    this.selectedWindshieldOptions.selectedWindshieldReplaceOptions.forEach(
+                        (wsItem) => {
+                            selectedGlassToReplace.push({
+                                glassLocation: damageLocationsSelected.WINDSHIELD,
+                                glassName: wsItem,
+                            });
+                        }
+                    );
+                }
+
+                if (this.isDriverSideReplace) {
+                    this.sideDoorOptionsData.selectedDriverSideReplaceOptions.forEach((driverItem) => {
+                        selectedGlassToReplace.push({
+                            glassLocation: damageLocationsSelected.DRIVER,
+                            glassName: driverItem,
+                        });
                     });
+                }
+
+                if (this.isPassengerSideReplace) {
+                    this.sideDoorOptionsData.selectedPassengerSideReplaceOptions.forEach(
+                        (passengerItem) => {
+                            selectedGlassToReplace.push({
+                                glassLocation: damageLocationsSelected.PASSENGER,
+                                glassName: passengerItem,
+                            });
+                        }
+                    );
+                }
+
+                if (this.isRearWindowDamageLocation) {
+                    selectedGlassToReplace.push({
+                        glassLocation: damageLocationsSelected.REAR,
+                        glassName: this.selectedRearReplaceOptions,
+                    });
+                }
+
+                return selectedGlassToReplace;
+            },
+        },
+        computed: {
+            isWindshieldDamageLocation() {
+                return this.selectedDamageLocations.some((selectedDamages) => {
+                    return selectedDamages.toUpperCase() === damageLocationsCms.WINDSHIELD;
                 });
-            }
-
-            if (this.isPassengerSideReplace) {
-                this.sideDoorOptionsData.selectedPassengerSideReplaceOptions.forEach(
-                    (passengerItem) => {
-                        selectedGlassToReplace.push({
-                            glassLocation: damageLocationsSelected.PASSENGER,
-                            glassName: passengerItem,
-                        });
-                    }
-                );
-            }
-
-            if (this.isRearWindowDamageLocation) {
-                selectedGlassToReplace.push({
-                    glassLocation: damageLocationsSelected.REAR,
-                    glassName: this.selectedRearReplaceOptions,
+            },
+            isSideDoorDamageLocation() {
+                return this.selectedDamageLocations.some((selectedDamages) => {
+                    return selectedDamages.toUpperCase() === damageLocationsCms.SIDEDOOR;
                 });
-            }
-
-            return selectedGlassToReplace;
-        },
-    },
-    computed: {
-        isWindshieldDamageLocation() {
-            return this.selectedDamageLocations.some((selectedDamages) => {
-                return selectedDamages.toUpperCase() === damageLocationsCms.WINDSHIELD;
-            });
-        },
-        isSideDoorDamageLocation() {
-            return this.selectedDamageLocations.some((selectedDamages) => {
-                return selectedDamages.toUpperCase() === damageLocationsCms.SIDEDOOR;
-            });
-        },
-        isRearWindowDamageLocation() {
-            return this.selectedDamageLocations.some((selectedDamages) => {
-                return selectedDamages.toUpperCase() === damageLocationsCms.REARWINDOW;
-            });
-        },
-        isWindshieldRepair() {
-            return (
-                this.isWindshieldDamageLocation &&
-                this.selectedWindshieldOptions.selectedWindshieldDamageType ===
+            },
+            isRearWindowDamageLocation() {
+                return this.selectedDamageLocations.some((selectedDamages) => {
+                    return selectedDamages.toUpperCase() === damageLocationsCms.REARWINDOW;
+                });
+            },
+            isWindshieldRepair() {
+                return (
+                    this.isWindshieldDamageLocation &&
+                    this.selectedWindshieldOptions.selectedWindshieldDamageType ===
                     damageLocationsSelected.REPAIR
-            );
-        },
-        isDriverSideReplace() {
-            if (!this.isSideDoorDamageLocation) return false;
+                );
+            },
+            isDriverSideReplace() {
+                if (!this.isSideDoorDamageLocation) return false;
 
-            return this.sideDoorOptionsData.selectedDoorSides.some((selectedDriverSide) => {
-                return selectedDriverSide.toUpperCase() === damageLocationsCms.DRIVERSIDE;
-            });
-        },
-        isPassengerSideReplace() {
-            if (!this.isSideDoorDamageLocation) return false;
+                return this.sideDoorOptionsData.selectedDoorSides.some((selectedDriverSide) => {
+                    return selectedDriverSide.toUpperCase() === damageLocationsCms.DRIVERSIDE;
+                });
+            },
+            isPassengerSideReplace() {
+                if (!this.isSideDoorDamageLocation) return false;
 
-            return this.sideDoorOptionsData.selectedDoorSides.some((selectedPassengerSide) => {
-                return selectedPassengerSide.toUpperCase() === damageLocationsCms.PASSENGERSIDE;
-            });
-        },
-        hasRepairReplaceConflict() {
-            return (
-                this.isWindshieldDamageLocation &&
-                this.selectedDamageLocations.length > 1 &&
-                this.isWindshieldRepair
-            );
-        },
-        hasSplitSingleConflict() {
-            if (
-                !this.selectedDamageLocations?.includes("Windshield") ||
-                this.selectedWindshieldOptions.selectedWindshieldDamageType ===
+                return this.sideDoorOptionsData.selectedDoorSides.some((selectedPassengerSide) => {
+                    return selectedPassengerSide.toUpperCase() === damageLocationsCms.PASSENGERSIDE;
+                });
+            },
+            hasRepairReplaceConflict() {
+                return (
+                    this.isWindshieldDamageLocation &&
+                    this.selectedDamageLocations.length > 1 &&
+                    this.isWindshieldRepair
+                );
+            },
+            hasSplitSingleConflict() {
+                if (
+                    !this.selectedDamageLocations?.includes("Windshield") ||
+                    this.selectedWindshieldOptions.selectedWindshieldDamageType ===
                     damageLocationsSelected.REPAIR ||
-                !this.selectedWindshieldOptions.selectedWindshieldReplaceOptions
-            )
+                    !this.selectedWindshieldOptions.selectedWindshieldReplaceOptions
+                )
                 return false;
 
-            return (
-                this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some(
-                    (selectedSingleWindshield) => {
-                        return (
-                            selectedSingleWindshield.toUpperCase() ===
-                            damageLocationsSelected.SINGLE.toUpperCase()
-                        );
-                    }
-                ) &&
-                (this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some(
-                    (selectedDriverWindshield) => {
-                        return (
-                            selectedDriverWindshield.toUpperCase() ===
-                            damageLocationsSelected.DRIVER.toUpperCase()
-                        );
-                    }
-                ) ||
+                return (
+                    this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some(
+                        (selectedSingleWindshield) => {
+                            return (
+                                selectedSingleWindshield.toUpperCase() ===
+                                damageLocationsSelected.SINGLE.toUpperCase()
+                            );
+                        }
+                    ) &&
+                    (this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some(
+                        (selectedDriverWindshield) => {
+                            return (
+                                selectedDriverWindshield.toUpperCase() ===
+                                damageLocationsSelected.DRIVER.toUpperCase()
+                            );
+                        }
+                    ) ||
                     this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some(
                         (selectedPassengerWindshield) => {
                             return (
@@ -451,31 +457,39 @@ export default {
                             );
                         }
                     ))
-            );
+                );
+            },
+            shouldDisplayVehicleChangeAlert() {
+                return this.$route.params[this.routerParams.DISPLAY_VEHICLE_CHANGE_ALERT];
+            }
         },
-        shouldDisplayVehicleChangeAlert() {
-            return this.$route.params[this.routerParams.DISPLAY_VEHICLE_CHANGE_ALERT];
-        }
-    },
 
-    components: {
-        siteHeader,
-        siteFooter,
-        vehicleBanner,
-        siteSubHeader,
-        sideDoorOptions,
-        damageLocationQuestion,
-        windshieldOptions,
-        replaceOptionsQuestion,
-        Form,
-        alert,
-    },
-};
-</script>
-<style lang="scss">
+        components: {
+            siteHeader,
+            siteFooter,
+            vehicleBanner,
+            siteSubHeader,
+            sideDoorOptions,
+            damageLocationQuestion,
+            windshieldOptions,
+            replaceOptionsQuestion,
+            Form,
+            alert,
+        },
+    };
+    </script>
+<style lang="scss" scoped>
+.fade-on-route-transition {
+    margin-bottom: 100px;
+}
+.page-container-grouped-styles {
+    //height: calc(100% - 80px);
+    overflow: auto;
+}
 
-.overflow-scroll {
-    height: calc(100% - 180px);
-    overflow-X: hidden !important;
+.modal-open {
+    .page-container-grouped-styles {
+        overflow: hidden;
+    }
 }
 </style>
diff --git a/src/layouts/vehicle-make/vehicle-make.vue b/src/layouts/vehicle-make/vehicle-make.vue
index 2b91a3a7..519ae1fd 100644
--- a/src/layouts/vehicle-make/vehicle-make.vue
+++ b/src/layouts/vehicle-make/vehicle-make.vue
@@ -1,51 +1,45 @@
 <template>
-    <div class="page-container-grouped-styles">
-      <siteHeader cmsWidgetName="SiteHeaderWidget" />
-      <div class="select-car">
-        <div class="select-car-form rounded text-center">
-          <vehicleBanner class="mb-3" cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="true"/>
-          <siteSubHeader
-            cmsWidgetName="SiteSubHeaderWidget"
-            :hasBackButton="true"
-            @click-event="backButtonAction"
-          />
-          <div class="fade-on-route-transition">
-            <makeQuestion
-              class="fade-on-route-transition"
-              v-model="selectedMake"
-              ref="makeQuestion"
-              cmsWidgetName="VehicleMakeQuestion"
-            />
-          </div>
-          <siteFooter cmsWidgetName="SiteFooterWidget" ref="siteFooter"
-            @back-clicked="backButtonAction" :isForwardButtonHidden="shouldHideForwardButton" />
+    <div class="page-container-grouped-styles position-relative">
+        <siteHeader cmsWidgetName="SiteHeaderWidget" />
+        <div class="select-car">
+            <div class="container-fluid">
+                <div class="row">
+                    <div class="col">
+                        <div class="select-car-form rounded text-center">
+                            <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="true" class="mb-3" />
+                            <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" :hasBackButton="true" @click-event="backButtonAction" />
+                            <makeQuestion class="px-4" v-model="selectedMake" ref="makeQuestion" cmsWidgetName="VehicleMakeQuestion" />
+                            <siteFooter cmsWidgetName="SiteFooterWidget" ref="siteFooter" @back-clicked="backButtonAction" :isForwardButtonHidden="shouldHideForwardButton" />
+                        </div>
+                    </div>
+                </div>
+            </div>
         </div>
-      </div>
     </div>
 </template>
 
 <script>
-      // Components
-    import makeQuestion from "@/layouts/vehicle-make/make-question/make-question";
-    import siteHeader from "@/iss-components/site-header/site-header";
-    import siteSubHeader from "@/iss-components/site-sub-header/site-sub-header";
-    import vehicleBanner from "@/iss-components/vehicle-banner/vehicle-banner";
-    import siteFooter from "@/iss-components/site-footer/site-footer";
+// Components
+import makeQuestion from "@/layouts/vehicle-make/make-question/make-question";
+import siteHeader from "@/iss-components/site-header/site-header";
+import siteSubHeader from "@/iss-components/site-sub-header/site-sub-header";
+import vehicleBanner from "@/iss-components/vehicle-banner/vehicle-banner";
+import siteFooter from "@/iss-components/site-footer/site-footer";
 
-      // Supporting files
-    import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
-    import { settleAllPromises } from "@/helpers/layout-helper";
+// Supporting files
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
 
-    export default {
-        name: 'vehicle-make',
-        data() {
-            return {
-                selectedMake: null,
-                shouldHideForwardButton: true
-            };
-        },
+export default {
+    name: 'vehicle-make',
+    data() {
+        return {
+            selectedMake: null,
+            shouldHideForwardButton: true
+        };
+    },
 
-        async beforeRouteEnter(to, from, next) {
+    async beforeRouteEnter(to, from, next) {
         // Call APIs
         const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
         const makeQuestionInitialDataPromise = makeQuestion.methods.loadInitialData();
@@ -53,12 +47,12 @@
         // Settle promises and get results
         const promiseResultMap = [
             {
-            resultKey: "cmsContent",
-            promise: cmsContentPromise,
+                resultKey: "cmsContent",
+                promise: cmsContentPromise,
             },
             {
-            resultKey: "makeQuestionInitialData",
-            promise: makeQuestionInitialDataPromise,
+                resultKey: "makeQuestionInitialData",
+                promise: makeQuestionInitialDataPromise,
             },
         ];
 
@@ -71,36 +65,52 @@
                 resultMap.makeQuestionInitialData
             );
         });
-        },
-        methods: {
-          backButtonAction() {
+    },
+    methods: {
+        backButtonAction() {
             this.$router.navigate(
-              this.navigationScenarios.CLICKED_BACK,
-              this.$route
+                this.navigationScenarios.CLICKED_BACK,
+                this.$route
             );
-          },
-          arePagePrerequisitesValid() {
+        },
+        arePagePrerequisitesValid() {
             if (this.mainStore.order.vehicle.year){
-              return true;
+                return true;
             }
             return false;
-          },
         },
-        components: {
-            makeQuestion,
-            siteHeader,
-            siteSubHeader,
-            vehicleBanner,
-            siteFooter
-        },
-        watch: {
-          selectedMake(make) {
+    },
+    components: {
+        makeQuestion,
+        siteHeader,
+        siteSubHeader,
+        vehicleBanner,
+        siteFooter
+    },
+    watch: {
+        selectedMake(make) {
             this.mainStore.updateVehicleMake( make );
             this.$router.navigate(
-              this.navigationScenarios.SELECTED_MAKE,
-              this.$route
+                this.navigationScenarios.SELECTED_MAKE,
+                this.$route
             );
-          },
-        }
-    };
+        },
+    }
+};
 </script>
+
+<style lang="scss" scoped>
+.fade-on-route-transition {
+    margin-bottom: 80px;
+}
+.page-container-grouped-styles {
+    //height: calc(100% - 80px);
+    overflow: auto;
+}
+
+.modal-open {
+    .page-container-grouped-styles {
+        overflow: hidden;
+    }
+}
+</style>
diff --git a/src/layouts/vehicle-model/vehicle-model.vue b/src/layouts/vehicle-model/vehicle-model.vue
index cf34cbbd..3c65af26 100644
--- a/src/layouts/vehicle-model/vehicle-model.vue
+++ b/src/layouts/vehicle-model/vehicle-model.vue
@@ -1,80 +1,78 @@
 <template>
-    <div class="page-container-grouped-styles">
-      <siteHeader cmsWidgetName="SiteHeaderWidget" />
-      <div class="select-car">
-        <div class="select-car-form rounded text-center">
-          <vehicleBanner class="mb-3" cmsWidgetName="VehicleBannerWidget" displayGenericVehicleImage />
-          <siteSubHeader
-            cmsWidgetName="SiteSubHeaderWidget"
-            :hasBackButton="true"
-            :backButtonAccessibleText="backButtonAccessibleText"
-            @click-event="backButtonAction"
-          />
-          <div class="fade-on-route-transition">
-            <modelQuestion v-model="selectedModel" ref="modelQuestion" cmsWidgetName="VehicleModelQuestion" />
-          </div>
-          <siteFooter cmsWidgetName="SiteFooterWidget" ref="siteFooter"
-            @back-clicked="backButtonAction" :isForwardButtonHidden="shouldHideForwardButton" />
+    <div class="page-container-grouped-styles position-relative">
+        <siteHeader cmsWidgetName="SiteHeaderWidget" />
+        <div class="select-car">
+            <div class="container-fluid">
+                <div class="row">
+                    <div class="col">
+                        <div class="select-car-form rounded text-center">
+                            <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="true" class="mb-3" />
+                            <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" :hasBackButton="true" :backButtonAccessibleText="backButtonAccessibleText" @click-event="backButtonAction" />
+                            <modelQuestion v-model="selectedModel" ref="modelQuestion" cmsWidgetName="VehicleModelQuestion" class="px-4" />
+                            <siteFooter cmsWidgetName="SiteFooterWidget" ref="siteFooter" @back-clicked="backButtonAction" :isForwardButtonHidden="shouldHideForwardButton" />
+                        </div>
+                    </div>
+                </div>
+            </div>
         </div>
-      </div>
     </div>
-  </template>
+</template>
 
-  <script>
-  // Components
-  import modelQuestion from "@/layouts/vehicle-model/model-question/model-question";
-  import siteHeader from "@/iss-components/site-header/site-header";
-  import siteSubHeader from "@/iss-components/site-sub-header/site-sub-header";
-  import vehicleBanner from "@/iss-components/vehicle-banner/vehicle-banner";
-  import siteFooter from "@/iss-components/site-footer/site-footer";
+<script>
+// Components
+import modelQuestion from "@/layouts/vehicle-model/model-question/model-question";
+import siteHeader from "@/iss-components/site-header/site-header";
+import siteSubHeader from "@/iss-components/site-sub-header/site-sub-header";
+import vehicleBanner from "@/iss-components/vehicle-banner/vehicle-banner";
+import siteFooter from "@/iss-components/site-footer/site-footer";
 
-  // Supporting files
-  import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
-  import { settleAllPromises } from "@/helpers/layout-helper";
+// Supporting files
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
 
-  export default {
+export default {
     name: "vehicle-model",
     data() {
-      return {
-        selectedModel: null,
-        shouldHideForwardButton: true
-      };
+        return {
+            selectedModel: null,
+            shouldHideForwardButton: true
+        };
     },
     async beforeRouteEnter(to, from, next) {
-      // Call APIs
-      const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
-      const modelQuestionInitialDataPromise =
+        // Call APIs
+        const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
+        const modelQuestionInitialDataPromise =
         modelQuestion.methods.loadInitialData();
 
-      // Settle promises and get results
-      const promiseResultMap = [
-        {
-          resultKey: "cmsContent",
-          promise: cmsContentPromise,
-        },
-        {
-          resultKey: "modelQuestionInitialData",
-          promise: modelQuestionInitialDataPromise,
-        },
-      ];
+        // Settle promises and get results
+        const promiseResultMap = [
+            {
+                resultKey: "cmsContent",
+                promise: cmsContentPromise,
+            },
+            {
+                resultKey: "modelQuestionInitialData",
+                promise: modelQuestionInitialDataPromise,
+            },
+        ];
 
-      const resultMap = await settleAllPromises(promiseResultMap);
+        const resultMap = await settleAllPromises(promiseResultMap);
 
-      // Call the "next" function to complete the transition to this page.
-      next((vm) => {
-        vm.setCmsContent(resultMap.cmsContent);
-        vm.$refs.modelQuestion.initializeComponent(
-          resultMap.modelQuestionInitialData
-        );
-      });
+        // Call the "next" function to complete the transition to this page.
+        next((vm) => {
+            vm.setCmsContent(resultMap.cmsContent);
+            vm.$refs.modelQuestion.initializeComponent(
+                resultMap.modelQuestionInitialData
+            );
+        });
     },
 
     methods: {
         backButtonAction() {
-        // route to move backwards
+            // route to move backwards
             this.$router.navigate(
-            this.navigationScenarios.CLICKED_BACK,
-            this.$route
+                this.navigationScenarios.CLICKED_BACK,
+                this.$route
             );
         },
         arePagePrerequisitesValid()
@@ -86,26 +84,45 @@
         },
     },
     computed: {
-      backButtonAccessibleText()
-      {
-        return this.getCmsContent(this.cmsWidgetName, "BackButtonAccessibleText")
-      }
+        backButtonAccessibleText()
+        {
+            return this.getCmsContent(this.cmsWidgetName, "BackButtonAccessibleText")
+        }
     },
     watch: {
-      selectedModel(model) {
-        this.mainStore.updateVehicleModel( model );
-        this.$router.navigate(
-          this.navigationScenarios.SELECTED_MODEL,
-          this.$route
-        );
-      },
+        selectedModel(model) {
+            this.mainStore.updateVehicleModel( model );
+            this.$router.navigate(
+                this.navigationScenarios.SELECTED_MODEL,
+                this.$route
+            );
+        },
     },
     components: {
-      modelQuestion,
-      siteHeader,
-      siteSubHeader,
-      vehicleBanner,
-      siteFooter
+        modelQuestion,
+        siteHeader,
+        siteSubHeader,
+        vehicleBanner,
+        siteFooter
     },
-  };
-  </script>
+};
+</script>
+
+<style lang="scss" scoped>
+.container-fluid {
+    margin-bottom: 80px;
+}
+.fade-on-route-transition {
+    margin-bottom: 80px;
+}
+.page-container-grouped-styles {
+    //height: calc(100% - 80px);
+    overflow: auto;
+}
+
+.modal-open {
+    .page-container-grouped-styles {
+        overflow: hidden;
+    }
+}
+</style>
diff --git a/src/layouts/vehicle-style/vehicle-style.vue b/src/layouts/vehicle-style/vehicle-style.vue
index 893de9d0..35baf525 100644
--- a/src/layouts/vehicle-style/vehicle-style.vue
+++ b/src/layouts/vehicle-style/vehicle-style.vue
@@ -1,22 +1,18 @@
 <template>
-    <div class="page-container-grouped-styles">
+    <div class="page-container-grouped-styles position-relative">
         <siteHeader cmsWidgetName="SiteHeaderWidget" />
         <div class="select-car">
-            <div class="select-car-form rounded text-center">
-                <vehicleBanner cmsWidgetName="VehicleBannerWidget" class="mb-3" displayGenericVehicleImage />
-                <siteSubHeader
-                    cmsWidgetName="SiteSubHeaderWidget"
-                    :hasBackButton="true"
-                    :backButtonAccessibleText="backButtonAccessibleText"
-                    @click-event="backButtonAction" />
-                <div class="fade-on-route-transition">
-                    <styleQuestion
-                        v-model="selectedStyle"
-                        ref="styleQuestion"
-                        cmsWidgetName="VehicleStyleQuestion" />
+            <div class="container-fluid">
+                <div class="row">
+                    <div class="col">
+                        <div class="select-car-form rounded text-center">
+                            <vehicleBanner cmsWidgetName="VehicleBannerWidget" class="mb-3" displayGenericVehicleImage />
+                            <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" :hasBackButton="true" :backButtonAccessibleText="backButtonAccessibleText" @click-event="backButtonAction" />
+                            <styleQuestion v-model="selectedStyle" ref="styleQuestion" cmsWidgetName="VehicleStyleQuestion" class="px-4" />
+                            <siteFooter cmsWidgetName="SiteFooterWidget" ref="siteFooter" @back-clicked="backButtonAction" :isForwardButtonHidden="shouldHideForwardButton" />
+                        </div>
+                    </div>
                 </div>
-                <siteFooter cmsWidgetName="SiteFooterWidget" ref="siteFooter"
-                    @back-clicked="backButtonAction" :isForwardButtonHidden="shouldHideForwardButton" />
             </div>
         </div>
     </div>
@@ -124,3 +120,22 @@ export default {
     }
 };
 </script>
+
+<style lang="scss" scoped>
+.container-fluid {
+    margin-bottom: 80px;
+}
+.fade-on-route-transition {
+    margin-bottom: 80px;
+}
+.page-container-grouped-styles {
+    //height: calc(100% - 80px);
+    overflow: auto;
+}
+
+.modal-open {
+    .page-container-grouped-styles {
+        overflow: hidden;
+    }
+}
+</style>
diff --git a/src/layouts/vehicle-year/vehicle-year.vue b/src/layouts/vehicle-year/vehicle-year.vue
index 10ea7b52..d83d8911 100644
--- a/src/layouts/vehicle-year/vehicle-year.vue
+++ b/src/layouts/vehicle-year/vehicle-year.vue
@@ -1,101 +1,115 @@
 <template>
-    <div class="page-container-grouped-styles">
-      <siteHeader cmsWidgetName="SiteHeaderWidget" />
-      <div class="select-car">
-        <div class="select-car-form rounded text-center">
-          <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="true" class="mb-3" />
-          <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
-          <div class="fade-on-route-transition">
-            <yearQuestion
-              class="fade-on-route-transition"
-              v-model="selectedYear"
-              ref="yearQuestion"
-              cmsWidgetName="VehicleYearQuestion"
-            />
-          </div>
-          <siteFooter cmsWidgetName="SiteFooterWidget" ref="siteFooter"
-            @back-clicked="backButtonAction" :isForwardButtonHidden="shouldHideForwardButton" />
+    <div class="page-container-grouped-styles position-relative">
+        <siteHeader cmsWidgetName="SiteHeaderWidget" />
+        <div class="select-car">
+            <div class="container-fluid">
+                <div class="row">
+                    <div class="col">
+                        <div class="select-car-form rounded text-center">
+                            <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="true" class="mb-3" />
+                            <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
+                            <yearQuestion class="px-4" v-model="selectedYear" ref="yearQuestion" cmsWidgetName="VehicleYearQuestion" />
+                            <siteFooter cmsWidgetName="SiteFooterWidget" ref="siteFooter" @back-clicked="backButtonAction" :isForwardButtonHidden="shouldHideForwardButton" />
+                        </div>
+                    </div>
+                </div>
+            </div>
         </div>
-      </div>
     </div>
-  </template>
+</template>
 
-  <script>
-  // Components
-  import yearQuestion from "@/layouts/vehicle-year/year-question/year-question";
-  import siteHeader from "@/iss-components/site-header/site-header";
-  import siteFooter from "@/iss-components/site-footer/site-footer";
-  import siteSubHeader from "@/iss-components/site-sub-header/site-sub-header";
-  import vehicleBanner from "@/iss-components/vehicle-banner/vehicle-banner";
+<script>
+// Components
+import yearQuestion from "@/layouts/vehicle-year/year-question/year-question";
+import siteHeader from "@/iss-components/site-header/site-header";
+import siteFooter from "@/iss-components/site-footer/site-footer";
+import siteSubHeader from "@/iss-components/site-sub-header/site-sub-header";
+import vehicleBanner from "@/iss-components/vehicle-banner/vehicle-banner";
 
-  // Supporting files
-  import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
-  import { settleAllPromises } from "@/helpers/layout-helper";
+// Supporting files
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
 
-  export default {
+export default {
     name: "vehicle-year",
     data() {
-      return {
-        selectedYear: null,
-        shouldHideForwardButton: true
-      };
+        return {
+            selectedYear: null,
+            shouldHideForwardButton: true
+        };
     },
     computed: {},
 
     async beforeRouteEnter(to, from, next) {
-      // Call APIs
-      const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
-      const yearQuestionInitialDataPromise = yearQuestion.methods.loadInitialData();
+        // Call APIs
+        const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
+        const yearQuestionInitialDataPromise = yearQuestion.methods.loadInitialData();
 
-      // Settle promises and get results
-      const promiseResultMap = [
-        {
-          resultKey: "cmsContent",
-          promise: cmsContentPromise,
-        },
-        {
-          resultKey: "yearQuestionInitialData",
-          promise: yearQuestionInitialDataPromise,
-        },
-      ];
+        // Settle promises and get results
+        const promiseResultMap = [
+            {
+                resultKey: "cmsContent",
+                promise: cmsContentPromise,
+            },
+            {
+                resultKey: "yearQuestionInitialData",
+                promise: yearQuestionInitialDataPromise,
+            },
+        ];
 
-      let resultMap = await settleAllPromises(promiseResultMap);
+        let resultMap = await settleAllPromises(promiseResultMap);
 
-      // Call the "next" function to complete the transition to this page.
-      next((vm) => {
-        vm.setCmsContent(resultMap.cmsContent);
-        vm.$refs.yearQuestion.initializeComponent(
-          resultMap.yearQuestionInitialData
-        );
-      });
+        // Call the "next" function to complete the transition to this page.
+        next((vm) => {
+            vm.setCmsContent(resultMap.cmsContent);
+            vm.$refs.yearQuestion.initializeComponent(
+                resultMap.yearQuestionInitialData
+            );
+        });
     },
 
     watch: {
-      selectedYear(year) {
-        const parsedYear = parseInt(year);
-        this.mainStore.updateVehicleYear( parsedYear );
+        selectedYear(year) {
+            const parsedYear = parseInt(year);
+            this.mainStore.updateVehicleYear( parsedYear );
 
-        this.$router.navigate(
-          this.navigationScenarios.SELECTED_YEAR,
-          this.$route
-        );
-      },
+            this.$router.navigate(
+                this.navigationScenarios.SELECTED_YEAR,
+                this.$route
+            );
+        },
     },
     methods: {
-      arePagePrerequisitesValid() {
-        return true;
-      },
-      backButtonAction() {
+        arePagePrerequisitesValid() {
+            return true;
+        },
+        backButtonAction() {
             this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
-      },
+        },
     },
 
     components: {
-      yearQuestion,
-      siteHeader,
-      siteSubHeader,
-      vehicleBanner,
-      siteFooter
+        yearQuestion,
+        siteHeader,
+        siteSubHeader,
+        vehicleBanner,
+        siteFooter
     },
-  };
-  </script>
+};
+</script>
+
+<style lang="scss" scoped>
+.fade-on-route-transition {
+    margin-bottom: 80px;
+}
+.page-container-grouped-styles {
+    //height: calc(100% - 80px);
+    overflow: auto;
+}
+
+.modal-open {
+    .page-container-grouped-styles {
+        overflow: hidden;
+    }
+}
+</style>
diff --git a/src/layouts/welcome-page/welcome-page.vue b/src/layouts/welcome-page/welcome-page.vue
index 82fe74a2..e0633b2f 100644
--- a/src/layouts/welcome-page/welcome-page.vue
+++ b/src/layouts/welcome-page/welcome-page.vue
@@ -1,116 +1,115 @@
 <template>
-<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm"  v-slot="{ meta }" >
-
-    <div class="page-container-grouped-styles welcome">
-        <siteHeader cmsWidgetName="SiteHeaderWidget"/>
-        <div class="fade-on-route-transition  overflow-scroll container">
-
-            <siteSubHeader cmsWidgetName="SiteSubHeaderWidget"/>
-            <div class="row mt-4 px-3">
-                <div class="col">
-                    <textboxQuestion
-                        inputId="policyNumberField"
-                        cmsWidgetName="PolicyNumberQuestion"
-                        v-model="welcomePageModel.policyNumber"
-                        isRequired
-                        ref="policyNumber"
-                        disableAutoFill
-                        validationRules="policy-number-required" />
-                </div>
-            </div>
-            <div class="row mt-4 px-3">
-                <div class="col">
-                    <textboxQuestion
-                        type="date"
-                        cmsWidgetName="DateOfLossQuestion"
-                        v-model="welcomePageModel.dateOfLoss"
-                        inputId="dateOfLossField"
-                        isRequired
-                        ref="dateOfLoss"
-                        disableAutoFill
-                        :max="new Date().toJSON().slice(0,10)"
-                        :min="'1972-12-01'"
-                        validationRules="loss-date-required"                        
-                />
-                </div>
-            </div>
-            <div class="row px-5">
-                <div class="col px-0">
-                    <textBlock cmsWidgetName="DamageDateEstimateWidget" typeStyle="small" class="mt-2" />
-                </div>
-            </div>
-            <div class="row mt-4 px-3">
-                <div class="col">
-                    <dropdownQuestion
-                        cmsWidgetName="DamageCauseQuestion"
-                        v-model="welcomePageModel.damageCause"
-                        ref="damageCause"
-                        inputId="damageCauseQuestionField"
-                        :options="DamageCauseOptions"
-                        disableAutoFill
-                        validationRules="damage-option-required"
-                        placeHolderText="Select an option"
-                        id="welcomeDropdown"
-                    />
-                </div>
-            </div>  
-            <div class="row mt-4 px-3">
-                <div class="col">
-                    <textboxQuestion
-                        inputId="phoneNumberField"
-                        cmsWidgetName="PhoneNumberQuestion"
-                        v-model="welcomePageModel.phoneNumber"
-                        validationRules="phone-number-required|phone-number-format"
-                        isRequired
-                        ref="phoneNumber"
-                        mask="###-###-####"
-                        disableAutoFill />
-                </div>
-            </div>
-            <div class="row mt-4 px-3">
-                <div class="col">
-                    <textboxQuestion
-                        inputId="emailField"
-                        cmsWidgetName="EmailAddressQuestion"
-                        v-model="welcomePageModel.email"
-                        ref="email"
-                        validationRules="email-address-required|email-address-format"
-                        isRequired
-                        disableAutoFill />
-                </div>
-            </div>
-            <div class="row mt-4 px-3">
-                <div class="col">
-                    <textboxQuestion
-                        inputId="damageCityField"
-                        cmsWidgetName="DamageCityQuestion"
-                        v-model="welcomePageModel.damageCity"
-                        isRequired
-                        ref="damageCity"
-                        disableAutoFill
-                        v-if="this.displayDamageCityQuestion"
-                        validationRules="loss-city-required" />
-                </div>
-            </div>
-            <div class="row mt-4 px-3">
-                <div class="col">
-                    <dropdownQuestion
-                        cmsWidgetName="DamageStateQuestion"
-                        v-model="welcomePageModel.damageState"
-                        ref="state"
-                        inputId="8fdf9dc2e13e430eb57529499dceb3eb"
-                        :options="stateOptions"
-                        validationRules="loss-state-required"
-                        isRequired
-                        disableAutoFill
-                        v-if="this.displayDamageStateQuestion"
-                        placeHolderText="Select an option"
-                        id="welcomeDropdown"
-                    />
-                </div>
-            </div>
-            <div class="row mt-4">
-                    <buttonQuestion
+    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm"  v-slot="{ meta }" >
+        <div class="page-container-grouped-styles welcome">
+            <div class="fade-on-route-transition position-relative">
+                <siteHeader cmsWidgetName="SiteHeaderWidget"/>
+                <siteSubHeader cmsWidgetName="SiteSubHeaderWidget"/>
+                <div class="container-fluid">
+                    <div class="row mt-4 px-3">
+                        <div class="col">
+                            <textboxQuestion
+                            inputId="policyNumberField"
+                            cmsWidgetName="PolicyNumberQuestion"
+                            v-model="welcomePageModel.policyNumber"
+                            isRequired
+                            ref="policyNumber"
+                            disableAutoFill
+                            validationRules="policy-number-required" />
+                        </div>
+                    </div>
+                    <div class="row mt-4 px-3">
+                        <div class="col">
+                            <textboxQuestion
+                            type="date"
+                            cmsWidgetName="DateOfLossQuestion"
+                            v-model="welcomePageModel.dateOfLoss"
+                            inputId="dateOfLossField"
+                            isRequired
+                            ref="dateOfLoss"
+                            disableAutoFill
+                            :max="new Date().toJSON().slice(0,10)"
+                            :min="'1972-12-01'"
+                            validationRules="loss-date-required"
+                            />
+                        </div>
+                    </div>
+                    <div class="row px-5">
+                        <div class="col px-0">
+                            <textBlock cmsWidgetName="DamageDateEstimateWidget" typeStyle="small" class="mt-2" />
+                        </div>
+                    </div>
+                    <div class="row mt-4 px-3">
+                        <div class="col">
+                            <dropdownQuestion
+                            cmsWidgetName="DamageCauseQuestion"
+                            v-model="welcomePageModel.damageCause"
+                            ref="damageCause"
+                            inputId="damageCauseQuestionField"
+                            :options="DamageCauseOptions"
+                            disableAutoFill
+                            validationRules="damage-option-required"
+                            placeHolderText="Select an option"
+                            id="welcomeDropdown"
+                            />
+                        </div>
+                    </div>
+                    <div class="row mt-4 px-3">
+                        <div class="col">
+                            <textboxQuestion
+                            inputId="phoneNumberField"
+                            cmsWidgetName="PhoneNumberQuestion"
+                            v-model="welcomePageModel.phoneNumber"
+                            validationRules="phone-number-required|phone-number-format"
+                            isRequired
+                            ref="phoneNumber"
+                            mask="###-###-####"
+                            disableAutoFill />
+                        </div>
+                    </div>
+                    <div class="row mt-4 px-3">
+                        <div class="col">
+                            <textboxQuestion
+                            inputId="emailField"
+                            cmsWidgetName="EmailAddressQuestion"
+                            v-model="welcomePageModel.email"
+                            ref="email"
+                            validationRules="email-address-required|email-address-format"
+                            isRequired
+                            disableAutoFill />
+                        </div>
+                    </div>
+                    <div class="row mt-4 px-3">
+                        <div class="col">
+                            <textboxQuestion
+                            inputId="damageCityField"
+                            cmsWidgetName="DamageCityQuestion"
+                            v-model="welcomePageModel.damageCity"
+                            isRequired
+                            ref="damageCity"
+                            disableAutoFill
+                            v-if="this.displayDamageCityQuestion"
+                            validationRules="loss-city-required" />
+                        </div>
+                    </div>
+                    <div class="row mt-4 px-3">
+                        <div class="col">
+                            <dropdownQuestion
+                            cmsWidgetName="DamageStateQuestion"
+                            v-model="welcomePageModel.damageState"
+                            ref="state"
+                            inputId="8fdf9dc2e13e430eb57529499dceb3eb"
+                            :options="stateOptions"
+                            validationRules="loss-state-required"
+                            isRequired
+                            disableAutoFill
+                            v-if="this.displayDamageStateQuestion"
+                            placeHolderText="Select an option"
+                            id="welcomeDropdown"
+                            />
+                        </div>
+                    </div>
+                    <div class="row mt-4">
+                        <buttonQuestion
                         class="px-0"
                         cmsWidgetName="GlassOnlyQuestion"
                         v-model="welcomePageModel.isDamageGlassOnly"
@@ -124,234 +123,241 @@
                         ref="glassOnlyDamage"
                         v-if="this.displayGlassOnlyQuestion"
                         disableAutoFill/>
-            </div>
-            <div class="row mt-4 position-sticky top-100" id="welcomeFooter">
-                <div class="col">
-                    <site-footer
-                        cmsWidgetName="SiteFooterWidget"
-                        :isForwardActionDisabled="!meta.valid"
-                        @back-clicked="backButtonAction"
-                        @ForwardClicked="forwardButtonAction" />
+                    </div>
+                    <div class="row mt-4 position-sticky top-100" id="welcomeFooter">
+                        <div class="col">
+                            <site-footer
+                            cmsWidgetName="SiteFooterWidget"
+                            :isForwardActionDisabled="!meta.valid"
+                            @back-clicked="backButtonAction"
+                            @ForwardClicked="forwardButtonAction" />
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
-    </div>
-</Form>
+    </Form>
 </template>
 
-    <script>
-    // Components
-    import siteHeader from '@/iss-components/site-header/site-header';
-    import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header';
-    import siteFooter from "@/iss-components/site-footer/site-footer";
-    import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
-    import buttonQuestion from "@/digital-components/button-question/button-question";
-    import dropdownQuestion from "@/digital-components/dropdown-question/dropdown-question";
-    import textBlock from "@/digital-components/text-block/text-block";
+<script>
+// Components
+import siteHeader from '@/iss-components/site-header/site-header';
+import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header';
+import siteFooter from "@/iss-components/site-footer/site-footer";
+import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
+import buttonQuestion from "@/digital-components/button-question/button-question";
+import dropdownQuestion from "@/digital-components/dropdown-question/dropdown-question";
+import textBlock from "@/digital-components/text-block/text-block";
 
-    // Supporting files
-    import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
-    import { settleAllPromises } from "@/helpers/layout-helper";
-    import { Form, defineRule } from "vee-validate";
-    import { required, regex } from "@/helpers/validation-rules";
-    import { errorMessages } from "@/constants/error-messages";
-    import BaseFormMixin from '@/mixins/base-form-mixin.js';
-    import { useMainStore } from '@/store';
+// Supporting files
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
+import { Form, defineRule } from "vee-validate";
+import { required, regex } from "@/helpers/validation-rules";
+import { errorMessages } from "@/constants/error-messages";
+import BaseFormMixin from '@/mixins/base-form-mixin.js';
+import { useMainStore } from '@/store';
 
-    //define validation rules
-    defineRule("loss-date-required", required(errorMessages.LOSS_DATE_REQUIRED));
-    defineRule("loss-cause-required", required(errorMessages.LOSS_CAUSE_REQUIRED));
-    defineRule("policy-number-required", required(errorMessages.POLICY_NUMBER_REQUIRED));
-    defineRule("loss-date-required", required(errorMessages.LOSS_DATE_REQUIRED));
-    defineRule("loss-state-required", required(errorMessages.LOSS_STATE_REQUIRED));
-    defineRule("loss-city-required", required(errorMessages.LOSS_CITY_REQUIRED));
-    defineRule("phone-number-required", required(errorMessages.PHONE_NUMBER_FORMAT));
-    defineRule("email-address-required", required(errorMessages.EMAIL_ADDRESS_REQUIRED));
-    defineRule("damage-option-required", required(errorMessages.DAMAGE_OPTION_REQUIRED));
+//define validation rules
+defineRule("loss-date-required", required(errorMessages.LOSS_DATE_REQUIRED));
+defineRule("loss-cause-required", required(errorMessages.LOSS_CAUSE_REQUIRED));
+defineRule("policy-number-required", required(errorMessages.POLICY_NUMBER_REQUIRED));
+defineRule("loss-date-required", required(errorMessages.LOSS_DATE_REQUIRED));
+defineRule("loss-state-required", required(errorMessages.LOSS_STATE_REQUIRED));
+defineRule("loss-city-required", required(errorMessages.LOSS_CITY_REQUIRED));
+defineRule("phone-number-required", required(errorMessages.PHONE_NUMBER_FORMAT));
+defineRule("email-address-required", required(errorMessages.EMAIL_ADDRESS_REQUIRED));
+defineRule("damage-option-required", required(errorMessages.DAMAGE_OPTION_REQUIRED));
 
-    defineRule("email-address-format",
-        regex(
-            /^([a-zA-Z0-9_\-.+]+)@([a-zA-Z0-9_\-.]+)\.([a-zA-Z]{2,})$/,
-            errorMessages.EMAIL_ADDRESS_FORMAT
-        )
-    );
+defineRule("email-address-format",
+regex(
+    /^([a-zA-Z0-9_\-.+]+)@([a-zA-Z0-9_\-.]+)\.([a-zA-Z]{2,})$/,
+    errorMessages.EMAIL_ADDRESS_FORMAT
+)
+);
 
-    defineRule("phone-number-format",
-        regex(
-            /^(\([0-9]{3}\)|[0-9]{3}) *[-.]? *[0-9]{3} *[-.]? *[0-9]{4}$/,
-            errorMessages.PHONE_NUMBER_FORMAT
-        )
-    );
+defineRule("phone-number-format",
+regex(
+    /^(\([0-9]{3}\)|[0-9]{3}) *[-.]? *[0-9]{3} *[-.]? *[0-9]{4}$/,
+    errorMessages.PHONE_NUMBER_FORMAT
+)
+);
 
-    export default {
-        name: "welcome-page",
-        mixins: [BaseFormMixin],
-        data() {
-            return {
-                welcomePageModel: this.getWelcomePageModelFromStore()                
-            };            
-        },
-        setup() {
-            const mainStore = useMainStore();
+export default {
+    name: "welcome-page",
+    mixins: [BaseFormMixin],
+    data() {
+        return {
+            welcomePageModel: this.getWelcomePageModelFromStore()
+        };
+    },
+    setup() {
+        const mainStore = useMainStore();
 
-            // Set order account number from the issConfig.
-            mainStore.order.accountNumber = mainStore.issConfig.accountNumber;
+        // Set order account number from the issConfig.
+        mainStore.order.accountNumber = mainStore.issConfig.accountNumber;
 
-            return { mainStore };
-        },
-        async beforeRouteEnter(to, from, next)
-        {
-            // Call APIs
-            const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
+        return { mainStore };
+    },
+    async beforeRouteEnter(to, from, next)
+    {
+        // Call APIs
+        const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
 
-            // Settle promises and get results
-            const promiseResultMap = [
+        // Settle promises and get results
+        const promiseResultMap = [
             {
                 resultKey: "cmsContent",
                 promise: cmsContentPromise,
-                },
-            ];
+            },
+        ];
 
-            //use resultMap to populate layout content.
-            let resultMap = await settleAllPromises(promiseResultMap);
-           
-            next((vm) => {
-                vm.setCmsContent(resultMap.cmsContent);                
-            });
-        },
-        methods:
-        {
-            async forwardButtonAction() {
-                this.mainStore.updatePolicyData(this.welcomePageModel);
-                return this.navigateForward();
-            },
+        //use resultMap to populate layout content.
+        let resultMap = await settleAllPromises(promiseResultMap);
 
-            navigateForward() {
-                this.$router.navigate(
-                    this.navigationScenarios.CLICKED_FORWARD_WELCOME_PAGE,
-                    this.$route
-                );
-            },
-            getWelcomePageModelFromStore() {
-                return {
-                    policyNumber : this.mainStore.order.policy.policyNumber,
-                    dateOfLoss : this.mainStore.order.policy.dateOfLoss,
-                    damageCause : this.mainStore.order.policy.damageCause,
-                    damageState : this.mainStore.order.policy.damageState,
-                    damageCity : this.mainStore.order.policy.damageCity,
-                    isDamageGlassOnly : this.mainStore.order.policy.isDamageGlassOnly,
-                    phoneNumber : this.mainStore.order.customer.phoneNumber,
-                    email : this.mainStore.order.customer.emailAddress,
-                }
-            },
+        next((vm) => {
+            vm.setCmsContent(resultMap.cmsContent);
+        });
+    },
+    methods:
+    {
+        async forwardButtonAction() {
+            this.mainStore.updatePolicyData(this.welcomePageModel);
+            return this.navigateForward();
         },
-        computed:{
-            DamageCauseOptions() {
-                const damageCauseAnswers =  this.getCmsContent("DamageCauseQuestion", "Answers");
-                const damageCauseAnswersObj ={};
-                if(damageCauseAnswers)
-                {
-                   for (let answer of Object.values(damageCauseAnswers)) {
-                        if (answer?.Name) {
-                            damageCauseAnswersObj[answer.Name] = answer.Name;
-                        }
-                    }
-                }
-                return damageCauseAnswersObj;
-            },
-            DamageGlassOnlyOptions()
-            {
-                return this.getCmsContent("GlassOnlyQuestion", "Answers");
-            },
-            DamageGlassOnlyQuestion()
-            {
-                return this.getCmsContent("GlassOnlyQuestion", "QuestionText");
-            },
-            stateOptions: {
-                get: function () {
-                    return {
-                        AL: "Alabama",
-                        AK: "Alaska",
-                        AZ: "Arizona",
-                        AR: "Arkansas",
-                        CA: "California",
-                        CO: "Colorado",
-                        CT: "Connecticut",
-                        DE: "Delaware",
-                        DC: "District Of Columbia",
-                        FL: "Florida",
-                        GA: "Georgia",
-                        HI: "Hawaii",
-                        ID: "Idaho",
-                        IL: "Illinois",
-                        IN: "Indiana",
-                        IA: "Iowa",
-                        KS: "Kansas",
-                        KY: "Kentucky",
-                        LA: "Louisiana",
-                        ME: "Maine",
-                        MD: "Maryland",
-                        MA: "Massachusetts",
-                        MI: "Michigan",
-                        MN: "Minnesota",
-                        MS: "Mississippi",
-                        MO: "Missouri",
-                        MT: "Montana",
-                        NE: "Nebraska",
-                        NV: "Nevada",
-                        NH: "New Hampshire",
-                        NJ: "New Jersey",
-                        NM: "New Mexico",
-                        NY: "New York",
-                        NC: "North Carolina",
-                        ND: "North Dakota",
-                        OH: "Ohio",
-                        OK: "Oklahoma",
-                        OR: "Oregon",
-                        PA: "Pennsylvania",
-                        RI: "Rhode Island",
-                        SC: "South Carolina",
-                        SD: "South Dakota",
-                        TN: "Tennessee",
-                        TX: "Texas",
-                        UT: "Utah",
-                        VT: "Vermont",
-                        VA: "Virginia",
-                        WA: "Washington",
-                        WV: "West Virginia",
-                        WI: "Wisconsin",
-                        WY: "Wyoming",
-                    };
-                },
-            },
-            displayDamageCityQuestion(){
-                return !!this.getCmsContent("DamageCityQuestion","QuestionText");
-            },
-            displayDamageStateQuestion(){                
-                return !!this.getCmsContent("DamageStateQuestion","QuestionText");
-            },
-            displayGlassOnlyQuestion(){
-                return !!this.getCmsContent("GlassOnlyQuestion","QuestionText");
+
+        navigateForward() {
+            this.$router.navigate(
+                this.navigationScenarios.CLICKED_FORWARD_WELCOME_PAGE,
+                this.$route
+            );
+        },
+        getWelcomePageModelFromStore() {
+            return {
+                policyNumber : this.mainStore.order.policy.policyNumber,
+                dateOfLoss : this.mainStore.order.policy.dateOfLoss,
+                damageCause : this.mainStore.order.policy.damageCause,
+                damageState : this.mainStore.order.policy.damageState,
+                damageCity : this.mainStore.order.policy.damageCity,
+                isDamageGlassOnly : this.mainStore.order.policy.isDamageGlassOnly,
+                phoneNumber : this.mainStore.order.customer.phoneNumber,
+                email : this.mainStore.order.customer.emailAddress,
             }
         },
-        components: {
-            siteHeader,
-            siteSubHeader,
-            buttonQuestion,
-            textboxQuestion,
-            dropdownQuestion,
-            siteFooter,
-            textBlock,
-            Form,
+    },
+    computed:{
+        DamageCauseOptions() {
+            const damageCauseAnswers =  this.getCmsContent("DamageCauseQuestion", "Answers");
+            const damageCauseAnswersObj ={};
+            if(damageCauseAnswers)
+            {
+                for (let answer of Object.values(damageCauseAnswers)) {
+                    if (answer?.Name) {
+                        damageCauseAnswersObj[answer.Name] = answer.Name;
+                    }
+                }
+            }
+            return damageCauseAnswersObj;
         },
-    }
+        DamageGlassOnlyOptions()
+        {
+            return this.getCmsContent("GlassOnlyQuestion", "Answers");
+        },
+        DamageGlassOnlyQuestion()
+        {
+            return this.getCmsContent("GlassOnlyQuestion", "QuestionText");
+        },
+        stateOptions: {
+            get: function () {
+                return {
+                    AL: "Alabama",
+                    AK: "Alaska",
+                    AZ: "Arizona",
+                    AR: "Arkansas",
+                    CA: "California",
+                    CO: "Colorado",
+                    CT: "Connecticut",
+                    DE: "Delaware",
+                    DC: "District Of Columbia",
+                    FL: "Florida",
+                    GA: "Georgia",
+                    HI: "Hawaii",
+                    ID: "Idaho",
+                    IL: "Illinois",
+                    IN: "Indiana",
+                    IA: "Iowa",
+                    KS: "Kansas",
+                    KY: "Kentucky",
+                    LA: "Louisiana",
+                    ME: "Maine",
+                    MD: "Maryland",
+                    MA: "Massachusetts",
+                    MI: "Michigan",
+                    MN: "Minnesota",
+                    MS: "Mississippi",
+                    MO: "Missouri",
+                    MT: "Montana",
+                    NE: "Nebraska",
+                    NV: "Nevada",
+                    NH: "New Hampshire",
+                    NJ: "New Jersey",
+                    NM: "New Mexico",
+                    NY: "New York",
+                    NC: "North Carolina",
+                    ND: "North Dakota",
+                    OH: "Ohio",
+                    OK: "Oklahoma",
+                    OR: "Oregon",
+                    PA: "Pennsylvania",
+                    RI: "Rhode Island",
+                    SC: "South Carolina",
+                    SD: "South Dakota",
+                    TN: "Tennessee",
+                    TX: "Texas",
+                    UT: "Utah",
+                    VT: "Vermont",
+                    VA: "Virginia",
+                    WA: "Washington",
+                    WV: "West Virginia",
+                    WI: "Wisconsin",
+                    WY: "Wyoming",
+                };
+            },
+        },
+        displayDamageCityQuestion(){
+            return !!this.getCmsContent("DamageCityQuestion","QuestionText");
+        },
+        displayDamageStateQuestion(){
+            return !!this.getCmsContent("DamageStateQuestion","QuestionText");
+        },
+        displayGlassOnlyQuestion(){
+            return !!this.getCmsContent("GlassOnlyQuestion","QuestionText");
+        }
+    },
+    components: {
+        siteHeader,
+        siteSubHeader,
+        buttonQuestion,
+        textboxQuestion,
+        dropdownQuestion,
+        siteFooter,
+        textBlock,
+        Form,
+    },
+}
 </script>
 
 <style lang="scss">
 
-.overflow-scroll {    
-    height: calc(100% - 165px);   
-    overflow-X: hidden !important;   
+.fade-on-route-transition {
+    height: calc(100% - 80px);
+    overflow: scroll;
+}
+
+.modal-open {
+    .fade-on-route-transition {
+        overflow: hidden;
+    }
 }
 .my-2
 {
diff --git a/src/styles/common-styles.scss b/src/styles/common-styles.scss
index 94913982..2b3acb36 100644
--- a/src/styles/common-styles.scss
+++ b/src/styles/common-styles.scss
@@ -46,7 +46,7 @@ body {
     }
 
     .page-container-grouped-styles {
-      @extend .container-fluid, .shadow, .rounded-3, .p-0, .position-relative, .make-tall;
+      @extend .container-fluid, .shadow, .p-0, .position-relative, .make-tall;
     }
 
     //Footer modal backdrop adjustments for positioning