Refactor method, add prop.

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'
         ">
-        <div v-if="questionText && answers && answers.length > 0" class="question-text d-flex">
+        <div
+            v-if="questionText && answers && answers.length > 0"
+            class="question-text d-flex"
+            :class="{ 'small-question-text': isSmallQuestionText }">
             <span class="fw-bold w-100">{{ questionText }}</span>
         </div>
 
@@ -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) {
+            const baseClasses = this.isOverflowScrollable
-                return "container-fluid overflow-scroll position-absolute px-5 pt-1 py-0";
+                ? "container-fluid overflow-scroll position-absolute px-5 pt-1 py-0"
-            } else if (this.buttonTypeString == "listCard") {
+                : this.buttonTypeString == "listCard"
-                return "w-100";
+                ? "w-100"
-            } else {
+                : "";
-                return "";
+            const withSmallQuestionClass = this.isSmallQuestionText
-            }
+                ? baseClasses + " small-question-text"
+                : baseClasses;
+            return withSmallQuestionClass;
         },
         getComponentLoopWrapperClasses() {
             let classes;
@@ -255,4 +261,21 @@ export default {
         text-align: center;
     }
 }
+.small-question-text {
+    &.question-text {
+        span {
+            font-size: 0.875rem;
+            text-align: left;
+            margin: 1rem 0 0.5rem 0;
+        }
+    }
+    &.question-text {
+        margin: 0;
+    }
+    & fieldset {
+        .ui-radio {
+            margin: 0;
+        }
+    }
+}
 </style>

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" />
                         </div>

src/layouts/vehicle-parts/vehicle-parts.vue

@@ -1,6 +1,6 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
-        <div class="page-container-grouped-styles vehicle-parts">
+        <div class="page-container-grouped-styles vehicle-parts small-question-text">
             <loadingModal ref="loadingModal" />
             <funnelHeader ref="funnelHeader" cmsWidgetName="FunnelHeaderWidget" />
             <vehicleBanner