From 95ed1c5b35ebbc9410025c59e933e0da43c39a77 Mon Sep 17 00:00:00 2001
From: Bill Richardson <william.richardson@safelite.com>
Date: Wed, 3 Dec 2025 09:29:11 -0500
Subject: [PATCH] more updates

policy-endorsements (formatting)
license-plate-lookup
coverage-statement
---
 .../coverage-statement/coverage-statement.vue | 42 ++++++++++-------
 .../license-plate-lookup.vue                  | 29 ++++++------
 .../policy-endorsements.vue                   | 46 ++++++++-----------
 3 files changed, 60 insertions(+), 57 deletions(-)

diff --git a/src/layouts/coverage-statement/coverage-statement.vue b/src/layouts/coverage-statement/coverage-statement.vue
index 170d2454..19059edb 100644
--- a/src/layouts/coverage-statement/coverage-statement.vue
+++ b/src/layouts/coverage-statement/coverage-statement.vue
@@ -5,27 +5,25 @@
         v-slot="{ meta }"
         @submit="onSubmit"
         @invalidSubmit="onInvalidSubmit">
-        <div class="container-fluid fade-on-route-transition coverage-statement">
-            <div class="row justify-content-center">
-                <div class="col-md-6 px-0 px-md-2">
-                    <siteHeader
-                        ref="siteHeader"
-                        cmsWidgetName="SiteHeaderWidget" />
-                </div>
+        <div class="fade-on-route-transition coverage-statement">
+            <div class="justify-content-center">
+                <siteHeader
+                    ref="siteHeader"
+                    cmsWidgetName="SiteHeaderWidget" />
             </div>
-            <div class="row justify-content-center pt-5">
-                <div class="col-md-6 col-xl-4">
+            <div class="iss-heritage-container-width">
+                <div class="coverage-statement-container iss-heritage-content-container-width">
                     <h5
                         ref="siteSubHeader"
-                        class="sub-header text-center text-black"
+                        class="sub-header text-black mt-4"
                         v-html="coverageStatementSubHeader"></h5>
                     <div
                         ref="explanatoryText"
-                        class="body-text text-center mt-2"
+                        class="body-text mt-2"
                         v-html="explanatoryText"></div>
                     <div
                         ref="secondaryText"
-                        class="text-center mt-4 mb-1 fw-bold text-black"
+                        class="mt-4 mb-1 fw-bold text-black"
                         v-html="secondaryText"></div>
                     <div
                         v-if="isDeductibleVisible"
@@ -100,6 +98,7 @@
             @returnToClaim="continueClaim" />
     </Form>
 </template>
+
 <script>
 // Import Component
 import { Form } from 'vee-validate';
@@ -498,6 +497,15 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.iss-heritage-container-width {
+    .coverage-statement-container {
+        position: relative;
+        min-height: 1px;
+        padding-left: .9375rem;
+        padding-right: .9375rem;
+    }
+}
+
 .coverage-statement {
     .cost {
         color: $green;
@@ -511,7 +519,7 @@ export default {
     .sub-header {
         line-height: 2rem;
     }
-    :deep ol {
+    :deep(ol) {
         padding: 0;
         padding-left: 1.125rem;
         padding-right: 1.125rem;
@@ -522,7 +530,7 @@ export default {
             margin-bottom: .5rem;
         }
     }
-    :deep p {
+    :deep(p) {
         line-height: 1.5rem;
         font-size: 0.875rem;
         margin-bottom: 0.5rem;
@@ -530,11 +538,11 @@ export default {
             color: $black;
         }
     }
-    :deep .body-text {
+    :deep(.body-text) {
         font-size: 0.875rem;
         line-height: 1.5rem;
     }
-    :deep .question-text {
+    :deep(.question-text) {
         margin-top: 1.5rem;
         margin-bottom: 0.5rem;
         font-size: 1rem;
@@ -554,7 +562,7 @@ export default {
     }
 }
 
-:deep .deductible-modal {
+:deep(.deductible-modal) {
     p {
         margin-bottom: 0 !important;
     }
diff --git a/src/layouts/license-plate-lookup/license-plate-lookup.vue b/src/layouts/license-plate-lookup/license-plate-lookup.vue
index 991976ab..1bcfbc1d 100644
--- a/src/layouts/license-plate-lookup/license-plate-lookup.vue
+++ b/src/layouts/license-plate-lookup/license-plate-lookup.vue
@@ -4,21 +4,15 @@
         v-slot="{ meta }"
         @submit="onSubmit"
         @invalidSubmit="onInvalidSubmit">
-        <div class="container-fluid fade-on-route-transition">
-            <div class="row justify-content-center">
-                <div class="col-md-6 px-0 px-md-2">
-                    <siteHeader cmsWidgetName="SiteHeaderWidget" />
-                </div>
+        <div class="fade-on-route-transition">
+            <div class="justify-content-center">
+                <siteHeader cmsWidgetName="SiteHeaderWidget" />
             </div>
-            <div class="row justify-content-center">
-                <div class="col-md-6 col-xl-4">
-                    <vehicleBanner
-                        class="mt-2 mb-4"
-                        cmsWidgetName="VehicleBannerWidget"
-                        :displayGenericVehicleImage="false" />
+            <div class="iss-heritage-container-width">
+                <div class="license-plate-lookup-container iss-heritage-content-container-width">
                     <siteSubHeader
                         cmsWidgetName="SiteSubHeaderWidget"
-                        class="mb-5"
+                        class="mt-4"
                         subHeaderMarginClasses="mt-1" />
                     <alert
                         v-if="displayVinNotFoundAlert"
@@ -105,7 +99,6 @@ import vinPagesMixin from '@/mixins/vin-pages-mixin';
 import siteFooter from '@/iss-components/site-footer/site-footer.vue';
 import siteHeader from '@/iss-components/site-header/site-header.vue';
 import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
-import vehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
 import textboxQuestion from '@/digital-components/textbox-question/textbox-question.vue';
 import dropdownQuestion from '@/digital-components/dropdown-question/dropdown-question.vue';
 import alert from '@/ux-components/alert/alert.vue';
@@ -125,7 +118,6 @@ export default {
         siteFooter,
         siteHeader,
         siteSubHeader,
-        vehicleBanner,
         textboxQuestion,
         dropdownQuestion,
         alert
@@ -354,6 +346,15 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.iss-heritage-container-width {
+    .license-plate-lookup-container {
+        position: relative;
+        min-height: 1px;
+        padding-left: .9375rem;
+        padding-right: .9375rem;
+    }
+}
+
 #license-plate-question-wrapper .form-test-error {
     /**
     Override extra margin-bottom in the error message in TextboxQuestion
diff --git a/src/layouts/policy-endorsements/policy-endorsements.vue b/src/layouts/policy-endorsements/policy-endorsements.vue
index 31be0d7c..07718a68 100644
--- a/src/layouts/policy-endorsements/policy-endorsements.vue
+++ b/src/layouts/policy-endorsements/policy-endorsements.vue
@@ -82,7 +82,7 @@ export default {
         siteFooter,
         buttonQuestion,
         // eslint-disable-next-line vue/no-reserved-component-names
-        Form,
+        Form
     },
     mixins: [BaseFormMixin],
     async beforeRouteEnter(to, from, next) {
@@ -92,8 +92,8 @@ export default {
         const promiseResultMap = [
             {
                 resultKey: 'cmsContent',
-                promise: cmsContentPromise,
-            },
+                promise: cmsContentPromise
+            }
         ];
         // use resultMap to populate layout content.
         const resultMap = await settleAllPromises(promiseResultMap);
@@ -113,11 +113,11 @@ export default {
             schoolPropertyAnswer: '',
             parkingLotAnswer: '',
             hasValidCarId:
-                this.mainStore.vehicle.carId &&
-                this.mainStore.vehicle.carId !== '0',
+                this.mainStore.vehicle.carId
+                && this.mainStore.vehicle.carId !== '0',
             rules: {
-                selectionRequired: globalRules.OPTION_REQUIRED,
-            },
+                selectionRequired: globalRules.OPTION_REQUIRED
+            }
         };
     },
     computed: {
@@ -135,18 +135,14 @@ export default {
         },
         educatorEndorsement() {
             return (
-                useMainStore().order.policy.endorsements?.includes(
-                    endorsementOptions.EDUCATOR
-                ) ?? false
+                useMainStore().order.policy.endorsements?.includes(endorsementOptions.EDUCATOR) ?? false
             );
         },
         parkingGuardEndorsement() {
             return (
-                useMainStore().order.policy.endorsements?.includes(
-                    endorsementOptions.PARKING_GUARD
-                ) ?? false
+                useMainStore().order.policy.endorsements?.includes(endorsementOptions.PARKING_GUARD) ?? false
             );
-        },
+        }
     },
     methods: {
         async forwardButtonAction() {
@@ -156,7 +152,7 @@ export default {
                     questionNum: 1,
                     endorsementName: endorsementOptions.EDUCATOR,
                     questionText: this.schoolPropertyQuestionText,
-                    selectedAnswer: this.schoolPropertyAnswer,
+                    selectedAnswer: this.schoolPropertyAnswer
                 });
             }
             if (this.parkingGuardEndorsement) {
@@ -164,14 +160,12 @@ export default {
                     questionNum: 2,
                     endorsementName: endorsementOptions.PARKING_GUARD,
                     questionText: this.parkingLotQuestionText,
-                    selectedAnswer: this.parkingLotAnswer,
+                    selectedAnswer: this.parkingLotAnswer
                 });
             }
 
             // save answers to store as order.policy.endorsementQuestionAnswers
-            useMainStore().saveEndorsementQuestionAnswers(
-                this.questionAnswersArray
-            );
+            useMainStore().saveEndorsementQuestionAnswers(this.questionAnswersArray);
 
             return this.navigateForward();
         },
@@ -188,24 +182,24 @@ export default {
                     this.$route
                 );
             }
-        },
-    },
+        }
+    }
 };
 </script>
 
 <style lang="scss" scoped>
-:deep .subheader-primary {
+:deep(.subheader-primary) {
     margin-bottom: map-get($spacers, 2);
 }
 
-:deep .subheader-secondary {
+:deep(.subheader-secondary) {
     p {
         font-size: $h6-font-size;
         line-height: map-get($spacers, 5);
     }
 }
 
-:deep .subheader-secondary.justify-content-center {
+:deep(.subheader-secondary.justify-content-center) {
     p {
         text-align: left;
     }
@@ -215,7 +209,7 @@ export default {
     margin-bottom: map-get($spacers, 5);
 }
 
-:deep .question-text {
+:deep(.question-text) {
     & > span {
         text-align: left;
         line-height: map-get($spacers, 5);
@@ -223,7 +217,7 @@ export default {
     margin-bottom: map-get($spacers, 2);
 }
 
-:deep div.question-text.d-flex {
+:deep(div.question-text.d-flex) {
     margin-top: map-get($spacers, 4);
 }
 </style>