From 2d1815dece5e9372607e7407a67e0fb063ac8f7b Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Thu, 5 Oct 2023 09:39:21 -0400
Subject: [PATCH] WIP Desktop updates.

---
 .../button-question/button-question.vue                  | 2 +-
 .../questions-page-layout/questions-page-layout.vue      | 9 ++++++---
 src/layouts/address-lookup/address-lookup.vue            | 2 +-
 src/layouts/address-vehicles/address-vehicles.vue        | 2 +-
 src/layouts/customer-details/customer-details.vue        | 4 ++--
 src/layouts/estimate/estimate.vue                        | 2 +-
 .../license-plate-lookup/license-plate-lookup.vue        | 2 +-
 src/layouts/payment-method/payment-method.vue            | 2 +-
 src/layouts/quote/quote.vue                              | 4 ++--
 src/layouts/review/review.vue                            | 4 ++--
 src/layouts/schedule/schedule.vue                        | 4 ++--
 src/layouts/service-location/service-location.vue        | 4 ++--
 src/layouts/vehicle-damage/vehicle-damage.vue            | 6 +++---
 src/layouts/vehicle-parts/vehicle-parts.vue              | 6 +++++-
 src/layouts/vehicle/vehicle.vue                          | 4 ++--
 src/layouts/vin-lookup/vin-lookup.vue                    | 4 ++--
 src/styles/common-styles.scss                            | 2 +-
 src/styles/ux-variables.scss                             | 1 +
 18 files changed, 36 insertions(+), 28 deletions(-)

diff --git a/src/digital-components/button-question/button-question.vue b/src/digital-components/button-question/button-question.vue
index 8c7bbe933..0ec85f65e 100644
--- a/src/digital-components/button-question/button-question.vue
+++ b/src/digital-components/button-question/button-question.vue
@@ -192,7 +192,7 @@ export default {
                     classes = "d-flex flex-row p-0";
                     break;
                 case "listCard":
-                    classes = "row g-2 g-md-5 justify-content-center mb-1";
+                    classes = "row g-2 g-md-5 justify-content-center mb-1 flex-nowrap";
                     if (this.isWide) {
                         classes += "flex-column";
                     }
diff --git a/src/fmg-components/layouts/questions-page-layout/questions-page-layout.vue b/src/fmg-components/layouts/questions-page-layout/questions-page-layout.vue
index 595068b2a..25aa21dd5 100644
--- a/src/fmg-components/layouts/questions-page-layout/questions-page-layout.vue
+++ b/src/fmg-components/layouts/questions-page-layout/questions-page-layout.vue
@@ -1,14 +1,14 @@
 <template>
     <div :class="`questions-page`">
         <loadingModal ref="loadingModal" />
-        <div class="container page-container-grouped-styles">
+        <div class="container-fluid page-container-grouped-styles">
             <div class="row justify-content-center">
                 <div class="col-md-6">
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
                 </div>
             </div>
             <div class="row justify-content-md-center">
-                <div class="col-md-6 col-xl-4">
+                <div class="col-md-6">
                     <vehicleBanner
                         cmsWidgetName="VehicleBannerWidget"
                         :displayGenericVehicleImage="false" />
@@ -23,7 +23,10 @@
                         :manualHeadline="alertFewMoreQuestionsHeader"
                         :manualCopy="alertFewMoreQuestionsCopy"
                         v-bind:isDismissible="false" />
-
+                    </div>
+                </div>
+                <div class="row justify-content-md-center">
+                    <div class="col-md-6 col-xl-4 col-xxl-3">
                     <div v-for="(questionsDatum, i) in questionsData" :key="questionsDatum.key">
                         <questionChain
                             ref="questionChain"
diff --git a/src/layouts/address-lookup/address-lookup.vue b/src/layouts/address-lookup/address-lookup.vue
index 4292d0543..08833dc2c 100644
--- a/src/layouts/address-lookup/address-lookup.vue
+++ b/src/layouts/address-lookup/address-lookup.vue
@@ -5,7 +5,7 @@
         ref="theForm"
         v-slot="{ meta }"
         autocomplete="off">
-        <div class="container page-container-grouped-styles">
+        <div class="container-fluid page-container-grouped-styles">
             <div class="row justify-content-center">
                 <div class="col-md-6">
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
diff --git a/src/layouts/address-vehicles/address-vehicles.vue b/src/layouts/address-vehicles/address-vehicles.vue
index 5e97bf328..eb6a6eccd 100644
--- a/src/layouts/address-vehicles/address-vehicles.vue
+++ b/src/layouts/address-vehicles/address-vehicles.vue
@@ -1,6 +1,6 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
-        <div class="container page-container-grouped-styles">
+        <div class="container-fluid page-container-grouped-styles">
             <div class="row justify-content-center">
                 <div class="col-md-6">
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
diff --git a/src/layouts/customer-details/customer-details.vue b/src/layouts/customer-details/customer-details.vue
index f17c22812..6e539b133 100644
--- a/src/layouts/customer-details/customer-details.vue
+++ b/src/layouts/customer-details/customer-details.vue
@@ -1,13 +1,13 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
-        <div class="container">
+        <div class="container-fluid">
             <div class="row justify-content-center">
                 <div class="col-md-6">
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
                 </div>
             </div>
             <div class="row justify-content-md-center">
-                <div class="col-md-6 col-xl-4">
+                <div class="col-md-6 col-xl-4 col-xxl-3">
                     <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="my-5" />
                     <textboxQuestion
                         class="mb-4"
diff --git a/src/layouts/estimate/estimate.vue b/src/layouts/estimate/estimate.vue
index 8ca0ac651..4fc6a1bc1 100644
--- a/src/layouts/estimate/estimate.vue
+++ b/src/layouts/estimate/estimate.vue
@@ -1,7 +1,7 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
         <loadingModal ref="loadingModal" />
-        <div class="container page-container-grouped-styles">
+        <div class="container-fluid page-container-grouped-styles">
             <div class="row justify-content-center">
                 <div class="col-md-6">
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
diff --git a/src/layouts/license-plate-lookup/license-plate-lookup.vue b/src/layouts/license-plate-lookup/license-plate-lookup.vue
index 13097eacd..ac167cae9 100644
--- a/src/layouts/license-plate-lookup/license-plate-lookup.vue
+++ b/src/layouts/license-plate-lookup/license-plate-lookup.vue
@@ -1,6 +1,6 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
-        <div class="container page-container-grouped-styles">
+        <div class="container-fluid page-container-grouped-styles">
             <div class="row justify-content-center">
                 <div class="col-md-6">
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
diff --git a/src/layouts/payment-method/payment-method.vue b/src/layouts/payment-method/payment-method.vue
index 7aadf9174..06c5153f5 100644
--- a/src/layouts/payment-method/payment-method.vue
+++ b/src/layouts/payment-method/payment-method.vue
@@ -8,7 +8,7 @@
                 </div>
             </div>
             <div class="row justify-content-md-center">
-                <div class="col-md-6 col-xl-4">
+                <div class="col-md-6 col-xl-4 col-xxl-3">
                     <vehicleBanner
                         cmsWidgetName="VehicleBannerWidget"
                         :displayGenericVehicleImage="false" />
diff --git a/src/layouts/quote/quote.vue b/src/layouts/quote/quote.vue
index 64e5bc63a..788680e46 100644
--- a/src/layouts/quote/quote.vue
+++ b/src/layouts/quote/quote.vue
@@ -1,14 +1,14 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
         <loadingModal ref="loadingModal" />
-        <div class="container page-container-grouped-styles">
+        <div class="container-fluid page-container-grouped-styles">
             <div class="row justify-content-center">
                 <div class="col-md-6">
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
                 </div>
             </div>
             <div class="row justify-content-md-center">
-                <div class="col-md-6 col-xl-4">
+                <div class="col-md-6 col-xl-4 col-xxl-3">
                     <vehicleBanner
                         cmsWidgetName="VehicleBannerWidget"
                         :displayGenericVehicleImage="false" />
diff --git a/src/layouts/review/review.vue b/src/layouts/review/review.vue
index cfd7416b9..20daf921f 100644
--- a/src/layouts/review/review.vue
+++ b/src/layouts/review/review.vue
@@ -1,14 +1,14 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
         <!-- When customer-details is added: v-slot="{ meta }" -->
-        <div class="container">
+        <div class="container-fluid">
             <div class="row justify-content-center">
                 <div class="col-md-6">
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
                 </div>
             </div>
             <div class="row justify-content-center">
-                <div class="col-md-6 col-xl-4">
+                <div class="col-md-6 col-xl-4 col-xxl-3">
                     <vehicleBanner
                         cmsWidgetName="VehicleBannerWidget"
                         :displayGenericVehicleImage="false" />
diff --git a/src/layouts/schedule/schedule.vue b/src/layouts/schedule/schedule.vue
index 9fae16a82..4adf9eb50 100644
--- a/src/layouts/schedule/schedule.vue
+++ b/src/layouts/schedule/schedule.vue
@@ -1,14 +1,14 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
         <loadingModal ref="loadingModal" />
-        <div class="container page-container-grouped-styles">
+        <div class="container-fluid page-container-grouped-styles">
             <div class="row justify-content-center">
                 <div class="col-md-6">
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
                 </div>
             </div>
             <div class="row justify-content-md-center">
-                <div class="col-md-6 col-xl-4">
+                <div class="col-md-6 col-xl-4 col-xxl-3">
                     <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mt-5" />
                     <template v-if="ChangeShopLink.length">
                         <textBlock
diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue
index fdf3ff9dd..a07993b62 100644
--- a/src/layouts/service-location/service-location.vue
+++ b/src/layouts/service-location/service-location.vue
@@ -1,7 +1,7 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
         <loadingModal ref="loadingModal" />
-        <div class="container page-container-grouped-styles">
+        <div class="container-fluid page-container-grouped-styles">
             <div class="row justify-content-center">
                 <div class="col-md-6">
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
@@ -74,7 +74,7 @@
                 </div>
             </div>
             <div class="row justify-content-md-center">
-                <div class="col-md-6 col-xl-4">
+                <div class="col-md-6 col-xl-4 col-xxl-3">
                     <mobileLocationModalQuestions
                         customComponentId="mobileLocationQuestions"
                         v-if="selectedAppointmentType === 'Mobile'"
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index 60ca0e5dc..cf96477a7 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="container page-container-grouped-styles vehicle-damage">
+        <div class="container-fluid page-container-grouped-styles vehicle-damage">
             <div class="row justify-content-center">
                 <div class="col-md-6">
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
@@ -24,7 +24,7 @@
                 </div>
             </div>
             <div class="row justify-content-md-center">
-                <div class="col-md-8 col-xl-6">
+                <div class="col-md-8 col-xl-6 col-xxl-4">
                     <damageLocationQuestion
                         ref="damageLocation"
                         cmsWidgetName="DamageLocationQuestion"
@@ -53,7 +53,7 @@
                         v-model="sideDoorOptionsData"
                         v-show="!hasRepairReplaceConflict"
                         :selectedDamageLocations="selectedDamageLocations" />
-                        
+
                     <replaceOptionsQuestion
                         ref="backGlassOptions"
                         cmsWidgetName="RearReplaceOptionsQuestion"
diff --git a/src/layouts/vehicle-parts/vehicle-parts.vue b/src/layouts/vehicle-parts/vehicle-parts.vue
index 3c7b90188..785992148 100644
--- a/src/layouts/vehicle-parts/vehicle-parts.vue
+++ b/src/layouts/vehicle-parts/vehicle-parts.vue
@@ -2,7 +2,7 @@
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
         <div class="vehicle-parts small-question-text">
             <loadingModal ref="loadingModal" />
-            <div class="container page-container-grouped-styles">
+            <div class="container-fluid page-container-grouped-styles">
                 <div class="row justify-content-center">
                     <div class="col-md-6">
                         <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
@@ -28,6 +28,10 @@
                                 </div>
                             </div>
                         </div>
+                    </div>
+                </div>
+                <div class="row justify-content-md-center">
+                    <div class="col-md-6 col-xl-4 col-xxl-3">
                         <div v-for="(item, i) in PartsOrQuestions" :key="i">
                             <!-- Render horizontal lines if there is multi-glass (aka if i > 0) -->
                             <hr v-if="i > 0" />
diff --git a/src/layouts/vehicle/vehicle.vue b/src/layouts/vehicle/vehicle.vue
index 15758b9da..da31110eb 100644
--- a/src/layouts/vehicle/vehicle.vue
+++ b/src/layouts/vehicle/vehicle.vue
@@ -1,13 +1,13 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
-        <div class="container">
+        <div class="container-fluid">
             <div class="row justify-content-center">
                 <div class="col-md-6">
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
                 </div>
             </div>
             <div class="row justify-content-center">
-                <div class="col-md-6 col-xl-4">
+                <div class="col-md-6 col-xl-4 col-xxl-3">
                     <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="siteSubHeader" />
                     <vehicleQuestion
                         ref="vehicleYearQuestion"
diff --git a/src/layouts/vin-lookup/vin-lookup.vue b/src/layouts/vin-lookup/vin-lookup.vue
index f5c537a81..06195c4c3 100644
--- a/src/layouts/vin-lookup/vin-lookup.vue
+++ b/src/layouts/vin-lookup/vin-lookup.vue
@@ -1,14 +1,14 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
         <loadingModal ref="loadingModal" />
-        <div class="container page-container-grouped-styles">
+        <div class="container-fluid page-container-grouped-styles">
             <div class="row justify-content-center">
                 <div class="col-md-6">
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
                 </div>
             </div>
             <div class="row justify-content-md-center">
-                <div class="col-md-6 col-xl-4">
+                <div class="col-md-6 col-xl-4 col-xxl-3">
                     <vehicleBanner
                         cmsWidgetName="VehicleBannerWidget"
                         :displayGenericVehicleImage="false" />
diff --git a/src/styles/common-styles.scss b/src/styles/common-styles.scss
index ffcd4a380..c8b978ed7 100644
--- a/src/styles/common-styles.scss
+++ b/src/styles/common-styles.scss
@@ -4,7 +4,7 @@ body {
     font-size: 16px;
     background-color: #fff;
     color: #4d5151;
-    .container {
+    .container-fluid {
         // padding: 0 1.5rem;
         // position: relative;
         //height: 100vh;
diff --git a/src/styles/ux-variables.scss b/src/styles/ux-variables.scss
index 437abd843..07abf9a19 100644
--- a/src/styles/ux-variables.scss
+++ b/src/styles/ux-variables.scss
@@ -194,4 +194,5 @@ $grid-breakpoints: (
   xs: 0,
   md: 768px,
   xl: 1200px,
+  xxl: 1440px,
 );