From 30f6f55f9fdf9e43360784740b201dbdbe79043d Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Mon, 6 Mar 2023 14:10:41 -0500
Subject: [PATCH] Remedy for horizontal scrolling on select pages.

---
 src/layouts/vehicle-damage/vehicle-damage.vue |  2 +-
 src/layouts/vehicle-lookup/vehicle-lookup.vue |  4 ++--
 src/layouts/vin-lookup/vin-lookup.vue         |  4 ++--
 src/layouts/welcome-page/welcome-page.vue     | 23 ++++++++++---------
 src/styles/common-error-styles.scss           |  8 +++++++
 src/styles/common-styles.scss                 | 12 +++++-----
 6 files changed, 31 insertions(+), 22 deletions(-)

diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index 01ce9443..f702a187 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -1,6 +1,6 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
-        <div class="page-container-grouped-styles overflow-auto">
+        <div class="page-container-grouped-styles overflow-auto vehicle-damage">
             <siteHeader cmsWidgetName="SiteHeaderWidget" />
             <vehicleBanner
                 class="mb-3"
diff --git a/src/layouts/vehicle-lookup/vehicle-lookup.vue b/src/layouts/vehicle-lookup/vehicle-lookup.vue
index 4f16ccd5..ff3a50c6 100644
--- a/src/layouts/vehicle-lookup/vehicle-lookup.vue
+++ b/src/layouts/vehicle-lookup/vehicle-lookup.vue
@@ -3,7 +3,7 @@
     @submit="onSubmit"
     @invalid-submit="onInvalidSubmit"
   >
-    <div class="page-container-grouped-styles overflow-auto">
+    <div class="page-container-grouped-styles overflow-auto vehicle-lookup">
       <SiteHeader
         cms-widget-name="SiteHeaderWidget"
       />
@@ -15,7 +15,7 @@
       <SiteSubHeader
         cms-widget-name="SiteSubHeaderWidget"
       />
-      <div class="fade-on-route-transition sub-container make-tall">
+      <div class="fade-on-route-transition sub-container make-tall container gx-0">
         <VinLookupMethods
           v-model="selectedVinLookupMethod"
           cms-widget-name="VINLookupMethod"
diff --git a/src/layouts/vin-lookup/vin-lookup.vue b/src/layouts/vin-lookup/vin-lookup.vue
index f9ebc96f..f0ed0719 100644
--- a/src/layouts/vin-lookup/vin-lookup.vue
+++ b/src/layouts/vin-lookup/vin-lookup.vue
@@ -16,8 +16,8 @@
       <siteSubHeader
         cmsWidgetName="SiteSubHeaderWidget"
       />
-      <div class="px-5">
-        <div class="fade-on-route-transition sub-container make-tall mt-5">
+      <div class="px-4">
+        <div class="fade-on-route-transition sub-container make-tall px-2 mt-5">
           <vinLookupAlerts
             :activeAlertType="activeVehicleLookupAlertType"
           />
diff --git a/src/layouts/welcome-page/welcome-page.vue b/src/layouts/welcome-page/welcome-page.vue
index e84f7431..5e41e40c 100644
--- a/src/layouts/welcome-page/welcome-page.vue
+++ b/src/layouts/welcome-page/welcome-page.vue
@@ -1,12 +1,12 @@
 <template>
 <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm"  v-slot="{ meta }" >
 
-    <div class="page-container-grouped-styles welcome">     
+    <div class="page-container-grouped-styles welcome">
         <siteHeader cmsWidgetName="SiteHeaderWidget"/>
-        <div class="fade-on-route-transition h-100 overflow-auto ">
-            
+        <div class="fade-on-route-transition h-100 overflow-auto container">
+
             <siteSubHeader cmsWidgetName="SiteSubHeaderWidget"/>
-            <div class="row mt-4 px-5">
+            <div class="row mt-4 px-3">
                 <div class="col">
                     <textboxQuestion
                         inputId="policyNumberField"
@@ -18,7 +18,7 @@
                         validationRules="policy-number-required" />
                 </div>
             </div>
-            <div class="row mt-4 px-5">
+            <div class="row mt-4 px-3">
                 <div class="col">
                     <textboxQuestion
                         type="date"
@@ -39,7 +39,7 @@
                     <textBlock cmsWidgetName="DamageDateEstimateWidget" typeStyle="caption" class="mt-2" />
                 </div>
             </div>
-            <div class="row mt-4 px-5">
+            <div class="row mt-4 px-3">
                 <div class="col">
                     <dropdownQuestion
                         cmsWidgetName="DamageCauseQuestion"
@@ -53,7 +53,7 @@
                     />
                 </div>
             </div>
-            <div class="row mt-4 px-5">
+            <div class="row mt-4 px-3">
                 <div class="col">
                     <textboxQuestion
                         inputId="damageCityField"
@@ -65,7 +65,7 @@
                         validationRules="loss-city-required" />
                 </div>
             </div>
-            <div class="row mt-4 px-5">
+            <div class="row mt-4 px-3">
                 <div class="col">
                     <dropdownQuestion
                         cmsWidgetName="DamageStateQuestion"
@@ -82,6 +82,7 @@
             </div>
             <div class="row mt-4">
                     <buttonQuestion
+                        class="px-0"
                         cmsWidgetName="GlassOnlyQuestion"
                         v-model="welcomePageModel.isDamageGlassOnly"
                         inputId = "isDamageGlassOnly"
@@ -93,7 +94,7 @@
                         ref="glassOnlyDamage"
                         disableAutoFill/>
             </div>
-            <div class="row mt-4 px-5">
+            <div class="row mt-4 px-3">
                 <div class="col">
                     <textboxQuestion
                         inputId="phoneNumberField"
@@ -106,7 +107,7 @@
                         disableAutoFill />
                 </div>
             </div>
-            <div class="row mt-4 px-5">
+            <div class="row mt-4 px-3">
                 <div class="col">
                     <textboxQuestion
                         inputId="emailField"
@@ -186,7 +187,7 @@
         },
         setup() {
             const mainStore = useMainStore();
-            
+
             // Set order account number from the issConfig.
             mainStore.order.accountNumber = mainStore.issConfig.accountNumber;
 
diff --git a/src/styles/common-error-styles.scss b/src/styles/common-error-styles.scss
index 5314138e..a6ffc252 100644
--- a/src/styles/common-error-styles.scss
+++ b/src/styles/common-error-styles.scss
@@ -159,6 +159,14 @@ html {
       font-size: 0.875rem;
       font-weight: 500;
   }
+  
+  .vehicle-damage,
+  .vehicle-lookup {
+      .form-test-error {
+          margin: 0;
+          padding: 0 .75rem;
+      }
+  }
 
   .form-test-invalid {
     &.btn.btn-primary {
diff --git a/src/styles/common-styles.scss b/src/styles/common-styles.scss
index bc9c682f..94913982 100644
--- a/src/styles/common-styles.scss
+++ b/src/styles/common-styles.scss
@@ -25,16 +25,17 @@ body {
     .container-fluid {
       overflow: hidden;
     }
-  
+
     .sub-container{
       &.make-tall {
         height: 100%;
         width: 100%;
         display: flex;
         flex-direction: column;
+        overflow-x: hidden;
       }
     }
-  
+
     .sr-only {
       position: absolute;
       left: -10000px;
@@ -43,11 +44,11 @@ body {
       height: 1px;
       overflow: hidden;
     }
-  
+
     .page-container-grouped-styles {
       @extend .container-fluid, .shadow, .rounded-3, .p-0, .position-relative, .make-tall;
     }
-  
+
     //Footer modal backdrop adjustments for positioning
     .modal-backdrop {
       left: 50%;
@@ -55,6 +56,5 @@ body {
       max-width: 576px;
       height: calc(100% - 72px);
     }
-  
+
   }
-  
\ No newline at end of file