SSR-1201 misc alignment and spacing fixes.

src/iss-components/shop-list-button/shop-list-button.vue

@@ -32,7 +32,8 @@
                             :allowPageInteraction="true" />
                         <div
                             v-else
-                            id="availabilityIndicator">
+                            id="availabilityIndicator"
+                            class="d-flex align-items-center">
                             <div
                                 id="availabilityBadge"
                                 class="availability-badge"

src/iss-components/site-sub-header/site-sub-header.vue

@@ -18,7 +18,7 @@
             class="subheader-secondary d-flex align-items-center overflow-hidden"
             :class="[justifySubheader, subHeaderClasses]">
             <p
-                class="fw-normal mb-0"
+                class="fw-normal"
                 :class="[alternateFormatting, subTextClasses]">
                 <span v-html="subText"> </span>
             </p>
@@ -33,7 +33,7 @@ import {
     splitCopyOnCMSPlaceHolder,
     getRouterLinkRouteFromCopy,
     getRouterLinkDisplayTextFromCopy,
-    getRouterLinkHtmlStringFromCopy,
+    getRouterLinkHtmlStringFromCopy
 } from '@/helpers/cms-content-helper';
 
 import { stripRteStyle } from '@/helpers/text-helper';
@@ -51,7 +51,7 @@ export default {
         stripRteStyle: Boolean,
         subContentProperty: String,
         subHeaderClasses: String,
-        subTextClasses: String,
+        subTextClasses: String
     },
     emits: ['click-event'],
     computed: {
@@ -103,10 +103,10 @@ export default {
         alternateFormatting() {
             // override for service-packages unique style
             if (this.issContainingPage?.toLowerCase() === 'service-packages') {
-                return 'service-packages-subtext mt-4 mb-4 px-5';
+                return 'service-packages-subtext my-4';
             }
             return this.darkGraySubText ? 'dark-gray' : 'light-gray';
-        },
+        }
     },
     methods: {
         doesCopyContainRouterLink,
@@ -116,8 +116,8 @@ export default {
         getRouterLinkHtmlStringFromCopy,
         clickEvent() {
             this.$emit('click-event');
-        },
-    },
+        }
+    }
 };
 </script>
 

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

@@ -13,6 +13,7 @@
             <div class="row justify-content-center">
                 <div class="col-md-6 col-xl-4">
                     <siteSubHeader
+                        justification="left"
                         cmsWidgetName="SiteSubHeaderWidget"
                         issContainingPage="service-packages" />
                     <servicePackageQuestion
@@ -34,7 +35,9 @@
                         @ForwardClicked="forwardButtonAction" />
                 </div>
             </div>
-            <loadingModal ref="loadingModal" :textSlides="loadingText" />
+            <loadingModal
+ref="loadingModal"
+:textSlides="loadingText" />
             <contentGroupModal
                 ref="RainDefenseModal"
                 cmsWidgetName="RainDefenseModal" />
@@ -44,7 +47,9 @@
             <contentGroupModal
                 ref="RearWiperModal"
                 cmsWidgetName="RearWiperModal" />
-            <contentGroupModal ref="RecalModal" cmsWidgetName="RecalModal" />
+            <contentGroupModal
+ref="RecalModal"
+cmsWidgetName="RecalModal" />
         </div>
     </Form>
 </template>
@@ -80,7 +85,7 @@ export default {
         Form,
         servicePackageQuestion,
         loadingModal,
-        contentGroupModal,
+        contentGroupModal
     },
     mixins: [baseFormMixin],
     async beforeRouteEnter(to, from, next) {
@@ -93,20 +98,20 @@ export default {
         const promiseResultMap = [
             {
                 resultKey: 'cmsContent',
-                promise: cmsContentPromise,
+                promise: cmsContentPromise
             },
             {
                 resultKey: 'wipers',
-                promise: wipersPromise,
+                promise: wipersPromise
             },
             {
                 resultKey: 'rainDefense',
-                promise: rainDefensePromise,
+                promise: rainDefensePromise
             },
             {
                 resultKey: 'supportingItems',
-                promise: supportingItemsPromise,
-            },
+                promise: supportingItemsPromise
+            }
         ];
         const resultMap = await settleAllPromises(promiseResultMap);
 
@@ -117,19 +122,17 @@ export default {
             resultMap.rainDefense,
             ...resultMap.supportingItems,
             ...resultMap.wipers,
-            ...clonedGlassParts,
+            ...clonedGlassParts
         ];
 
         let hasBailedOut = false;
         const pricingResults = await store
             .getPriceOrderItems(availableLineItems)
             .catch((err) => {
-                useMainStore().setBailout(
-                    bailoutMessage.pricingResponseError(
-                        availableLineItems.map((li) => li.partNumber),
-                        { code: err.code, message: err.message, data: err.data }
-                    )
-                );
+                useMainStore().setBailout(bailoutMessage.pricingResponseError(
+                    availableLineItems.map((li) => li.partNumber),
+                    { code: err.code, message: err.message, data: err.data }
+                ));
                 hasBailedOut = true;
                 next(`/?issPage=${issPageValues.BAILOUT_PAGE}`);
             });
@@ -155,17 +158,17 @@ export default {
                 'Looking for dates',
                 'Searching for times',
                 'Nearly there',
-                'Finishing up',
+                'Finishing up'
             ],
             rules: {
-                optionRequired: globalRules.OPTION_REQUIRED,
-            },
+                optionRequired: globalRules.OPTION_REQUIRED
+            }
         };
     },
     computed: {
         PriceDisclaimerText() {
             return this.getCmsContent('PriceDisclaimerWidget', 'Text');
-        },
+        }
     },
     methods: {
         openModalAction(modalName) {
@@ -173,11 +176,11 @@ export default {
         },
         arePagePrerequisitesValid() {
             return (
-                store.order.serviceLocation.zipCode &&
-                store.order.serviceLocation.zipCodeCtu &&
-                (store.order.damage.isRepair ||
-                    (store.order.lineItems?.glassParts != null &&
-                        store.order.lineItems.glassParts.length > 0))
+                store.order.serviceLocation.zipCode
+                && store.order.serviceLocation.zipCodeCtu
+                && (store.order.damage.isRepair
+                    || (store.order.lineItems?.glassParts != null
+                        && store.order.lineItems.glassParts.length > 0))
             );
         },
         vapsItemsSelectedAction(vapsItemsSelected) {
@@ -187,12 +190,10 @@ export default {
             const parts = {
                 glassParts: this.pricedGlassParts,
                 supportingItems: this.supportingItems,
-                vaps: this.selectedVaps,
+                vaps: this.selectedVaps
             };
             if (!allGlassPartsAndItemsHavePrices(parts)) {
-                window.console.error(
-                    'One or more items have no price assigned!'
-                );
+                window.console.error('One or more items have no price assigned!');
             }
             if (this.pricedGlassParts.length > 0) {
                 store.updateGlassParts(this.pricedGlassParts);
@@ -204,8 +205,8 @@ export default {
                 this.navigationScenarios.CLICKED_FORWARD,
                 this.$route
             );
-        },
-    },
+        }
+    }
 };
 </script>
 

src/layouts/vehicle-damage/vehicle-damage.vue

@@ -522,12 +522,6 @@ export default {
         flex: 0 auto;
     }
 }
-.damage-location-question {
-    span {
-        font-size: 1.25rem;
-        font-weight: 400;
-    }
-}
 .button-question,
 .windshield-damage-type-question,
 .damage-location-question {