Merge pull request #1221 from Safelite/bugfix/CSR-1474

Bugfix/CSR-1474

src/digital-components/date-picker/date-picker.vue

@@ -6,7 +6,7 @@
                 v-for="month in months"
                 :key="`${month.monthLabel}-${month.yearNum?.toString()}`"
                 :id="`${month.monthLabel}-${month.yearNum?.toString()}`"
-                class="calendar-grid-container position-relative"
+                class="calendar-grid-container"
                 :class="[
                     hideSomeDaysForInitialView ? 'partial-month-initial-view' : '',
                     month.monthClass,
@@ -628,12 +628,16 @@ export default {
 .date-picker {
     overflow: hidden;
     position: relative;
-    height: 100%;
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
 
     fieldset {
         overflow-y: auto;
-        height: 88%;
+        flex-grow: 1;
         position: relative;
+        padding-bottom: 6rem; // arbitrary amount to provide enough spacing for scroll animation
+        max-height: 21.25rem; // 340px... arbitrary amount to not push View More link out of view on iphones
     }
     .loader {
         position: absolute;
@@ -648,6 +652,7 @@ export default {
     .calendar-grid-container {
         margin: 0 auto 2rem auto;
         max-width: 414px;
+        position: relative;
         transition: height ease 2s, opacity ease 2s;
         display: grid;
         grid-template-columns: repeat(7, 1fr);
@@ -864,21 +869,17 @@ export default {
             opacity: 0;
             max-height: 0;
             margin-bottom: 0;
+            overflow: hidden;
         }
         &.last-available-month:not(&.month-hidden) {
             margin-bottom: 14rem;
         }
     }
-    #bottom-spacer {
-        height: 20rem;
-        background: lightblue;
-    }
 
     .btn-link {
         font-weight: 500;
         text-underline-offset: 4px;
-        position: absolute;
-        top: 90%;
+        flex-grow: 0;
     }
 
     .past {