From 6828ae264dc6766266bd1c7b0732e3fa9ff7f2a0 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Thu, 21 Sep 2023 09:05:32 -0400
Subject: [PATCH] CSR-1593 fix address-vehicles page for responsive.

---
 .../address-vehicles/address-vehicles.vue     | 80 +++++++++++--------
 1 file changed, 47 insertions(+), 33 deletions(-)

diff --git a/src/layouts/address-vehicles/address-vehicles.vue b/src/layouts/address-vehicles/address-vehicles.vue
index 796649a40..910ec9c0a 100644
--- a/src/layouts/address-vehicles/address-vehicles.vue
+++ b/src/layouts/address-vehicles/address-vehicles.vue
@@ -1,38 +1,52 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
-        <div class="page-container-grouped-styles">
-            <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
-            <vehicleBanner
-                cmsWidgetName="VehicleBannerWidget"
-                :displayGenericVehicleImage="false" />
-            <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
-            <alert
-                ref="alertFoundMultipleVehicles"
-                class="my-5"
-                alertClass="alert-warning"
-                :manualHeadline="AlertFoundMultipleVehiclesHeader"
-                manualCopy=""
-                v-bind:isDismissible="false" />
-            <addressVehiclesQuestion
-                ref="addressVehiclesQuestion"
-                cmsWidgetName="VehicleConfirmationQuestion"
-                :vehicles="VehiclesForQuestions"
-                validationRules="vehicle-required"
-                v-model="selectedVehicleVin"
-                :isCarIdDifferent="isCarIdDifferent" />
-            <div class="alert-provide-vin" v-if="splitAlertProvideVinBodyForLink.length">
-                <textBlock
-                    :customText="AlertProvideVinBody"
-                    justifyText="left"
-                    class="mb-3"
-                    marginTopSizeOverride="3" />
+        <div class="container-fluid">
+            <div class="row">
+                <div class="col">
+                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
+                </div>
+            </div>
+            <div class="row justify-content-md-center">
+                <div class="col-md-6 col-xl-4">
+                    <vehicleBanner
+                    cmsWidgetName="VehicleBannerWidget"
+                    :displayGenericVehicleImage="false" />
+
+                    <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
+
+                    <alert
+                    ref="alertFoundMultipleVehicles"
+                    class="my-5"
+                    alertClass="alert-warning"
+                    :manualHeadline="AlertFoundMultipleVehiclesHeader"
+                    manualCopy=""
+                    v-bind:isDismissible="false" />
+
+                    <addressVehiclesQuestion
+                    ref="addressVehiclesQuestion"
+                    cmsWidgetName="VehicleConfirmationQuestion"
+                    :vehicles="VehiclesForQuestions"
+                    validationRules="vehicle-required"
+                    v-model="selectedVehicleVin"
+                    :isCarIdDifferent="isCarIdDifferent" />
+
+                    <div class="alert-provide-vin" v-if="splitAlertProvideVinBodyForLink.length">
+                        <textBlock
+                        :customText="AlertProvideVinBody"
+                        justifyText="left"
+                        class="mb-3"
+                        marginTopSizeOverride="3" />
+
+                    </div>
+
+                    <navbar
+                    cmsWidgetName="FunnelFooterWidget"
+                    ref="navbar"
+                    :isForwardActionDisabled="!meta.valid"
+                    @back-clicked="backButtonAction"
+                    @ForwardClicked="forwardButtonAction" />
+                </div>
             </div>
-            <navbar
-                cmsWidgetName="FunnelFooterWidget"
-                ref="navbar"
-                :isForwardActionDisabled="!meta.valid"
-                @back-clicked="backButtonAction"
-                @ForwardClicked="forwardButtonAction" />
         </div>
     </Form>
 </template>
@@ -208,7 +222,7 @@ export default {
             handler() {
                 // does this vehicle match the previously selected carId?
                 this.isCarIdDifferent =
-                    this.selectedVehicle?.vehicle.carId !== store.getters.vehicle.carId;
+                this.selectedVehicle?.vehicle.carId !== store.getters.vehicle.carId;
                 if (this.isCarIdDifferent) {
                     this.$refs.navbar.updateButtonText(
                         `Continue with ${this.selectedVehicle.vehicle.year} ${this.selectedVehicle.vehicle.make} ${this.selectedVehicle.vehicle.model}`