styling WIP

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

@@ -127,6 +127,7 @@ export default {
         isOverflowScrollable: Boolean,
         isWide: Boolean,
         isCashOrInsurance: Boolean,
+        isHorizontalLayout: Boolean,
         modelValue: [Array, Number, String],
         value: [Number, String],
         validationRules: String,
@@ -211,7 +212,10 @@ export default {
                     classes = 'ui-radio d-flex';
                     break;
                 case 'servicePackageRadio':
-                    classes = 'package-main';
+                    classes = 'package-main d-flex flex-column';
+                    if (this.isHorizontalLayout) {
+                        classes += ' flex-md-row gap-3';
+                    }
                     break;
                 case 'providerPrefRadio':
                     classes = 'option-main';
@@ -231,6 +235,9 @@ export default {
                     break;
                 case 'servicePackageRadio':
                     classes = 'package-wrapper';
+                    if (this.isHorizontalLayout) {
+                        classes += ' flex-fill';
+                    }
                     break;
                 case 'providerPrefRadio':
                     classes = 'option-wrapper';

src/layouts/service-packages/service-package-question/service-package-question.vue

@@ -7,7 +7,8 @@
         buttonTypeString="servicePackageRadio"
         :buttonTypeObject="servicePackageRadio"
         :validationRules="validationRules"
-        :isRequired="isRequired" />
+        :isRequired="isRequired"
+        :isHorizontalLayout="true" />
 </template>
 
 <script>
@@ -17,7 +18,6 @@ import damageLocationsSelected from '@/constants/damage-locations-selected';
 import servicePackageRadio from '@/layouts/service-packages/service-package-question/service-package-radio/service-package-radio.vue';
 import partTypeStrings from '@/constants/part-type-strings';
 import { useMainStore } from '@/store';
-import allGlassPartsAndItemsHavePrices from '@/layouts/service-packages/service-package-helper/service-package-helper';
 import { getPriceOfLineItem } from '@/helpers/price-calculator';
 import { getHighestFullySatisfiedTier } from '@/helpers/service-package-helper.js';
 

src/layouts/service-packages/service-package-question/service-package-radio/service-package-radio.vue

@@ -123,6 +123,11 @@ export default {
 
             label {
                 display: block;
+                height: 100%;
+            }
+
+            .package-label {
+                height: 100%;
             }
 
             input[type="radio"] {

src/layouts/service-packages/service-packages.vue

@@ -9,7 +9,7 @@
                 <siteHeader cmsWidgetName="SiteHeaderWidget" />
             </div>
             <div class="iss-heritage-container-width">
-                <div class="service-packages-container iss-heritage-content-container-width">
+                <div class="service-packages-container">
                     <siteSubHeader
                         class="subheader mt-4"
                         justification="center"
@@ -217,11 +217,15 @@ export default {
 <style lang="scss" scoped>
 .iss-heritage-container-width {
     .service-packages-container {
+        @media (min-width: 992px) {
+            width: 85%; // REVISIT
+        }
         position: relative;
         min-height: 1px;
         padding-left: .9375rem;
         padding-right: .9375rem;
         display: block;
+        margin: 0 auto;
         :deep(.subheader-primary) {
             display: block;
         }