From 30419e2eeec0cb0ca4b7b26801ce763f4981bca8 Mon Sep 17 00:00:00 2001
From: Scott Kiener <scott.kiener@safelite.com>
Date: Thu, 5 May 2022 15:47:37 -0400
Subject: [PATCH] Auto stash before merge of "feature/CSR-240" and
 "origin/develop"

---
 .../button-question/button-question.vue       |   2 +-
 src/layouts/address-lookup/address-lookup.vue |  87 ++++-----
 src/layouts/estimate/estimate.vue             |  38 ++--
 src/layouts/part-questions/part-questions.vue |  10 +-
 src/layouts/vehicle-damage/vehicle-damage.vue | 104 +++++-----
 .../make-question/make-question.vue           |   2 -
 src/layouts/vehicle-make/vehicle-make.vue     |   6 +-
 src/layouts/vehicle-model/vehicle-model.vue   |   6 +-
 src/layouts/vehicle-parts/vehicle-parts.vue   |  48 ++---
 src/layouts/vehicle-style/vehicle-style.vue   |   6 +-
 src/layouts/vehicle-year/vehicle-year.vue     |  16 +-
 src/layouts/vin-lookup/vin-lookup.vue         | 180 +++++++++---------
 src/styles/common-styles.scss                 |   9 +
 13 files changed, 269 insertions(+), 245 deletions(-)

diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index 7fba59c51..bd6ce8b22 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -162,7 +162,7 @@ export default {
 
 <style lang="scss" scoped>
 .button-question-overflow {
-  height: calc(100vh - 266px);
+  height: calc(100vh - 274px);
 
   .overflow-scroll {
     // Height will be determined by overall height of content above list
diff --git a/src/layouts/address-lookup/address-lookup.vue b/src/layouts/address-lookup/address-lookup.vue
index 032b42268..6d0240ae0 100644
--- a/src/layouts/address-lookup/address-lookup.vue
+++ b/src/layouts/address-lookup/address-lookup.vue
@@ -8,51 +8,52 @@
 		<div class="container-fluid shadow rounded-3 p-2 position-relative make-tall px-5">
 			<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
 			<vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=false />
-			<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" ref="funnelSubHeader" />		
-			<customerQuestions ref="customerQuestions" v-model="customerQuestions" />
-			<alert ref="alertVinNotFound" v-show="displayVinNotFoundAlert"
-				class="my-3"
-				cmsWidgetName="AlertVinNotFoundWidget"
-				alertClass="alert-danger"
-				v-bind:isDismissible="false"
-			/>
-			<alert ref="alertMatchedDifferentVehicle" v-show="displayMatchedDifferentVehicleAlert"
-				class="my-3"
-				:manualHeadline="AlertMatchedDifferentVehicleHeader"
-				:manualCopy="AlertMatchedDifferentVehicleBody"
-				alertClass="alert-warning"
-				v-bind:isDismissible="false"
-			/>			
-			<alert ref="alertNonServiceableZip" v-show="displayNonServiceableZipAlert"
-				class="my-3"
-				alertClass="alert-danger"
-				:manualHeadline="AlertNonServiceableZipHeader"
-				:manualCopy="AlertNonServiceableZipBody"
-				v-bind:isDismissible="false"
-			/>			
-			<alert ref="alertVinLookupsByHomeAddressNotAllowed" v-show="displayVinLookupByHomeAddressNotAllowedAlert"
-				class="my-3"
-				cmsWidgetName="AlertVinLookupsByHomeAddressNotAllowedWidget"
-				alertClass="alert-danger"
-				v-bind:isDismissible="false"
-			/>
-			<transition name="fade" mode="out-in">
-				<div class="service-zip-field" v-if="showServiceZipField" aria-live="polite">
-					<div class="row my-4">
-						<div class="col">
-							<textboxQuestion cmsWidgetName="ServiceZipQuestionWidget" v-model="serviceZip" ref="serviceZip" inputId="7add1b26df344f2caf1678de5797803f" aria-haspopup="" mask="#####" disableAutoFill validationRules="service-zip-required|service-zip-format" />
+			<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" ref="funnelSubHeader" />	
+			<div class="fade-on-route-transition sub-container make-tall">
+				<customerQuestions ref="customerQuestions" v-model="customerQuestions" />
+				<alert ref="alertVinNotFound" v-show="displayVinNotFoundAlert"
+					class="my-3"
+					cmsWidgetName="AlertVinNotFoundWidget"
+					alertClass="alert-danger"
+					v-bind:isDismissible="false"
+				/>
+				<alert ref="alertMatchedDifferentVehicle" v-show="displayMatchedDifferentVehicleAlert"
+					class="my-3"
+					:manualHeadline="AlertMatchedDifferentVehicleHeader"
+					:manualCopy="AlertMatchedDifferentVehicleBody"
+					alertClass="alert-warning"
+					v-bind:isDismissible="false"
+				/>			
+				<alert ref="alertNonServiceableZip" v-show="displayNonServiceableZipAlert"
+					class="my-3"
+					alertClass="alert-danger"
+					:manualHeadline="AlertNonServiceableZipHeader"
+					:manualCopy="AlertNonServiceableZipBody"
+					v-bind:isDismissible="false"
+				/>			
+				<alert ref="alertVinLookupsByHomeAddressNotAllowed" v-show="displayVinLookupByHomeAddressNotAllowedAlert"
+					class="my-3"
+					cmsWidgetName="AlertVinLookupsByHomeAddressNotAllowedWidget"
+					alertClass="alert-danger"
+					v-bind:isDismissible="false"
+				/>
+				<transition name="fade" mode="out-in">
+					<div class="service-zip-field" v-if="showServiceZipField" aria-live="polite">
+						<div class="row my-4">
+							<div class="col">
+								<textboxQuestion cmsWidgetName="ServiceZipQuestionWidget" v-model="serviceZip" ref="serviceZip" inputId="7add1b26df344f2caf1678de5797803f" aria-haspopup="" mask="#####" disableAutoFill validationRules="service-zip-required|service-zip-format" />
+							</div>
 						</div>
 					</div>
-				</div>
-			</transition>								
-			<funnel-footer
-				cmsWidgetName="FunnelFooterWidget"
-				ref="funnelFooter"
-				:isDisabled="!meta.valid"
-				@ForwardClicked="forwardButtonAction"
-				:isForwardActionDisabled="!meta.valid"
-			/>
-			
+				</transition>								
+				<funnel-footer
+					cmsWidgetName="FunnelFooterWidget"
+					ref="funnelFooter"
+					:isDisabled="!meta.valid"
+					@ForwardClicked="forwardButtonAction"
+					:isForwardActionDisabled="!meta.valid"
+				/>
+			</div>	
 		</div>
 	</Form>
 </template>
diff --git a/src/layouts/estimate/estimate.vue b/src/layouts/estimate/estimate.vue
index b46c38801..ea2eee176 100644
--- a/src/layouts/estimate/estimate.vue
+++ b/src/layouts/estimate/estimate.vue
@@ -9,25 +9,25 @@
       <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
       <vehicleBanner cmsWidgetName="VehicleBannerWidget" />
       <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
-      <buttonQuestion
-        cmsWidgetName="VinLookupMethod"
-        class="button-question-overflow"
-        :questionText="questionText"
-        :answers="answersFromCms"
-        groupName="vinLookupMethodOption"
-        buttonType="listButton"
-        v-model="selectedValues"
-        isRequired
-        validationRules="option-required"
-      />
-
-      <funnel-footer
-        cmsWidgetName="FunnelFooterWidget"
-        :isForwardActionDisabled="!meta.valid"
-        @isDisabled="!meta.valid"
-        @back-clicked="backButtonAction"
-        @ForwardClicked="forwardButtonAction"
-      />
+      <div class="fade-on-route-transition sub-container make-tall">
+        <buttonQuestion
+          cmsWidgetName="VinLookupMethod"
+          :questionText="questionText"
+          :answers="answersFromCms"
+          groupName="vinLookupMethodOption"
+          buttonType="listButton"
+          v-model="selectedValues"
+          isRequired
+          validationRules="option-required"
+        />
+        <funnel-footer
+          cmsWidgetName="FunnelFooterWidget"
+          :isForwardActionDisabled="!meta.valid"
+          @isDisabled="!meta.valid"
+          @back-clicked="backButtonAction"
+          @ForwardClicked="forwardButtonAction"
+        />
+      </div>
     </div>
   </Form>
 </template>
diff --git a/src/layouts/part-questions/part-questions.vue b/src/layouts/part-questions/part-questions.vue
index 0818bb46f..d0791262c 100644
--- a/src/layouts/part-questions/part-questions.vue
+++ b/src/layouts/part-questions/part-questions.vue
@@ -3,10 +3,12 @@
     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
     <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage=false />
     <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
-    <h1>Part Questions Page Placeholder</h1>
-    <funnel-footer
-            cmsWidgetName="FunnelFooterWidget" @back-clicked="backButtonAction"
-    />
+    <div class="fade-on-route-transition sub-container make-tall">
+        <h1>Part Questions Page Placeholder</h1>
+        <funnel-footer
+                cmsWidgetName="FunnelFooterWidget" @back-clicked="backButtonAction"
+        />
+    </div>
 </div>
 </template>
 
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index b3f89f833..f52a71671 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -9,57 +9,59 @@
         <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
         <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage=false />
         <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
-        <alert
-          ref="vehicleChangeAlert"
-          class="mt-5 mb-0"
-          cmsWidgetName="VehicleChangeAlert"
-          v-show="shouldDisplayVehicleChangeAlert"
-          alertClass="alert-warning"
-          :isDismissible="false"
-        />
-        <damageLocationQuestion
-          ref="damageLocation"
-          cmsWidgetName="DamageLocationQuestion"
-          v-model="selectedDamageLocations"
-          groupName="DamageLocationQuestion"
-        />
-        <windshieldOptions
-          ref="windshieldOptions"
-          v-model="selectedWindshieldOptions"
-          :hasRepairReplaceConflict="hasRepairReplaceConflict"
-          :hasSplitSingleConflict="hasSplitSingleConflict"
-          :selectedDamageLocations="selectedDamageLocations"
-        />
-        <alert
-          class="my-3"
-          cmsWidgetName="HasReplacementConflict"
-          v-show="hasRepairReplaceConflict"
-          alertClass="alert-danger"
-          :isDismissible="false"
-        />
-        <sideDoorOptions
-          ref="sideDoorOptions"
-          cmsWidgetName="SideDoorSideQuestion"
-          groupName="SideDoorSideQuestion"
-          v-model="sideDoorOptionsData"
-          v-show="!hasRepairReplaceConflict"
-          :selectedDamageLocations="selectedDamageLocations"
-        />
-        <replaceOptionsQuestion
-          ref="backGlassOptions"
-          cmsWidgetName="RearReplaceOptionsQuestion"
-          :isAvailable="isRearWindowDamageLocation && !hasRepairReplaceConflict"
-          v-model="selectedRearReplaceOptions"
-          groupName="BackGlassReplaceOptionsQuestion"
-          validationRules="replace-options-required"
-        />
-        <funnel-footer
-          cmsWidgetName="FunnelFooterWidget"
-          :isForwardActionDisabled="!meta.valid"
-          :isBackButtonHidden=shouldHideBackButton
-          @back-clicked="backButtonAction"
-          @ForwardClicked="forwardButtonAction"
-        />
+        <div class="fade-on-route-transition sub-container make-tall">
+          <alert
+            ref="vehicleChangeAlert"
+            class="mt-5 mb-0"
+            cmsWidgetName="VehicleChangeAlert"
+            v-show="shouldDisplayVehicleChangeAlert"
+            alertClass="alert-warning"
+            :isDismissible="false"
+          />
+          <damageLocationQuestion
+            ref="damageLocation"
+            cmsWidgetName="DamageLocationQuestion"
+            v-model="selectedDamageLocations"
+            groupName="DamageLocationQuestion"
+          />
+          <windshieldOptions
+            ref="windshieldOptions"
+            v-model="selectedWindshieldOptions"
+            :hasRepairReplaceConflict="hasRepairReplaceConflict"
+            :hasSplitSingleConflict="hasSplitSingleConflict"
+            :selectedDamageLocations="selectedDamageLocations"
+          />
+          <alert
+            class="my-3"
+            cmsWidgetName="HasReplacementConflict"
+            v-show="hasRepairReplaceConflict"
+            alertClass="alert-danger"
+            :isDismissible="false"
+          />
+          <sideDoorOptions
+            ref="sideDoorOptions"
+            cmsWidgetName="SideDoorSideQuestion"
+            groupName="SideDoorSideQuestion"
+            v-model="sideDoorOptionsData"
+            v-show="!hasRepairReplaceConflict"
+            :selectedDamageLocations="selectedDamageLocations"
+          />
+          <replaceOptionsQuestion
+            ref="backGlassOptions"
+            cmsWidgetName="RearReplaceOptionsQuestion"
+            :isAvailable="isRearWindowDamageLocation && !hasRepairReplaceConflict"
+            v-model="selectedRearReplaceOptions"
+            groupName="BackGlassReplaceOptionsQuestion"
+            validationRules="replace-options-required"
+          />
+          <funnel-footer
+            cmsWidgetName="FunnelFooterWidget"
+            :isForwardActionDisabled="!meta.valid"
+            :isBackButtonHidden=shouldHideBackButton
+            @back-clicked="backButtonAction"
+            @ForwardClicked="forwardButtonAction"
+          />
+        </div>
       </div>
     </Form>
 </template>
diff --git a/src/layouts/vehicle-make/make-question/make-question.vue b/src/layouts/vehicle-make/make-question/make-question.vue
index aa19a444b..26a17955c 100644
--- a/src/layouts/vehicle-make/make-question/make-question.vue
+++ b/src/layouts/vehicle-make/make-question/make-question.vue
@@ -1,7 +1,6 @@
 <template>
   <buttonQuestion
     class="radioQuestion" 
-    :class="{'fade-on-route-transition': this.fadeOnRouteTransition}"
     isOverflowScrollable
     selectingInitiatesLoad
     :questionText="questionText"
@@ -30,7 +29,6 @@ export default {
   props: {
     modelValue: String,
     cmsWidgetName: String,
-    fadeOnRouteTransition: Boolean,
   },
   computed: {
     questionText(){
diff --git a/src/layouts/vehicle-make/vehicle-make.vue b/src/layouts/vehicle-make/vehicle-make.vue
index edd95db05..0b578e852 100644
--- a/src/layouts/vehicle-make/vehicle-make.vue
+++ b/src/layouts/vehicle-make/vehicle-make.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="container-fluid shadow rounded-3 p-0 position-relative make-tall">
+  <div class="container-fluid shadow rounded-3 p-2 position-relative make-tall px-5">
     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
     <div class="select-car">
       <div class="select-car-form rounded text-center">
@@ -10,7 +10,9 @@
             backButtonAccessibleText="Change Vehicle Year"
             @click-event="backButtonAction"
         />
-        <makeQuestion v-model="selectedMake" ref="makeQuestion" cmsWidgetName="VehicleMakeQuestion" fadeOnRouteTransition />
+        <div class="fade-on-route-transition">
+          <makeQuestion v-model="selectedMake" ref="makeQuestion" cmsWidgetName="VehicleMakeQuestion" />
+        </div>
       </div>
     </div>
   </div>
diff --git a/src/layouts/vehicle-model/vehicle-model.vue b/src/layouts/vehicle-model/vehicle-model.vue
index 6f57b5140..06fe56356 100644
--- a/src/layouts/vehicle-model/vehicle-model.vue
+++ b/src/layouts/vehicle-model/vehicle-model.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="container-fluid shadow rounded-3 p-0 position-relative">
+  <div class="container-fluid shadow rounded-3 p-2 position-relative make-tall px-5">
     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
     <div class="select-car">
       <div class="select-car-form rounded text-center">
@@ -10,7 +10,9 @@
           backButtonAccessibleText="Change Vehicle Make"
           @click-event="backButtonAction"
         />
-        <modelQuestion v-model="selectedModel" ref="modelQuestion" cmsWidgetName="VehicleModelQuestion" />
+        <div class="fade-on-route-transition">
+          <modelQuestion v-model="selectedModel" ref="modelQuestion" cmsWidgetName="VehicleModelQuestion" />
+        </div>
       </div>
     </div>
   </div>
diff --git a/src/layouts/vehicle-parts/vehicle-parts.vue b/src/layouts/vehicle-parts/vehicle-parts.vue
index 25291d218..d95a6b143 100644
--- a/src/layouts/vehicle-parts/vehicle-parts.vue
+++ b/src/layouts/vehicle-parts/vehicle-parts.vue
@@ -3,34 +3,36 @@
     <funnelHeader ref="funnelHeader" cmsWidgetName="FunnelHeaderWidget" />
     <vehicleBanner ref="vehicleBanner" cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
     <funnelSubHeader ref="funnelSubHeader" cmsWidgetName="FunnelSubHeaderWidget" />
-    <div class="container-fluid prevent-squish my-5">
-      <div class="row">
-        <div class="col">
-          <alert
-            class="rounded border-0 shadow-sm"
-            alertClass="alert-warning"
-            cmsWidgetName="AlertWidget"
-            :isDismissible="false"
-          />
+    <div class="fade-on-route-transition sub-container make-tall">
+      <div class="container-fluid prevent-squish my-5">
+        <div class="row">
+          <div class="col">
+            <alert
+              class="rounded border-0 shadow-sm"
+              alertClass="alert-warning"
+              cmsWidgetName="AlertWidget"
+              :isDismissible="false"
+            />
+          </div>
         </div>
       </div>
-    </div>
 
-    <div v-for="(item, i) in PartsForQuestions" :key="i">
-      <!-- Render horizontal lines if there is multi-glass (aka if i > 0) -->
-      <div class="container-fluid">
-        <hr v-if="i > 0" />
+      <div v-for="(item, i) in PartsForQuestions" :key="i">
+        <!-- Render horizontal lines if there is multi-glass (aka if i > 0) -->
+        <div class="container-fluid">
+          <hr v-if="i > 0" />
+        </div>
+
+        <glassPartQuestion
+          :ref="`${RefPrefix}-${item.glassLocation}-${item.glassName}`"
+          v-model="glassParts[item.glassLocation + '-' + item.glassName]"
+          :glassLocation="item.glassLocation"
+          :glassName="item.glassName"
+          :colorAnswers="item.colorAnswers"
+        />
       </div>
-
-      <glassPartQuestion
-        :ref="`${RefPrefix}-${item.glassLocation}-${item.glassName}`"
-        v-model="glassParts[item.glassLocation + '-' + item.glassName]"
-        :glassLocation="item.glassLocation"
-        :glassName="item.glassName"
-        :colorAnswers="item.colorAnswers"
-      />
+      <funnelFooter cmsWidgetName="FunnelFooterWidget" ref="funnelFooter" @back-clicked="backButtonAction" @ForwardClicked="forwardButtonAction" />
     </div>
-    <funnelFooter cmsWidgetName="FunnelFooterWidget" ref="funnelFooter" @back-clicked="backButtonAction" @ForwardClicked="forwardButtonAction" />
 </div>
 </template>
 
diff --git a/src/layouts/vehicle-style/vehicle-style.vue b/src/layouts/vehicle-style/vehicle-style.vue
index 8bb542154..97e4b5955 100644
--- a/src/layouts/vehicle-style/vehicle-style.vue
+++ b/src/layouts/vehicle-style/vehicle-style.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="container-fluid shadow rounded-3 p-0 position-relative">
+  <div class="container-fluid shadow rounded-3 p-2 position-relative make-tall px-5">
     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
     <div class="select-car">
       <div class="select-car-form rounded text-center">
@@ -10,7 +10,9 @@
           backButtonAccessibleText="Change Vehicle Model"
           @click-event="backButtonAction"
         />
-        <styleQuestion v-model="selectedStyle" ref="styleQuestion" cmsWidgetName="VehicleStyleQuestion" />
+        <div class="fade-on-route-transition">
+          <styleQuestion v-model="selectedStyle" ref="styleQuestion" cmsWidgetName="VehicleStyleQuestion" />
+        </div>
       </div>
     </div>
   </div>
diff --git a/src/layouts/vehicle-year/vehicle-year.vue b/src/layouts/vehicle-year/vehicle-year.vue
index 8cc521a4a..2c9dc92b1 100644
--- a/src/layouts/vehicle-year/vehicle-year.vue
+++ b/src/layouts/vehicle-year/vehicle-year.vue
@@ -1,16 +1,18 @@
 <template>
-  <div class="container-fluid shadow rounded-3 p-0 position-relative">
+  <div class="container-fluid shadow rounded-3 p-2 position-relative make-tall px-5">
     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
     <div class="select-car">
       <div class="select-car-form rounded text-center">
         <vehicleBanner cmsWidgetName="VehicleBannerWidget" displayGenericVehicleImage />
         <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
-        <yearQuestion 
-          class="fade-on-route-transition"
-          v-model="selectedYear" 
-          ref="yearQuestion" 
-          cmsWidgetName="VehicleYearQuestion" 
-        />
+        <div class="fade-on-route-transition">
+          <yearQuestion 
+            class="fade-on-route-transition"
+            v-model="selectedYear" 
+            ref="yearQuestion" 
+            cmsWidgetName="VehicleYearQuestion" 
+          />
+        </div>
       </div>
     </div>
   </div>
diff --git a/src/layouts/vin-lookup/vin-lookup.vue b/src/layouts/vin-lookup/vin-lookup.vue
index 4842a8eb6..ccd462614 100644
--- a/src/layouts/vin-lookup/vin-lookup.vue
+++ b/src/layouts/vin-lookup/vin-lookup.vue
@@ -14,100 +14,102 @@
         :displayGenericVehicleImage="false"
       />
       <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
-      <div class="row my-2">
-        <div class="col">
-          <textboxQuestion
-            cmsWidgetName="VinNumber"
-            v-model="vin"
-            inputId="vin"
-            isRequired
-            disableAutoFill
-            validationRules="vin-required|vin-format"
-            :isDisabled="isVinFieldReadOnly"
-          />
+      <div class="fade-on-route-transition sub-container make-tall">
+        <div class="row my-2">
+          <div class="col">
+            <textboxQuestion
+              cmsWidgetName="VinNumber"
+              v-model="vin"
+              inputId="vin"
+              isRequired
+              disableAutoFill
+              validationRules="vin-required|vin-format"
+              :isDisabled="isVinFieldReadOnly"
+            />
+          </div>
         </div>
-      </div>
-      <div class="row my-2">
-        <div class="col">
-          <vinInformation />
+        <div class="row my-2">
+          <div class="col">
+            <vinInformation />
+          </div>
         </div>
-      </div>
-      <div class="row my-2">
-        <div class="col">
-          <textboxQuestion
-            cmsWidgetName="ServiceZIP"
-            v-model="zip"
-            inputId="zip"
-            mask="#####"
-            isRequired
-            disableAutoFill
-            validationRules="zip-required"
-          />
+        <div class="row my-2">
+          <div class="col">
+            <textboxQuestion
+              cmsWidgetName="ServiceZIP"
+              v-model="zip"
+              inputId="zip"
+              mask="#####"
+              isRequired
+              disableAutoFill
+              validationRules="zip-required"
+            />
+          </div>
         </div>
-      </div>
-      <div class="row my-2">
-        <div class="col">
-          <textboxQuestion
-            cmsWidgetName="EmailAddress"
-            v-model="email"
-            inputId="email"
-            isRequired
-            disableAutoFill
-            validationRules="email-address-required|email-address-format"
-          />
+        <div class="row my-2">
+          <div class="col">
+            <textboxQuestion
+              cmsWidgetName="EmailAddress"
+              v-model="email"
+              inputId="email"
+              isRequired
+              disableAutoFill
+              validationRules="email-address-required|email-address-format"
+            />
+          </div>
         </div>
+        <alert
+          class="my-3"
+          :manualHeadline="MatchedDifferentVehicleAlertHeader"
+          :manualCopy="MatchedDifferentVehicleAlertBody"
+          v-model="customAlertData"
+          v-if="matchedDifferentVehicle"
+          alertClass="alert-danger"
+        />
+        <alert
+          class="my-3"
+          v-model="customAlertData"
+          v-if="noMatchAlert"
+          alertClass="alert-warning"
+          cmsWidgetName="NoMatchAlertWidget"
+        />
+        <alert
+          class="my-3"
+          :manualHeadline="NoServiceZipHeader"
+          :manualCopy="NoServiceZipBody"
+          v-model="customAlertData"
+          v-if="noServiceZip"
+          alertClass="alert-warning"
+        />
+        <alert
+          class="my-3"
+          v-model="customAlertData"
+          v-if="foundWindshieldAlert"
+          alertClass="alert-warning"
+          cmsWidgetName="FoundWindshieldAlert"
+        />
+        <alert
+          class="my-3"
+          v-model="customAlertData"
+          v-if="vinNotFound"
+          alertClass="alert-warning"
+          cmsWidgetName="VinNotFound"
+        />
+        <alert
+          class="my-3"
+          v-model="customAlertData"
+          v-if="perfectMatchNewVinAlert"
+          alertClass="alert-warning"
+          cmsWidgetName="PerfectMatchNewVinAlert"
+        />
+        <funnelFooter
+          cmsWidgetName="FunnelFooterWidget"
+          ref="funnelFooter"
+          :isForwardActionDisabled="!meta.valid"
+          @back-clicked="backButtonAction"
+          @ForwardClicked="forwardButtonAction"
+        />
       </div>
-      <alert
-        class="my-3"
-        :manualHeadline="MatchedDifferentVehicleAlertHeader"
-        :manualCopy="MatchedDifferentVehicleAlertBody"
-        v-model="customAlertData"
-        v-if="matchedDifferentVehicle"
-        alertClass="alert-danger"
-      />
-      <alert
-        class="my-3"
-        v-model="customAlertData"
-        v-if="noMatchAlert"
-        alertClass="alert-warning"
-        cmsWidgetName="NoMatchAlertWidget"
-      />
-      <alert
-        class="my-3"
-        :manualHeadline="NoServiceZipHeader"
-        :manualCopy="NoServiceZipBody"
-        v-model="customAlertData"
-        v-if="noServiceZip"
-        alertClass="alert-warning"
-      />
-      <alert
-        class="my-3"
-        v-model="customAlertData"
-        v-if="foundWindshieldAlert"
-        alertClass="alert-warning"
-        cmsWidgetName="FoundWindshieldAlert"
-      />
-      <alert
-        class="my-3"
-        v-model="customAlertData"
-        v-if="vinNotFound"
-        alertClass="alert-warning"
-        cmsWidgetName="VinNotFound"
-      />
-      <alert
-        class="my-3"
-        v-model="customAlertData"
-        v-if="perfectMatchNewVinAlert"
-        alertClass="alert-warning"
-        cmsWidgetName="PerfectMatchNewVinAlert"
-      />
-      <funnelFooter
-        cmsWidgetName="FunnelFooterWidget"
-        ref="funnelFooter"
-        :isForwardActionDisabled="!meta.valid"
-        @back-clicked="backButtonAction"
-        @ForwardClicked="forwardButtonAction"
-      />
     </div>
   </Form>
 </template>
diff --git a/src/styles/common-styles.scss b/src/styles/common-styles.scss
index 2b2fde4c4..50a9f92b7 100644
--- a/src/styles/common-styles.scss
+++ b/src/styles/common-styles.scss
@@ -26,6 +26,15 @@ body {
     overflow-x: hidden;
   }
 
+  .sub-container{
+    &.make-tall {
+      height: 100vh;
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+    }
+  }
+
   .sr-only {
     position: absolute;
     left: -10000px;