Merge pull request #196 from Safelite/SSR-312-un-sticky-header

SSR-312 update all pages to have non-sticky header.

src/iss-components/questions-page-layout/questions-page-layout.vue

@@ -2,9 +2,9 @@
     <div :class="`page-container-grouped-styles questions-page`">
         <loadingModal ref="loadingModal" />
         <siteHeader cmsWidgetName="SiteHeaderWidget" />
+        <div class="fade-on-route-transition sub-container overflow-scroll">
         <vehicleBanner class="mb-3" cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
         <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
-        <div class="fade-on-route-transition sub-container overflow-scroll">
             <alert
                 ref="alertFewMoreQuestions"
                 cmsWidgetName="alertWidget"
@@ -95,8 +95,8 @@ export default {
 </script>
 
 <style lang="scss">
- .overflow-scroll {       
+ .overflow-scroll {
-        height: calc(100% - 368px);
+        height: calc(100% - 180px);
         overflow-x: hidden !important;
  }
 .questions-page {

src/layouts/address-lookup/address-lookup.vue

@@ -7,13 +7,13 @@
         autocomplete="off">
         <div class="page-container-grouped-styles">
             <siteHeader cmsWidgetName="SiteHeaderWidget" ref="siteHeader" />
-            <vehicleBanner
-                class="mb-3"
-                cmsWidgetName="VehicleBannerWidget"
-                ref="vehicleBanner"
-                :displayGenericVehicleImage="false" />
-            <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" ref="siteSubHeader" />
             <div class="fade-on-route-transition sub-container overflow-scroll px-5">
+                <vehicleBanner
+                    class="mb-3"
+                    cmsWidgetName="VehicleBannerWidget"
+                    ref="vehicleBanner"
+                    :displayGenericVehicleImage="false" />
+                <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" ref="siteSubHeader" />
                 <alert
                     ref="alertVinNotFound"
                     v-if="displayVinNotFoundAlert"
@@ -182,13 +182,13 @@ export default {
                 if (this.isCarIdDifferent && carFound.carId !== this.previouslyEnteredCarId) {
                     // Display Alert
                     this.previouslyEnteredCarId = carFound.carId;
-                    this.customAlertData.vehicleInfo = carFound;                    
+                    this.customAlertData.vehicleInfo = carFound;
                     if(this.isTwoIdenticalYMMVehicleFound){
                         this.displayMatchedTwoIdenticalYMMVehicleAlert = true;
                         this.forwardButtonCarStyle= carFound.style;
                     }
                     else{
-                        this.displayMatchedDifferentVehicleAlert = true; 
+                        this.displayMatchedDifferentVehicleAlert = true;
                     }
 
                     this.isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(
@@ -349,9 +349,9 @@ export default {
 </script>
 <style lang="scss">
 
-.overflow-scroll {    
+.overflow-scroll {
-    height: calc(100% - 368px);   
+    height: calc(100% - 180px);   
     overflow-X: hidden !important;
-   
+
 }
 </style>

src/layouts/license-plate-lookup/license-plate-lookup.vue

@@ -5,12 +5,12 @@
       v-slot="{ meta }">
     <div class="page-container-grouped-styles">
       <siteHeader cms-widget-name="SiteHeaderWidget" />
-      <vehicleBanner
-        class="mb-3"
-        cms-widget-name="VehicleBannerWidget"
-        :display-generic-vehicle-image="false" />
-      <siteSubHeader cms-widget-name="SiteSubHeaderWidget" />
       <div class="fade-on-route-transition sub-container overflow-scroll mt-5 px-5">
+        <vehicleBanner
+            class="mb-3"
+            cms-widget-name="VehicleBannerWidget"
+            :display-generic-vehicle-image="false" />
+        <siteSubHeader cms-widget-name="SiteSubHeaderWidget" />
         <alert
           ref="alertVinNotFound"
           v-if="displayVinNotFoundAlert"
@@ -189,13 +189,13 @@ export default {
           // Display Alert
           this.previouslyEnteredCarId = vehicleFromLookup.carId;
           this.customAlertData.vehicleInfo = vehicleFromLookup;
-          
+
           if(this.isTwoIdenticalYMMVehicleFound){
             this.displayMatchedTwoIdenticalYMMVehicleAlert = true;
             this.forwardButtonCarStyle= vehicleFromLookup.style;
           }
           else{
-            this.displayMatchedDifferentVehicleAlert = true; 
+            this.displayMatchedDifferentVehicleAlert = true;
           }
 
           this.isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(
@@ -314,8 +314,8 @@ export default {
 
 <style>
 
- .overflow-scroll {       
+ .overflow-scroll {
-        height: calc(100% - 392px);
+        height: calc(100% - 220px);
         overflow-x: hidden !important;
  }
 #license-plate-question-wrapper .form-test-error {

src/layouts/vehicle-damage/vehicle-damage.vue

@@ -2,11 +2,6 @@
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
         <div class="page-container-grouped-styles vehicle-damage">
             <siteHeader cmsWidgetName="SiteHeaderWidget" />
-            <vehicleBanner
-                class="mb-3"
-                cmsWidgetName="VehicleBannerWidget"
-                :displayGenericVehicleImage="false" />
-            <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
             <div class="fade-on-route-transition sub-container overflow-scroll">
                 <alert
                     ref="vehicleChangeAlert"
@@ -15,6 +10,11 @@
                     cmsWidgetName="VehicleChangeAlert"
                     alertClass="alert-warning"
                     :isDismissible="false" />
+                <vehicleBanner
+                    class="mb-3"
+                    cmsWidgetName="VehicleBannerWidget"
+                    :displayGenericVehicleImage="false" />
+                <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
                 <damageLocationQuestion
                     ref="damageLocation"
                     cmsWidgetName="DamageLocationQuestion"
@@ -474,8 +474,8 @@ export default {
 </script>
 <style lang="scss">
 
-.overflow-scroll {    
+.overflow-scroll {
-    height: calc(100% - 368px);   
+    height: calc(100% - 180px);
-    overflow-X: hidden !important;   
+    overflow-X: hidden !important;
 }
 </style>

src/layouts/vehicle-lookup/vehicle-lookup.vue

@@ -7,15 +7,15 @@
       <SiteHeader
         cms-widget-name="SiteHeaderWidget"
       />
-      <VehicleBanner
-        class="mb-3"
-        cms-widget-name="VehicleBannerWidget"
-        :display-generic-vehicle-image="false"
-      />
-      <SiteSubHeader
-        cms-widget-name="SiteSubHeaderWidget"
-      />
       <div class="fade-on-route-transition sub-container  overflow-scroll container gx-0">
+        <VehicleBanner
+            class="mb-3"
+            cms-widget-name="VehicleBannerWidget"
+            :display-generic-vehicle-image="false"
+        />
+        <SiteSubHeader
+            cms-widget-name="SiteSubHeaderWidget"
+        />
         <VinLookupMethods
           v-model="selectedVinLookupMethod"
           cms-widget-name="VINLookupMethod"
@@ -117,8 +117,8 @@ export default {
 </script>
 <style lang="scss">
 
-.overflow-scroll {    
+.overflow-scroll {
-    height: calc(100% - 368px);   
+    height: calc(100% - 180px);   
-    overflow-X: hidden !important;   
+    overflow-X: hidden !important;
 }
-</style>
+</style>

src/layouts/vehicle-parts/vehicle-parts.vue

@@ -2,13 +2,13 @@
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
         <div class="page-container-grouped-styles vehicle-parts">
             <siteHeader ref="siteHeader" cmsWidgetName="SiteHeaderWidget" />
-            <vehicleBanner
-                class="mb-3"
-                ref="vehicleBanner"
-                cmsWidgetName="VehicleBannerWidget"
-                :displayGenericVehicleImage="false" />
-            <siteSubHeader ref="siteSubHeader" cmsWidgetName="SiteSubHeaderWidget" />
             <div class="fade-on-route-transition sub-container overflow-scroll px-5">
+                <vehicleBanner
+                    class="mb-3"
+                    ref="vehicleBanner"
+                    cmsWidgetName="VehicleBannerWidget"
+                    :displayGenericVehicleImage="false" />
+                <siteSubHeader ref="siteSubHeader" cmsWidgetName="SiteSubHeaderWidget" />
                 <div class="prevent-squish my-5">
                     <div class="row">
                         <div class="col">
@@ -222,8 +222,8 @@ export default {
 };
 </script>
 <style lang="scss">
- .overflow-scroll {       
+ .overflow-scroll {
-        height: calc(100% - 368px);
+        height: calc(100% - 180px);
         overflow-x: hidden !important;
  }
- </style>
+ </style>

src/layouts/vin-lookup/vin-lookup.vue

@@ -1,44 +1,44 @@
 <template>
-  <Form
+    <Form
     @submit="onSubmit"
     @invalidSubmit="onInvalidSubmit"
     v-slot="{ meta }"
-  >
+    >
     <div class="page-container-grouped-styles ">
-      <siteHeader
+        <siteHeader
         cmsWidgetName="SiteHeaderWidget"
-      />
+        />
-      <vehicleBanner
+        <div class="px-4  overflow-scroll ">
-        class="mb-3"
+            <div class="fade-on-route-transition sub-container px-2 mt-5">
-        cmsWidgetName="VehicleBannerWidget"
+                <vehicleBanner
-        :displayGenericVehicleImage="false"
+                class="mb-3"
-      />
+                cmsWidgetName="VehicleBannerWidget"
-      <siteSubHeader
+                :displayGenericVehicleImage="false"
-        cmsWidgetName="SiteSubHeaderWidget"
+                />
-      />
+                <siteSubHeader
-      <div class="px-4  overflow-scroll ">
+                cmsWidgetName="SiteSubHeaderWidget"
-        <div class="fade-on-route-transition sub-container px-2 mt-5">
+                />
-          <vinLookupAlerts
+                <vinLookupAlerts
-            :activeAlertType="activeVehicleLookupAlertType"
+                :activeAlertType="activeVehicleLookupAlertType"
-          />
+                />
 
-          <vinQuestion
+                <vinQuestion
-            v-model="vin"
+                v-model="vin"
-          />
+                />
 
-          <vinLocationInformation />
+                <vinLocationInformation />
 
-          <siteFooter
+                <siteFooter
-            cmsWidgetName="SiteFooterWidget"
+                cmsWidgetName="SiteFooterWidget"
-            :isForwardActionDisabled="!meta.valid"
+                :isForwardActionDisabled="!meta.valid"
-            @backClicked="backButtonAction"
+                @backClicked="backButtonAction"
-            @forwardClicked="forwardButtonAction"
+                @forwardClicked="forwardButtonAction"
-            ref="siteFooter"
+                ref="siteFooter"
-          />
+                />
+            </div>
         </div>
-      </div>
     </div>
-  </Form>
+</Form>
 </template>
 <script>
 // Import Supporting Files
@@ -63,202 +63,202 @@ import vinLookupAlerts from './vin-lookup-alerts/vin-lookup-alerts.vue';
 import vinQuestion from './vin-question/vin-question.vue';
 
 export default {
-  name: 'vin-lookup',
+    name: 'vin-lookup',
-  mixins: [baseFormMixin, vehicleQuestionsMixin],
+    mixins: [baseFormMixin, vehicleQuestionsMixin],
-  components: {
+    components: {
-    siteFooter,
+        siteFooter,
-    siteHeader,
+        siteHeader,
-    siteSubHeader,
+        siteSubHeader,
-    Form,
+        Form,
-    vehicleBanner,
+        vehicleBanner,
-    vinLocationInformation,
+        vinLocationInformation,
-    vinLookupAlerts,
+        vinLookupAlerts,
-    vinQuestion,
+        vinQuestion,
-  },
-  setup() {
-    const mainStore = useMainStore();
-
-    return { mainStore };
-  },
-  data() {
-    return {
-      activeVehicleLookupAlertType: null,
-      needToLookupVehicle: true,
-      vehicleFromLookup: null,
-      vin: null,
-      forwardButtonCarStyle:"",
-    };
-  },
-  provide() {
-    return {
-      vehicleFromLookup: computed(() => this.vehicleFromLookup),
-    };
-  },
-  async beforeRouteEnter(to, from, next) {
-    const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
-
-    // Settle promises and get results
-    const promiseResultMap = [
-      {
-        resultKey: 'cmsContent',
-        promise: cmsContentPromise,
-      },
-    ];
-
-    const resultMap = await settleAllPromises(promiseResultMap);
-
-    next((vm) => {
-      vm.setCmsContent(resultMap.cmsContent);
-    });
-  },
-  computed: {
-    isCarIdDifferentFromTheStore() {
-      return (
-        this.vehicleFromLookup !== null
-        && this.vehicleFromLookup.carId !== this.mainStore.vehicle.carId
-      );
     },
-    isTwoIdenticalYMMVehicleFound(){
+    setup() {
-      const vinYmmFound = `${this.vehicleFromLookup.year} ${this.vehicleFromLookup.make} ${this.vehicleFromLookup.model}`;
+        const mainStore = useMainStore();
-      const vinYmmExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model}`;
+
-      return(vinYmmFound.toLowerCase()==vinYmmExpected.toLowerCase());
+        return { mainStore };
-    }
-  },
-  methods: {
-    arePagePrerequisiteValid() {
-      return true;
     },
-    backButtonAction() {
+    data() {
-      /**
-       * this.navigationScenarios comes from base-mixin
-       */
-      this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
-    },
-    // NOTE: If form is not valid, this method is not called when 'Continue' button is clicked
-    async forwardButtonAction() {
-      this.resetActiveAlert();
-      // Temp solution to reset the 'disabled' style on the Continue button
-      this.$refs.siteFooter.enableForwardAction();
-
-      if (this.needToLookupVehicle) {
-        const vehicleLookupResponse = await this.lookupVehicleByVin(this.vin);
-
-        if (vehicleLookupResponse.error) {
-          this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.NOT_FOUND;
-          this.resetVehicleFromLookup();
-          this.$refs.siteFooter.removeLoader();
-          // Temp solution to turn on 'disabled' style on the Continue button
-          //  because the form itself actually passes its client-side validation.
-          //  SSR-189 Scenario #4.
-          this.$refs.siteFooter.disableForwardButton();
-          return;
-        }
-
-        // Add vin bcs the response from the service doesn't contain vin
-        this.vehicleFromLookup = Object.assign(vehicleLookupResponse.data, { vin: this.vin });
-      }
-
-      if (this.needToLookupVehicle && this.isCarIdDifferentFromTheStore) {
-        if(this.isTwoIdenticalYMMVehicleFound){
-          this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.TWO_IDENTICAL_YMM_MATCHED;
-          this.forwardButtonCarStyle = this.vehicleFromLookup.style;
-        }
-        else{
-          this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.NOT_MATCHED;
-        }
-        
-
-        const vehicleYearMakeModelStyle = `${this.vehicleFromLookup.year} ${this.vehicleFromLookup.make} ${this.vehicleFromLookup.model} ${this.forwardButtonCarStyle}`;
-        this.$refs.siteFooter.updateButtonText(`Continue with ${vehicleYearMakeModelStyle}`);
-        this.$refs.siteFooter.removeLoader();
-
-        this.needToLookupVehicle = false;
-
-        return;
-      }
-
-      let isSelectedGlassAvailableForVehicle = true;
-      if (this.isCarIdDifferentFromTheStore) {
-        isSelectedGlassAvailableForVehicle =
-          await isGlassAvailableForCarId(this.vehicleFromLookup.carId);
-      }
-
-      // navigate back to vehicle-damage
-      if (this.isCarIdDifferentFromTheStore && !isSelectedGlassAvailableForVehicle) {
-        this.mainStore.updateVehicle(this.vehicleFromLookup);
-        this.$router.navigate(
-          this.navigationScenarios.SELECTED_VIN_WITH_MISMATCHED_GLASS,
-          this.$route,
-          {},
-          { [routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]: true }
-        );
-
-        // navigate() doesn't stop the processing flow
-        return;
-      }
-
-      this.mainStore.updateVehicle(this.vehicleFromLookup);
-      const partsOrQuestionsResponse = await this.getPartsOrQuestions();
-      if (partsOrQuestionsResponse.error) {
-        // To Do: Need requirement on what to do here
-        console.error('Error on retrieving PartsOrQuestions');
-        this.$refs.siteFooter.removeLoader();
-        return;
-      }
-
-      // Comes from vehicleQuestionsMixin.navigateForward()
-      await this.navigateForward(partsOrQuestionsResponse.data.partsOrQuestions, this);
-    },
-    async getPartsOrQuestions() {
-      try {
-        const response = await this.mainStore.getPartsOrQuestions();
-
-        return response;
-      } catch (responseError) {
         return {
-          error: {
+            activeVehicleLookupAlertType: null,
-            status: responseError.status,
+            needToLookupVehicle: true,
-          },
+            vehicleFromLookup: null,
+            vin: null,
+            forwardButtonCarStyle:"",
         };
-      }
     },
-    async lookupVehicleByVin(vin) {
+    provide() {
-      try {
-        return await this.mainStore.lookupVehicleByVin(vin);
-      }
-      catch (responseError) {
         return {
-          error: {
+            vehicleFromLookup: computed(() => this.vehicleFromLookup),
-            status: responseError.status,
-          },
         };
-      }
     },
-    resetActiveAlert() {
+    async beforeRouteEnter(to, from, next) {
-      this.activeVehicleLookupAlertType = null;
+        const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
+
+        // Settle promises and get results
+        const promiseResultMap = [
+            {
+                resultKey: 'cmsContent',
+                promise: cmsContentPromise,
+            },
+        ];
+
+        const resultMap = await settleAllPromises(promiseResultMap);
+
+        next((vm) => {
+            vm.setCmsContent(resultMap.cmsContent);
+        });
     },
-    resetVehicleFromLookup() {
+    computed: {
-      this.vehicleFromLookup = null;
+        isCarIdDifferentFromTheStore() {
+            return (
+                this.vehicleFromLookup !== null
+                && this.vehicleFromLookup.carId !== this.mainStore.vehicle.carId
+            );
+        },
+        isTwoIdenticalYMMVehicleFound(){
+            const vinYmmFound = `${this.vehicleFromLookup.year} ${this.vehicleFromLookup.make} ${this.vehicleFromLookup.model}`;
+            const vinYmmExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model}`;
+            return(vinYmmFound.toLowerCase()==vinYmmExpected.toLowerCase());
+        }
+    },
+    methods: {
+        arePagePrerequisiteValid() {
+            return true;
+        },
+        backButtonAction() {
+            /**
+            * this.navigationScenarios comes from base-mixin
+            */
+            this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
+        },
+        // NOTE: If form is not valid, this method is not called when 'Continue' button is clicked
+        async forwardButtonAction() {
+            this.resetActiveAlert();
+            // Temp solution to reset the 'disabled' style on the Continue button
+            this.$refs.siteFooter.enableForwardAction();
+
+            if (this.needToLookupVehicle) {
+                const vehicleLookupResponse = await this.lookupVehicleByVin(this.vin);
+
+                if (vehicleLookupResponse.error) {
+                    this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.NOT_FOUND;
+                    this.resetVehicleFromLookup();
+                    this.$refs.siteFooter.removeLoader();
+                    // Temp solution to turn on 'disabled' style on the Continue button
+                    //  because the form itself actually passes its client-side validation.
+                    //  SSR-189 Scenario #4.
+                    this.$refs.siteFooter.disableForwardButton();
+                    return;
+                }
+
+                // Add vin bcs the response from the service doesn't contain vin
+                this.vehicleFromLookup = Object.assign(vehicleLookupResponse.data, { vin: this.vin });
+            }
+
+            if (this.needToLookupVehicle && this.isCarIdDifferentFromTheStore) {
+                if(this.isTwoIdenticalYMMVehicleFound){
+                    this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.TWO_IDENTICAL_YMM_MATCHED;
+                    this.forwardButtonCarStyle = this.vehicleFromLookup.style;
+                }
+                else{
+                    this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.NOT_MATCHED;
+                }
+
+
+                const vehicleYearMakeModelStyle = `${this.vehicleFromLookup.year} ${this.vehicleFromLookup.make} ${this.vehicleFromLookup.model} ${this.forwardButtonCarStyle}`;
+                this.$refs.siteFooter.updateButtonText(`Continue with ${vehicleYearMakeModelStyle}`);
+                this.$refs.siteFooter.removeLoader();
+
+                this.needToLookupVehicle = false;
+
+                return;
+            }
+
+            let isSelectedGlassAvailableForVehicle = true;
+            if (this.isCarIdDifferentFromTheStore) {
+                isSelectedGlassAvailableForVehicle =
+                await isGlassAvailableForCarId(this.vehicleFromLookup.carId);
+            }
+
+            // navigate back to vehicle-damage
+            if (this.isCarIdDifferentFromTheStore && !isSelectedGlassAvailableForVehicle) {
+                this.mainStore.updateVehicle(this.vehicleFromLookup);
+                this.$router.navigate(
+                    this.navigationScenarios.SELECTED_VIN_WITH_MISMATCHED_GLASS,
+                    this.$route,
+                    {},
+                    { [routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]: true }
+                );
+
+                // navigate() doesn't stop the processing flow
+                return;
+            }
+
+            this.mainStore.updateVehicle(this.vehicleFromLookup);
+            const partsOrQuestionsResponse = await this.getPartsOrQuestions();
+            if (partsOrQuestionsResponse.error) {
+                // To Do: Need requirement on what to do here
+                console.error('Error on retrieving PartsOrQuestions');
+                this.$refs.siteFooter.removeLoader();
+                return;
+            }
+
+            // Comes from vehicleQuestionsMixin.navigateForward()
+            await this.navigateForward(partsOrQuestionsResponse.data.partsOrQuestions, this);
+        },
+        async getPartsOrQuestions() {
+            try {
+                const response = await this.mainStore.getPartsOrQuestions();
+
+                return response;
+            } catch (responseError) {
+                return {
+                    error: {
+                        status: responseError.status,
+                    },
+                };
+            }
+        },
+        async lookupVehicleByVin(vin) {
+            try {
+                return await this.mainStore.lookupVehicleByVin(vin);
+            }
+            catch (responseError) {
+                return {
+                    error: {
+                        status: responseError.status,
+                    },
+                };
+            }
+        },
+        resetActiveAlert() {
+            this.activeVehicleLookupAlertType = null;
+        },
+        resetVehicleFromLookup() {
+            this.vehicleFromLookup = null;
+        },
+        resetDependentState() {},
+    },
+    watch: {
+        vin() {
+            this.resetActiveAlert();
+            this.$refs.siteFooter.enableForwardAction();
+            this.needToLookupVehicle = true;
+            this.$refs.siteFooter.updateButtonText(
+                this.getCmsContent('SiteFooterWidget', 'ForwardButtonText')
+            );
+        }
     },
-    resetDependentState() {},
-  },
-  watch: {
-    vin() {
-      this.resetActiveAlert();
-      this.$refs.siteFooter.enableForwardAction();
-      this.needToLookupVehicle = true;
-      this.$refs.siteFooter.updateButtonText(
-        this.getCmsContent('SiteFooterWidget', 'ForwardButtonText')
-      );
-    }
-  },
 };
 </script>
 <style>
-.overflow-scroll {    
+.overflow-scroll {
-    height: calc(100% - 368px);   
+    height: calc(100% - 180px);
-    overflow-X: hidden !important; 
+    overflow-X: hidden !important;
 }
 
 
-</style>
+</style>