From 417ebef6d5a27d55c044bc2cd8c9968a32dabf82 Mon Sep 17 00:00:00 2001
From: sheena <sheena.sukumaran@safelite.com>
Date: Thu, 9 Mar 2023 20:50:00 +0530
Subject: [PATCH] SSR-227

Fixed scrollbar for the above pages
---
 .../button-question/button-question.vue            |  2 +-
 .../questions-page-layout.vue                      |  6 +++++-
 src/layouts/address-lookup/address-lookup.vue      |  2 +-
 src/layouts/address-vehicles/address-vehicles.vue  | 12 +++++++++---
 .../coverage-statement/coverage-statement.vue      |  8 ++++++--
 .../license-plate-lookup/license-plate-lookup.vue  |  9 +++++++--
 .../policy-holder-details.vue                      |  2 +-
 src/layouts/vehicle-damage/vehicle-damage.vue      |  2 +-
 src/layouts/vehicle-lookup/vehicle-lookup.vue      |  2 +-
 src/layouts/vehicle-parts/vehicle-parts.vue        |  8 +++++++-
 src/layouts/vin-lookup/vin-lookup.vue              | 14 +++++++++++---
 src/layouts/welcome-page/welcome-page.vue          |  2 +-
 12 files changed, 51 insertions(+), 18 deletions(-)

diff --git a/src/digital-components/button-question/button-question.vue b/src/digital-components/button-question/button-question.vue
index 628b7c48..6bf69c90 100644
--- a/src/digital-components/button-question/button-question.vue
+++ b/src/digital-components/button-question/button-question.vue
@@ -229,7 +229,7 @@ export default {
 
     .overflow-scroll {
         // Height will be determined by overall height of content above list
-        height: calc(100% - 383px);
+        height: calc(100% - 400px);
         overflow-x: hidden !important;
         -webkit-overflow-scrolling: touch;
     }
diff --git a/src/iss-components/questions-page-layout/questions-page-layout.vue b/src/iss-components/questions-page-layout/questions-page-layout.vue
index 096eefbf..e89a6e1c 100644
--- a/src/iss-components/questions-page-layout/questions-page-layout.vue
+++ b/src/iss-components/questions-page-layout/questions-page-layout.vue
@@ -4,7 +4,7 @@
         <siteHeader cmsWidgetName="SiteHeaderWidget" />
         <vehicleBanner class="mb-3" cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
         <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
-        <div class="fade-on-route-transition sub-container make-tall">
+        <div class="fade-on-route-transition sub-container overflow-scroll">
             <alert
                 ref="alertFewMoreQuestions"
                 cmsWidgetName="alertWidget"
@@ -95,6 +95,10 @@ export default {
 </script>
 
 <style lang="scss">
+ .overflow-scroll {       
+        height: calc(100% - 368px);
+        overflow-x: hidden !important;
+ }
 .questions-page {
     .question-text {
         margin-bottom: 0.5rem;
diff --git a/src/layouts/address-lookup/address-lookup.vue b/src/layouts/address-lookup/address-lookup.vue
index a22379fd..ec9f5f39 100644
--- a/src/layouts/address-lookup/address-lookup.vue
+++ b/src/layouts/address-lookup/address-lookup.vue
@@ -313,7 +313,7 @@ export default {
 <style lang="scss">
 
 .overflow-scroll {    
-    height: calc(100% - 353px);   
+    height: calc(100% - 368px);   
     overflow-X: hidden !important;
    
 }
diff --git a/src/layouts/address-vehicles/address-vehicles.vue b/src/layouts/address-vehicles/address-vehicles.vue
index 39453943..33dbf9a6 100644
--- a/src/layouts/address-vehicles/address-vehicles.vue
+++ b/src/layouts/address-vehicles/address-vehicles.vue
@@ -5,7 +5,7 @@
     ref="theForm"
     v-slot="{ meta }"
   >
-    <div class="page-container-grouped-styles overflow-auto">
+    <div class="page-container-grouped-styles ">
       <siteHeader cmsWidgetName="SiteHeaderWidget" />
       <vehicleBanner
         class="mb-3"
@@ -14,7 +14,7 @@
       />
       <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
 
-      <div class="px-5">
+      <div class="px-5 ">
         <alert
           cmsWidgetName="FoundMultipleVehicles"
           ref="alertFoundMultipleVehicles"
@@ -26,7 +26,7 @@
           id="multiple-vehicles-alert"
         />
       </div>
-
+        <div class="overflow-scroll">
       <addressVehiclesQuestion
         ref="addressVehiclesQuestion"
         cmsWidgetName="VehicleConfirmationQuestion"
@@ -54,6 +54,7 @@
         </span>
       </div>
     </div>
+  </div>
     <siteFooter
       cmsWidgetName="SiteFooterWidget"
       :isForwardActionDisabled="!meta.valid"
@@ -270,4 +271,9 @@ export default {
 #multiple-vehicles-alert p {
   margin-bottom: 0 !important; // Overrides extra margin-bottom on alert body text
 }
+.overflow-scroll {    
+    height: calc(100% - 432px);   
+    overflow-X: hidden !important;
+   
+}
 </style>
diff --git a/src/layouts/coverage-statement/coverage-statement.vue b/src/layouts/coverage-statement/coverage-statement.vue
index 7778c6e6..310f2e97 100644
--- a/src/layouts/coverage-statement/coverage-statement.vue
+++ b/src/layouts/coverage-statement/coverage-statement.vue
@@ -4,11 +4,11 @@
     @invalidSubmit="onInvalidSubmit"
     v-slot="{ meta }"
   >
-    <div class="page-container-grouped-styles overflow-auto">
+    <div class="page-container-grouped-styles">
       <siteHeader
         cmsWidgetName="SiteHeaderWidget"
       />
-      <div class="fade-on-route-transition sub-container make-tall px-5">
+      <div class="fade-on-route-transition sub-container overflow-scroll  px-5">
         <textBlock
             cmsWidgetName="verifyingCoverageStatement"
             typeStyle="h5"
@@ -150,6 +150,10 @@ export default {
 </script>
 
 <style lang="scss">
+.overflow-scroll {    
+    height: calc(100% - 168px);   
+    overflow-X: hidden !important;   
+}
     ol {
         margin-left: -1rem;
         li {
diff --git a/src/layouts/license-plate-lookup/license-plate-lookup.vue b/src/layouts/license-plate-lookup/license-plate-lookup.vue
index 8c6dcafb..d9afacd7 100644
--- a/src/layouts/license-plate-lookup/license-plate-lookup.vue
+++ b/src/layouts/license-plate-lookup/license-plate-lookup.vue
@@ -3,14 +3,14 @@
       @submit="onSubmit"
       @invalid-submit="onInvalidSubmit"
       v-slot="{ meta }">
-    <div class="page-container-grouped-styles overflow-auto">
+    <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 make-tall mt-5 px-5">
+      <div class="fade-on-route-transition sub-container overflow-scroll mt-5 px-5">
         <alert
           ref="alertVinNotFound"
           v-if="displayVinNotFoundAlert"
@@ -276,6 +276,11 @@ export default {
 </script>
 
 <style>
+
+ .overflow-scroll {       
+        height: calc(100% - 392px);
+        overflow-x: hidden !important;
+ }
 #license-plate-question-wrapper .form-test-error {
   /**
   Override extra margin-bottom in the error message in TextboxQuestion
diff --git a/src/layouts/policy-holder-details/policy-holder-details.vue b/src/layouts/policy-holder-details/policy-holder-details.vue
index c9385cd4..17fea202 100644
--- a/src/layouts/policy-holder-details/policy-holder-details.vue
+++ b/src/layouts/policy-holder-details/policy-holder-details.vue
@@ -138,7 +138,7 @@ export default {
 </script>
 <style lang="scss">
 .overflow-scroll {    
-    height: calc(100% - 152px);   
+    height: calc(100% - 168px);   
     overflow-X: hidden !important;   
 }
 .alert.alert-warning
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index fe292962..564cd9e3 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -475,7 +475,7 @@ export default {
 <style lang="scss">
 
 .overflow-scroll {    
-    height: calc(100% - 353px);   
+    height: calc(100% - 368px);   
     overflow-X: hidden !important;   
 }
 </style>
diff --git a/src/layouts/vehicle-lookup/vehicle-lookup.vue b/src/layouts/vehicle-lookup/vehicle-lookup.vue
index b83f2a65..6ba6baf6 100644
--- a/src/layouts/vehicle-lookup/vehicle-lookup.vue
+++ b/src/layouts/vehicle-lookup/vehicle-lookup.vue
@@ -118,7 +118,7 @@ export default {
 <style lang="scss">
 
 .overflow-scroll {    
-    height: calc(100% - 353px);   
+    height: calc(100% - 368px);   
     overflow-X: hidden !important;   
 }
 </style>
\ No newline at end of file
diff --git a/src/layouts/vehicle-parts/vehicle-parts.vue b/src/layouts/vehicle-parts/vehicle-parts.vue
index c14cd0df..b2ab7f0e 100644
--- a/src/layouts/vehicle-parts/vehicle-parts.vue
+++ b/src/layouts/vehicle-parts/vehicle-parts.vue
@@ -8,7 +8,7 @@
                 cmsWidgetName="VehicleBannerWidget"
                 :displayGenericVehicleImage="false" />
             <siteSubHeader ref="siteSubHeader" cmsWidgetName="SiteSubHeaderWidget" />
-            <div class="fade-on-route-transition sub-container make-tall overflow-auto px-5">
+            <div class="fade-on-route-transition sub-container overflow-scroll px-5">
                 <div class="prevent-squish my-5">
                     <div class="row">
                         <div class="col">
@@ -221,3 +221,9 @@ export default {
     },
 };
 </script>
+<style lang="scss">
+ .overflow-scroll {       
+        height: calc(100% - 368px);
+        overflow-x: hidden !important;
+ }
+ </style>
\ No newline at end of file
diff --git a/src/layouts/vin-lookup/vin-lookup.vue b/src/layouts/vin-lookup/vin-lookup.vue
index f0ed0719..1f3d663d 100644
--- a/src/layouts/vin-lookup/vin-lookup.vue
+++ b/src/layouts/vin-lookup/vin-lookup.vue
@@ -4,7 +4,7 @@
     @invalidSubmit="onInvalidSubmit"
     v-slot="{ meta }"
   >
-    <div class="page-container-grouped-styles overflow-auto">
+    <div class="page-container-grouped-styles ">
       <siteHeader
         cmsWidgetName="SiteHeaderWidget"
       />
@@ -16,8 +16,8 @@
       <siteSubHeader
         cmsWidgetName="SiteSubHeaderWidget"
       />
-      <div class="px-4">
-        <div class="fade-on-route-transition sub-container make-tall px-2 mt-5">
+      <div class="px-4  overflow-scroll ">
+        <div class="fade-on-route-transition sub-container px-2 mt-5">
           <vinLookupAlerts
             :activeAlertType="activeVehicleLookupAlertType"
           />
@@ -241,3 +241,11 @@ export default {
   },
 };
 </script>
+<style>
+.overflow-scroll {    
+    height: calc(100% - 368px);   
+    overflow-X: hidden !important; 
+}
+
+
+</style>
\ No newline at end of file
diff --git a/src/layouts/welcome-page/welcome-page.vue b/src/layouts/welcome-page/welcome-page.vue
index df3620bc..a510dbac 100644
--- a/src/layouts/welcome-page/welcome-page.vue
+++ b/src/layouts/welcome-page/welcome-page.vue
@@ -335,7 +335,7 @@
 <style lang="scss">
 
 .overflow-scroll {    
-    height: calc(100% - 152px);   
+    height: calc(100% - 165px);   
     overflow-X: hidden !important;   
 }
 .my-2