Merge pull request #1419 from Safelite/CSR-1708-fix-error-copy-alignment

CSR-1708 center error text when <= 2 buttons.

src/digital-components/button-question/button-question.vue

@@ -72,7 +72,10 @@ 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 +230,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,

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 {