move styling from shared component to page-level

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'"

src/layouts/address-vehicles/address-vehicles.vue

@@ -3,18 +3,15 @@
     @submit="onSubmit"
     @invalidSubmit="onInvalidSubmit"
     ref="theForm"
-    v-slot="{ meta }"
+    v-slot="{ meta }">
-  >
+    <div class="page-container-grouped-styles">
-    <div class="page-container-grouped-styles ">
       <siteHeader cmsWidgetName="SiteHeaderWidget" />
-      <vehicleBanner
+      <div class="fade-on-route-transition sub-container overflow-scroll px-5">
-        class="mb-3"
+        <vehicleBanner
-        cmsWidgetName="VehicleBannerWidget"
+          class="mb-3"
-        :displayGenericVehicleImage="false"
+          cmsWidgetName="VehicleBannerWidget"
-      />
+          :displayGenericVehicleImage="false" />
-      <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
+        <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
-
-      <div class="px-5 ">
         <alert
           cmsWidgetName="FoundMultipleVehicles"
           ref="alertFoundMultipleVehicles"
@@ -23,27 +20,19 @@
           :manualHeadline="AlertFoundMultipleVehiclesHeader"
           manualCopy=""
           v-bind:isDismissible="false"
-          id="multiple-vehicles-alert"
+          id="multiple-vehicles-alert" />
-        />
+        <addressVehiclesQuestion
-      </div>
+          ref="addressVehiclesQuestion"
-        <div class="overflow-scroll">
+          cmsWidgetName="VehicleConfirmationQuestion"
-      <addressVehiclesQuestion
+          :vehicles="VehiclesForQuestions"
-        ref="addressVehiclesQuestion"
+          :vehicleSelected ="VehicleSelected"
-        cmsWidgetName="VehicleConfirmationQuestion"
+          validationRules="vehicle-required"
-        :vehicles="VehiclesForQuestions"
+          v-model="selectedVehicleVin"
-        :vehicleSelected ="VehicleSelected"
+          :isCarIdDifferent="isCarIdDifferent"
-        validationRules="vehicle-required"
+          :displayMatchedDifferentVehicleAlert = "displayMatchedDifferentVehicleAlert"
-        v-model="selectedVehicleVin"
+          :displayMatchedTwoIdenticalYMMVehicleAlert = "displayMatchedTwoIdenticalYMMVehicleAlert" />
-        :isCarIdDifferent="isCarIdDifferent"
+      <div class="alert-provide-vin my-3 px-5"
-        :displayMatchedDifferentVehicleAlert = "displayMatchedDifferentVehicleAlert"
+        v-if="splitAlertProvideVinBodyForLink.length">
-        :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>

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"

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"