From cebd5e7f81f46cc6bbfdf14f6e925475723673d9 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Tue, 16 Apr 2024 09:11:33 -0400
Subject: [PATCH] WIP add unique styles for two and three button options.

---
 .../button-question/button-question.vue               | 11 ++++++++++-
 src/layouts/vehicle-damage/vehicle-damage.vue         | 10 +++++-----
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/digital-components/button-question/button-question.vue b/src/digital-components/button-question/button-question.vue
index 93da3c9d..f8b8146e 100644
--- a/src/digital-components/button-question/button-question.vue
+++ b/src/digital-components/button-question/button-question.vue
@@ -191,7 +191,7 @@ export default {
                     classes = 'd-flex flex-row p-0';
                     break;
                 case 'listCard':
-                    classes = 'row g-2 justify-content-center';
+                    classes = 'row g-2 g-md-5 justify-content-center mb-1 flex-nowrap';
                     if (this.isWide) {
                         classes += ' flex-column';
                     }
@@ -226,6 +226,15 @@ export default {
                     break;
                 default:
             }
+            // Determine number of buttons and add class accordingly.
+            // This is to accommodate unique spacing per design specs.
+            if (this.buttonTypeString === 'listCard' && this.buttonsInfo.length > 2) {
+                classes += ' two-list-card-width';
+            }
+
+            if (this.buttonTypeString === 'listCard' && this.buttonsInfo.length === 1) {
+                classes += ' one-list-card-width';
+            }
 
             return classes;
         },
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index 07e26a39..776fcc79 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -4,7 +4,7 @@
     v-slot="{ meta }"
     @submit="onSubmit"
     @invalidSubmit="onInvalidSubmit">
-    <div class="container-fluid fade-on-route-transition">
+    <div class="container-fluid fade-on-route-transition replace-options-question">
       <div class="row justify-content-center">
         <div class="col-md-6 px-0 px-md-2">
           <siteHeader cmsWidgetName="SiteHeaderWidget" />
@@ -469,9 +469,9 @@ export default {
 
 <style lang="scss">
 .replace-options-question {
-  .two-list-card-width {
-    width: 100%;
-    flex: 0 auto;
-  }
+    .two-list-card-width {
+        width: 100%;
+        flex: 0 auto;
+    }
 }
 </style>