From fa9683fbae0610e5b95386e53747d7af380442b6 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Tue, 17 Oct 2023 13:57:42 -0400
Subject: [PATCH] CSR-1708 center error text when <= 2 buttons.

---
 .../button-question/button-question.vue              | 12 +++++++++++-
 src/styles/common-styles.scss                        |  6 ++++++
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/digital-components/button-question/button-question.vue b/src/digital-components/button-question/button-question.vue
index cec014712..4542ef849 100644
--- a/src/digital-components/button-question/button-question.vue
+++ b/src/digital-components/button-question/button-question.vue
@@ -72,7 +72,7 @@ https://safelite.atlassian.net/wiki/spaces/DC/pages/76644418/Button+Question+Com
                 </div>
             </fieldset>
         </div>
-        <div class="row form-test-error">
+        <div id="form-test-error" class="row form-test-error" :class="isErrorCentered ? 'text-center' : ''">
             <error-message
                 role="comment"
                 aria-atomic="true"
@@ -227,8 +227,18 @@ export default {
                 classes += " two-list-card-width";
             }
 
+            if (this.buttonTypeString == "listCard" && this.buttonsInfo.length === 1) {
+                classes += " one-list-card-width";
+            }
+
             return classes;
         },
+        isErrorCentered() {
+            if (this.buttonTypeString == "listCard" && this.buttonsInfo.length <= 2) {
+                return true;
+            }
+            return false;
+        },
         buttonsInfo() {
             return (Array.isArray(this.answers) ? this.answers : [])?.map((answer) => ({
                 buttonLabel: answer.buttonLabel ?? answer.Text ?? answer,
diff --git a/src/styles/common-styles.scss b/src/styles/common-styles.scss
index efd3866d0..197655db1 100644
--- a/src/styles/common-styles.scss
+++ b/src/styles/common-styles.scss
@@ -23,6 +23,12 @@ body {
             }
             .col {
                 max-width: 236px;
+                &.one-list-card-width {
+                    max-width: 472px;
+                    @include media-breakpoint-up(xl) {
+                        max-width: 66.6666666%;
+                    }
+                }
             }
         }
         .col-xl-4 {