From 2bfb265291fc95a5ab58496ff6ed57f8b9357a92 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Thu, 13 Oct 2022 09:30:50 -0400
Subject: [PATCH] Moved div to inside label so month name was hoverable with
 label.

Updated CSS accordingly.
---
 .../date-picker/date-picker.vue                  | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/common-components/date-picker/date-picker.vue b/src/common-components/date-picker/date-picker.vue
index 121f6ed89..e07f8d38c 100644
--- a/src/common-components/date-picker/date-picker.vue
+++ b/src/common-components/date-picker/date-picker.vue
@@ -43,8 +43,8 @@
           <input type="radio" name="day-of-month" id="oct-1" />
           <label class="highlighted-day selectable-day" :class="[isCurrentDay ? 'current-day' : '']" for="oct-1"><span>1</span>
             <span class="sr-only">October 1st</span>
+            <div v-if="isFirstDayOfMonth" class="current-month first-day">OCT</div>
           </label>
-          <div v-if="isFirstDayOfMonth" class="current-month first-day">OCT</div>
         </div>
         <div class="grid-item radio-wrapper">
           <input type="radio" name="day-of-month" id="oct-2" />
@@ -168,8 +168,10 @@
         </div>
         <div class="grid-item radio-wrapper">
           <input type="radio" name="day-of-month" id="nov-1" />
-          <label class="future-day selectable-day" for="nov-1"><span>1</span></label>
-          <div v-if="isFirstDayOfMonth" class="current-month first-day">OCT</div>
+          <label class="future-day selectable-day" for="nov-1"><span>1</span>
+            <div v-if="isFirstDayOfMonth" class="current-month first-day">OCT</div>
+          </label>
+
         </div>
         <div class="grid-item radio-wrapper">
           <input type="radio" name="day-of-month" id="nov-2" />
@@ -318,7 +320,7 @@ export default {
           &:after {
             background-color: $white;
           }
-          + .first-day {
+          .first-day {
             color: $white;
           }
         }
@@ -331,7 +333,7 @@ export default {
         &:after {
           background-color: $white;
         }
-        + .first-day {
+        .first-day {
           color: $white;
         }
       }
@@ -380,7 +382,7 @@ export default {
           position: absolute;
           top: 28px;
         }
-        + .first-day {
+        .first-day {
           color: $blue;
         }
       }
@@ -414,7 +416,7 @@ export default {
             color: $white;
           }
         }
-        + .first-day {
+        .first-day {
           color: $white;
         }
       }