From 3d23bdbabcb1ed2e71b6ec8be3a24c6aaf2a2fb6 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Mon, 16 Oct 2023 08:38:23 -0400
Subject: [PATCH] CSR-1593 set column width to control overly-wide components
 on larger screens.

Change scroll to auto for modals to avoid ghost scrollbars when not needed.

Center content on all screen sizes.
---
 src/digital-components/modal/modal.vue         |  2 +-
 .../questions-page-layout.vue                  |  6 +++---
 src/layouts/address-lookup/address-lookup.vue  |  2 +-
 .../address-vehicles/address-vehicles.vue      |  2 +-
 src/layouts/confirmation/confirmation.vue      |  2 +-
 .../customer-details/customer-details.vue      |  2 +-
 src/layouts/estimate/estimate.vue              |  2 +-
 .../license-plate-lookup.vue                   |  2 +-
 src/layouts/payment-method/payment-method.vue  |  2 +-
 src/layouts/quote/quote.vue                    |  2 +-
 src/layouts/schedule/schedule.vue              |  2 +-
 .../service-location/service-location.vue      |  8 ++++----
 src/layouts/vehicle-damage/vehicle-damage.vue  |  8 ++++----
 src/layouts/vehicle-parts/vehicle-parts.vue    |  4 ++--
 src/layouts/vin-lookup/vin-lookup.vue          |  2 +-
 src/styles/common-styles.scss                  | 18 ++++++++++++++++++
 16 files changed, 42 insertions(+), 24 deletions(-)

diff --git a/src/digital-components/modal/modal.vue b/src/digital-components/modal/modal.vue
index e0353829c..413ca0369 100644
--- a/src/digital-components/modal/modal.vue
+++ b/src/digital-components/modal/modal.vue
@@ -179,7 +179,7 @@ export default {
                         }
                     }
                     @include media-breakpoint-up(md) {
-                        overflow: scroll;
+                        overflow: auto;
                         flex: none;
                     }
                 }
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 73d810cc7..8fc382bf0 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
@@ -7,7 +7,7 @@
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
                 </div>
             </div>
-            <div class="row justify-content-md-center">
+            <div class="row justify-content-center">
                 <div class="col-md-6">
                     <vehicleBanner
                         cmsWidgetName="VehicleBannerWidget"
@@ -16,7 +16,7 @@
                     <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
                 </div>
             </div>
-            <div class="row justify-content-md-center">
+            <div class="row justify-content-center">
                 <div class="col-md-6 col-xl-4">
                     <alert
                         ref="alertFewMoreQuestions"
@@ -28,7 +28,7 @@
                         v-bind:isDismissible="false" />
                 </div>
             </div>
-            <div class="row justify-content-md-center">
+            <div class="row justify-content-center">
                 <div class="col-md-6 col-xl-4">
                     <div v-for="(questionsDatum, i) in questionsData" :key="questionsDatum.key">
                         <questionChain
diff --git a/src/layouts/address-lookup/address-lookup.vue b/src/layouts/address-lookup/address-lookup.vue
index 08833dc2c..de0e8d5aa 100644
--- a/src/layouts/address-lookup/address-lookup.vue
+++ b/src/layouts/address-lookup/address-lookup.vue
@@ -11,7 +11,7 @@
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
                 </div>
             </div>
-            <div class="row justify-content-md-center">
+            <div class="row justify-content-center">
                 <div class="col-md-6 col-xl-4">
                     <vehicleBanner
                         cmsWidgetName="VehicleBannerWidget"
diff --git a/src/layouts/address-vehicles/address-vehicles.vue b/src/layouts/address-vehicles/address-vehicles.vue
index eb6a6eccd..88d182980 100644
--- a/src/layouts/address-vehicles/address-vehicles.vue
+++ b/src/layouts/address-vehicles/address-vehicles.vue
@@ -6,7 +6,7 @@
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
                 </div>
             </div>
-            <div class="row justify-content-md-center">
+            <div class="row justify-content-center">
                 <div class="col-md-6 col-xl-4">
                     <vehicleBanner
                         cmsWidgetName="VehicleBannerWidget"
diff --git a/src/layouts/confirmation/confirmation.vue b/src/layouts/confirmation/confirmation.vue
index cb7ca43c1..0f4234d00 100644
--- a/src/layouts/confirmation/confirmation.vue
+++ b/src/layouts/confirmation/confirmation.vue
@@ -4,7 +4,7 @@
             <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
             <div>
                 <div class="container-fluid pb-2">
-                    <div class="row justify-content-md-center">
+                    <div class="row justify-content-center">
                         <div class="col-md-6 col-xl-4">
                             <div class="header-container">
                                 <img :src="ScheduleConfirmationImage" />
diff --git a/src/layouts/customer-details/customer-details.vue b/src/layouts/customer-details/customer-details.vue
index 9568b2a13..6e5fc0f09 100644
--- a/src/layouts/customer-details/customer-details.vue
+++ b/src/layouts/customer-details/customer-details.vue
@@ -6,7 +6,7 @@
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
                 </div>
             </div>
-            <div class="row justify-content-md-center">
+            <div class="row justify-content-center">
                 <div class="col-md-6 col-xl-4">
                     <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="my-5" />
                     <textboxQuestion
diff --git a/src/layouts/estimate/estimate.vue b/src/layouts/estimate/estimate.vue
index 4fc6a1bc1..61d06fe05 100644
--- a/src/layouts/estimate/estimate.vue
+++ b/src/layouts/estimate/estimate.vue
@@ -7,7 +7,7 @@
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
                 </div>
             </div>
-            <div class="row justify-content-md-center">
+            <div class="row justify-content-center">
                 <div class="col-md-6 col-xl-4">
                     <vehicleBanner cmsWidgetName="VehicleBannerWidget" />
                     <funnelSubHeader class="pb-4" cmsWidgetName="FunnelSubHeaderWidget" />
diff --git a/src/layouts/license-plate-lookup/license-plate-lookup.vue b/src/layouts/license-plate-lookup/license-plate-lookup.vue
index ac167cae9..fc3756b6d 100644
--- a/src/layouts/license-plate-lookup/license-plate-lookup.vue
+++ b/src/layouts/license-plate-lookup/license-plate-lookup.vue
@@ -6,7 +6,7 @@
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
                 </div>
             </div>
-            <div class="row justify-content-md-center">
+            <div class="row justify-content-center">
                 <div class="col-md-6 col-xl-4">
                     <vehicleBanner
                         cmsWidgetName="VehicleBannerWidget"
diff --git a/src/layouts/payment-method/payment-method.vue b/src/layouts/payment-method/payment-method.vue
index 99e59d713..0caa12f76 100644
--- a/src/layouts/payment-method/payment-method.vue
+++ b/src/layouts/payment-method/payment-method.vue
@@ -7,7 +7,7 @@
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
                 </div>
             </div>
-            <div class="row justify-content-md-center">
+            <div class="row justify-content-center">
                 <div class="col-md-6 col-xl-4">
                     <vehicleBanner
                         cmsWidgetName="VehicleBannerWidget"
diff --git a/src/layouts/quote/quote.vue b/src/layouts/quote/quote.vue
index 4773938d0..5b05cf961 100644
--- a/src/layouts/quote/quote.vue
+++ b/src/layouts/quote/quote.vue
@@ -7,7 +7,7 @@
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
                 </div>
             </div>
-            <div class="row justify-content-md-center">
+            <div class="row justify-content-center">
                 <div class="col-md-6 col-xl-4">
                     <vehicleBanner
                         cmsWidgetName="VehicleBannerWidget"
diff --git a/src/layouts/schedule/schedule.vue b/src/layouts/schedule/schedule.vue
index fccef82e1..5b6ab980f 100644
--- a/src/layouts/schedule/schedule.vue
+++ b/src/layouts/schedule/schedule.vue
@@ -7,7 +7,7 @@
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
                 </div>
             </div>
-            <div class="row justify-content-md-center">
+            <div class="row justify-content-center">
                 <div class="col-md-6 col-xl-4">
                     <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mt-5" />
                     <template v-if="ChangeShopLink.length">
diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue
index eca5f5550..776538538 100644
--- a/src/layouts/service-location/service-location.vue
+++ b/src/layouts/service-location/service-location.vue
@@ -7,7 +7,7 @@
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
                 </div>
             </div>
-            <div class="row justify-content-md-center">
+            <div class="row justify-content-center">
                 <div class="col-md-6 col-xl-4">
                     <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mt-5" />
 
@@ -59,7 +59,7 @@
                         alertClass="alert-warning" />
                 </div>
             </div>
-            <div class="row justify-content-md-center appointment-type">
+            <div class="row justify-content-center appointment-type">
                 <div class="col-md-6">
                     <appointmentTypeQuestion
                         v-model="selectedAppointmentType"
@@ -73,7 +73,7 @@
                         validationRules="option-required" />
                 </div>
             </div>
-            <div class="row justify-content-md-center">
+            <div class="row justify-content-center">
                 <div class="col-md-6 col-xl-4">
                     <mobileLocationModalQuestions
                         customComponentId="mobileLocationQuestions"
@@ -538,7 +538,7 @@ export default {
 .appointment-type-question {
     .button-question {
         .col {
-            padding: 0 0.5rem;
+            //padding: 0 0.5rem;
             @include media-breakpoint-up(md) {
                 padding: 0 0.75rem;
             }
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index 353ad63df..ffa57e04d 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -6,7 +6,7 @@
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
                 </div>
             </div>
-            <div class="row justify-content-md-center">
+            <div class="row justify-content-center">
                 <div class="col-md-6 col-xl-4">
                     <vehicleBanner
                         cmsWidgetName="VehicleBannerWidget"
@@ -23,7 +23,7 @@
                         :isDismissible="false" />
                 </div>
             </div>
-            <div class="row justify-content-md-center">
+            <div class="row justify-content-center">
                 <div class="col-md-6">
                     <damageLocationQuestion
                         ref="damageLocation"
@@ -32,7 +32,7 @@
                         groupName="DamageLocationQuestion" />
                 </div>
             </div>
-            <div class="row justify-content-md-center">
+            <div class="row justify-content-center">
                 <div class="col-md-6 col-xl-4">
                     <windshieldOptions
                         class="windshield-options"
@@ -66,7 +66,7 @@
                         validationRules="replace-options-required" />
                 </div>
             </div>
-            <div class="row justify-content-md-center">
+            <div class="row justify-content-center">
                 <div class="col-md-6 col-xl-4">
                     <navbar
                         cmsWidgetName="FunnelFooterWidget"
diff --git a/src/layouts/vehicle-parts/vehicle-parts.vue b/src/layouts/vehicle-parts/vehicle-parts.vue
index 08432bab9..242aa27ec 100644
--- a/src/layouts/vehicle-parts/vehicle-parts.vue
+++ b/src/layouts/vehicle-parts/vehicle-parts.vue
@@ -8,7 +8,7 @@
                         <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
                     </div>
                 </div>
-                <div class="row justify-content-md-center">
+                <div class="row justify-content-center">
                     <div class="col-md-6 col-lg-4">
                         <vehicleBanner
                             ref="vehicleBanner"
@@ -30,7 +30,7 @@
                         </div>
                     </div>
                 </div>
-                <div class="row justify-content-md-center">
+                <div class="row justify-content-center">
                     <div class="col-md-6 col-xl-4">
                         <div v-for="(item, i) in PartsOrQuestions" :key="i">
                             <!-- Render horizontal lines if there is multi-glass (aka if i > 0) -->
diff --git a/src/layouts/vin-lookup/vin-lookup.vue b/src/layouts/vin-lookup/vin-lookup.vue
index 1f79182a6..f3332e838 100644
--- a/src/layouts/vin-lookup/vin-lookup.vue
+++ b/src/layouts/vin-lookup/vin-lookup.vue
@@ -7,7 +7,7 @@
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
                 </div>
             </div>
-            <div class="row justify-content-md-center">
+            <div class="row justify-content-center">
                 <div class="col-md-6 col-xl-4">
                     <vehicleBanner
                         cmsWidgetName="VehicleBannerWidget"
diff --git a/src/styles/common-styles.scss b/src/styles/common-styles.scss
index 6bb1bd64c..efd3866d0 100644
--- a/src/styles/common-styles.scss
+++ b/src/styles/common-styles.scss
@@ -14,6 +14,24 @@ body {
             display: flex;
             flex-direction: column;
         }
+        // Set max-width on columns to prevent overly-wide
+        // components on extra wide screens.
+        .col-md-6 {
+            max-width: 472px;
+            @include media-breakpoint-up(xl) {
+                max-width: 708px;
+            }
+            .col {
+                max-width: 236px;
+            }
+        }
+        .col-xl-4 {
+            max-width: 472px;
+            .col {
+                max-width: 100%;
+            }
+        }
+        //END set max-width on columns
     }
     .pointer {
         cursor: pointer;