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"> -
+
@@ -469,9 +469,9 @@ export default {