SSR-227

Fixed scrollbar for the above pages

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;
     }

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;

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;
    
 }

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>

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 {

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

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

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>

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>

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>

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="px-4  overflow-scroll ">
-        <div class="fade-on-route-transition sub-container make-tall px-2 mt-5">
+        <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>

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