From e218da2844d60df23798b815b4b0a096b1346e72 Mon Sep 17 00:00:00 2001
From: Kroell <Katie.Kroell@safelite.com>
Date: Tue, 4 Apr 2023 16:29:26 -0400
Subject: [PATCH] move styling from shared component to page-level

---
 .../button-question/button-question.vue       |  4 +-
 .../address-vehicles/address-vehicles.vue     | 74 ++++++++-----------
 src/layouts/vehicle-damage/vehicle-damage.vue |  2 +-
 src/layouts/vehicle-lookup/vehicle-lookup.vue |  2 +-
 4 files changed, 34 insertions(+), 48 deletions(-)

diff --git a/src/digital-components/button-question/button-question.vue b/src/digital-components/button-question/button-question.vue
index 03253171..63dde223 100644
--- a/src/digital-components/button-question/button-question.vue
+++ b/src/digital-components/button-question/button-question.vue
@@ -4,14 +4,14 @@
         :class="
             isOverflowScrollable ? 'button-question button-question-overflow' : 'button-question'
         ">
-        <div v-if="questionText && answers && answers.length > 0" class="question-text d-flex px-5" 
+        <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>
 
         <div class="w-100 d-flex justify-content-center">
             <fieldset
-                class="w-100 px-5"
+                class="w-100"
                 :aria-required="isRequired"
                 :class="getFieldSetClasses"
                 :role="isMultiSelect ? 'group' : 'radiogroup'"
diff --git a/src/layouts/address-vehicles/address-vehicles.vue b/src/layouts/address-vehicles/address-vehicles.vue
index 11c982da..5d1d09e9 100644
--- a/src/layouts/address-vehicles/address-vehicles.vue
+++ b/src/layouts/address-vehicles/address-vehicles.vue
@@ -3,18 +3,15 @@
     @submit="onSubmit"
     @invalidSubmit="onInvalidSubmit"
     ref="theForm"
-    v-slot="{ meta }"
-  >
-    <div class="page-container-grouped-styles ">
+    v-slot="{ meta }">
+    <div class="page-container-grouped-styles">
       <siteHeader cmsWidgetName="SiteHeaderWidget" />
-      <vehicleBanner
-        class="mb-3"
-        cmsWidgetName="VehicleBannerWidget"
-        :displayGenericVehicleImage="false"
-      />
-      <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
-
-      <div class="px-5 ">
+      <div class="fade-on-route-transition sub-container overflow-scroll px-5">
+        <vehicleBanner
+          class="mb-3"
+          cmsWidgetName="VehicleBannerWidget"
+          :displayGenericVehicleImage="false" />
+        <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
         <alert
           cmsWidgetName="FoundMultipleVehicles"
           ref="alertFoundMultipleVehicles"
@@ -23,27 +20,19 @@
           :manualHeadline="AlertFoundMultipleVehiclesHeader"
           manualCopy=""
           v-bind:isDismissible="false"
-          id="multiple-vehicles-alert"
-        />
-      </div>
-        <div class="overflow-scroll">
-      <addressVehiclesQuestion
-        ref="addressVehiclesQuestion"
-        cmsWidgetName="VehicleConfirmationQuestion"
-        :vehicles="VehiclesForQuestions"
-        :vehicleSelected ="VehicleSelected"
-        validationRules="vehicle-required"
-        v-model="selectedVehicleVin"
-        :isCarIdDifferent="isCarIdDifferent"
-        :displayMatchedDifferentVehicleAlert = "displayMatchedDifferentVehicleAlert"
-        :displayMatchedTwoIdenticalYMMVehicleAlert = "displayMatchedTwoIdenticalYMMVehicleAlert"
-      
-      />
-      
-      <div
-        class="alert-provide-vin my-3 px-5"
-        v-if="splitAlertProvideVinBodyForLink.length"
-      >
+          id="multiple-vehicles-alert" />
+        <addressVehiclesQuestion
+          ref="addressVehiclesQuestion"
+          cmsWidgetName="VehicleConfirmationQuestion"
+          :vehicles="VehiclesForQuestions"
+          :vehicleSelected ="VehicleSelected"
+          validationRules="vehicle-required"
+          v-model="selectedVehicleVin"
+          :isCarIdDifferent="isCarIdDifferent"
+          :displayMatchedDifferentVehicleAlert = "displayMatchedDifferentVehicleAlert"
+          :displayMatchedTwoIdenticalYMMVehicleAlert = "displayMatchedTwoIdenticalYMMVehicleAlert" />
+      <div class="alert-provide-vin my-3 px-5"
+        v-if="splitAlertProvideVinBodyForLink.length">
         <span v-for="copy in splitAlertProvideVinBodyForLink" :key="copy">
           <span v-if="doesCopyContainRouterLink(copy)" class="text-body">
             <router-link
@@ -51,21 +40,19 @@
                 query: { issPage: `${getRouterLinkRouteFromCopy(copy)}` },
                 name: 'root',
               }"
-              >{{ getRouterLinkDisplayTextFromCopy(copy) }}</router-link
-            >
+              >{{ getRouterLinkDisplayTextFromCopy(copy) }}</router-link >
           </span>
           <span v-else class="m-0 text-body" v-html="copy"></span>
         </span>
       </div>
+      <siteFooter
+        cmsWidgetName="SiteFooterWidget"
+        :isForwardActionDisabled="!meta.valid"
+        @backClicked="backButtonAction"
+        @forwardClicked="forwardButtonAction"
+        ref="siteFooter" />
+      </div>
     </div>
-  </div>
-    <siteFooter
-      cmsWidgetName="SiteFooterWidget"
-      :isForwardActionDisabled="!meta.valid"
-      @backClicked="backButtonAction"
-      @forwardClicked="forwardButtonAction"
-      ref="siteFooter"
-    />
   </Form>
 </template>
 
@@ -304,8 +291,7 @@ export default {
   margin-bottom: 0 !important; // Overrides extra margin-bottom on alert body text
 }
 .overflow-scroll {    
-    height: calc(100% - 432px);   
+    height: calc(100% - 180px);   
     overflow-X: hidden !important;
-   
 }
 </style>
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index 8d525fa7..41160435 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -2,7 +2,7 @@
     <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">
+            <div class="fade-on-route-transition sub-container overflow-scroll px-5">
                 <alert
                     ref="vehicleChangeAlert"
                     v-if="shouldDisplayVehicleChangeAlert"
diff --git a/src/layouts/vehicle-lookup/vehicle-lookup.vue b/src/layouts/vehicle-lookup/vehicle-lookup.vue
index 7c5b1ea8..45f603da 100644
--- a/src/layouts/vehicle-lookup/vehicle-lookup.vue
+++ b/src/layouts/vehicle-lookup/vehicle-lookup.vue
@@ -7,7 +7,7 @@
       <SiteHeader
         cms-widget-name="SiteHeaderWidget"
       />
-      <div class="fade-on-route-transition sub-container  overflow-scroll container gx-0">
+      <div class="fade-on-route-transition sub-container overflow-scroll container gx-0 px-5">
         <VehicleBanner
             class="mb-3"
             cms-widget-name="VehicleBannerWidget"