Merge pull request #1102 from Safelite/feature/humphries/INSR-7775.1

INSR-8542: Fix some validation and responsive defects

src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue

@@ -8,7 +8,7 @@
         v-for="(tint, index) in tintSelectionOptions"
         :key="index">
         <div class="tint-option">
-            <span>{{ `${partType} - ${tint}` }}</span>
+            <div class="tint-option-text">{{ `${partType} - ${tint}` }}</div>
             <span :class="`tint-image ${convertTintToCSSClass(tint)}`"></span>
         </div>
         <buttonQuestion
@@ -59,7 +59,7 @@ export default {
         partValidationRules() {
             const validationRuleName = `${this.glassLocation}-${this.glassName}-part-required`;
 
-            defineRule(validationRuleName, required(errorMessages.OPTION_REQUIRED));
+            defineRule(validationRuleName, required(`${this.partType} not selected`));
             return validationRuleName;
         },
 
@@ -155,7 +155,7 @@ export default {
             return tint.toLowerCase().replaceAll(' ', '-').replaceAll(',', '');
         },
         toTitleCaseWithExceptions(text) {
-            const exceptions = ['side', 'glass', 'dimming'];
+            const exceptions = ['side', 'glass', 'dimming', 'BPassenger', 'soundproofing'];
             let temp = toTitleCase(text);
             exceptions.forEach((exception) => {
                 const regEx = new RegExp(exception, 'ig');
@@ -176,7 +176,8 @@ export default {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-    height: 2rem;
+    position: relative;
+    min-height: 2rem;
     margin-top: .5rem;
     margin-bottom: .25rem;
     font-weight: 600;
@@ -185,19 +186,48 @@ export default {
     @include media-breakpoint-up(md) {
         justify-content: flex-start;
     }
+
+    .tint-option-text {
+        padding-right: 2.5rem;
+    }
 }
 .radioQuestion {
     :deep(.list-button) {
         margin-bottom: 1rem;
     }
+
+    &:not(:last-child) {
+        :deep(.form-test-error) {
+            display: none;
+        }
+    }
+
+    &:last-child {
+        :deep(.form-test-error) {
+            position: absolute;
+            margin: -10px 0 10px 10px;
+            font-weight: 600;
+            > * {
+                padding: 0;
+            }
+        }
+    }
 }
 .tint-image {
     width: 2rem;
     height: 2rem;
-    margin-left: 1rem;
-    margin-top: -.25rem;
     background-repeat: no-repeat;
     background-image: url(~@/assets/img/tints/GlassTint.png);
+    position: absolute;
+    top: -.25rem;
+    right: 1rem;
+
+    @include media-breakpoint-up(md) {
+        position: relative;
+        top: -.25rem;
+        right: 1.5rem;
+        float: left;
+    }
 }
 .blue-tint-green-shade {
     background-position: -53px -53px;

src/styles/common-validation-styles.scss

@@ -7,11 +7,6 @@ html {
         &.list-button,
         &.list-button.list-group,
         &.list-card &.option-label {
-            border: 1px solid $red;
-            position: relative;
-            z-index: 4;
-            border-radius: 60px;
-
             .button-content {
                 border: 1px solid $red;
             }