diff --git a/src/digital-components/button-question/button-question.vue b/src/digital-components/button-question/button-question.vue
index e874a40f6..e60dcbebc 100644
--- a/src/digital-components/button-question/button-question.vue
+++ b/src/digital-components/button-question/button-question.vue
@@ -5,7 +5,10 @@ https://safelite.atlassian.net/wiki/spaces/DC/pages/76644418/Button+Question+Com
:class="
isOverflowScrollable ? 'button-question button-question-overflow' : 'button-question'
">
-
+
{{ questionText }}
@@ -123,6 +126,7 @@ export default {
useTextForValue: Boolean,
valueToLogType: String,
additionalButtonStyling: String,
+ isSmallQuestionText: Boolean,
},
beforeMount() {
if (this.buttonTypeObject) {
@@ -136,13 +140,15 @@ export default {
},
computed: {
getFieldSetClasses() {
- if (this.isOverflowScrollable) {
- return "container-fluid overflow-scroll position-absolute px-5 pt-1 py-0";
- } else if (this.buttonTypeString == "listCard") {
- return "w-100";
- } else {
- return "";
- }
+ const baseClasses = this.isOverflowScrollable
+ ? "container-fluid overflow-scroll position-absolute px-5 pt-1 py-0"
+ : this.buttonTypeString == "listCard"
+ ? "w-100"
+ : "";
+ const withSmallQuestionClass = this.isSmallQuestionText
+ ? baseClasses + " small-question-text"
+ : baseClasses;
+ return withSmallQuestionClass;
},
getComponentLoopWrapperClasses() {
let classes;
@@ -255,19 +261,18 @@ export default {
text-align: center;
}
}
-
-.vehicle-parts {
- .question-text {
+.small-question-text {
+ &.question-text {
span {
font-size: 0.875rem;
text-align: left;
- margin: 0 0 0.5rem 0;
+ margin: 1rem 0 0.5rem 0;
}
}
- .question-text {
+ &.question-text {
margin: 0;
}
- fieldset {
+ & fieldset {
.ui-radio {
margin: 0;
}
diff --git a/src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue b/src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue
index a6f5e3f0a..7317b743d 100644
--- a/src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue
+++ b/src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue
@@ -25,6 +25,7 @@
textPosition="text-start"
:loaderEnabled="false"
isRequired
+ isSmallQuestionText
:groupName="`${glassLocation}-${glassName}-${selectedTint}`"
:validationRules="partValidationRules" />
diff --git a/src/layouts/vehicle-parts/vehicle-parts.vue b/src/layouts/vehicle-parts/vehicle-parts.vue
index 5723cd0a8..56ac2ed15 100644
--- a/src/layouts/vehicle-parts/vehicle-parts.vue
+++ b/src/layouts/vehicle-parts/vehicle-parts.vue
@@ -1,6 +1,6 @@