WIP

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

@@ -12,7 +12,7 @@
                         month.monthClass,
                         isAddingNewMonth === true ? 'is-adding-new-month' : '',
                     ]">
-                    <div class="month-year body-small d-flex align-items-center ps-3 small">
+                    <div class="month-year body-small d-flex align-items-center small">
                         {{ month.monthLabel }} {{ month.yearNum.toString() }}
                     </div>
                     <div
@@ -20,6 +20,7 @@
                         class="legend caption d-flex align-items-center justify-content-end">
                         <span class="legend-circle me-1"></span> &equals; Available
                     </div>
+                    <div class="separator-line"></div>
                     <div class="nav-back ps-3"><button></button></div>
                     <div class="nav-forward pe-3"><button></button></div>
                     <!-- Do the days of the weeek need to be read? -->
@@ -52,16 +53,16 @@
                 </div>
             </div>
         </fieldset>
+        <button
+            v-if="calendarViewDirection === 'future'"
+            type="button"
+            class="btn-link"
+            @click="
+                goForward();
+            ">
+            View more dates
+        </button>
     </div>
-    <button
-        v-if="calendarViewDirection === 'future'"
-        type="button"
-        class="btn-link"
-        @click="
-            goForward();
-        ">
-        View more dates
-    </button>
 </template>
 
 <script>
@@ -391,8 +392,18 @@ export default {
 
 <style lang="scss" scoped>
 .date-picker {
+    position: relative;
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    height: 98vh;
+    fieldset {
+        height: 600px;
+        overflow: auto;
+        position: relative;
+    }
     .calendar-grid-container {
-        margin: 4px auto;
+        margin: 0 auto 2rem auto;
         max-width: 414px;
         max-height: 500px;
         overflow: hidden;
@@ -401,11 +412,11 @@ export default {
         grid-template-columns: repeat(7, 1fr);
         justify-content: center;
         align-items: center;
-        padding: 0;
+        padding: 0 .75rem;
 
         .grid-item {
             text-align: center;
-            margin: 10%;
+            margin: 10px 3px;
 
             &.first-day-,
             &.first-day-0 {
@@ -431,19 +442,17 @@ export default {
             }
         }
 
+        .separator-line {
+            grid-area: 2/1/2/8;
+            border-top: 1px solid $gray-500;
+            margin: 0.75rem 0;
+        }
+
         .month-year {
             grid-area: 1 / 1 / 2 / 5;
             text-transform: uppercase;
             font-weight: 300;
             letter-spacing: 0.75px;
-
-            &:after {
-                content: '';
-                position: absolute;
-                width: 100%;
-                margin: 6rem 0 4.2rem 0;
-                border-bottom: 1px solid $gray-300;
-            }
         }
         .legend {
             grid-area: 1 / 5 / 2 / 8;
@@ -674,13 +683,17 @@ export default {
             }
         }
     }
-    .btn-link {
-        background: transparent;
-        border: none;
-        margin-top: 2rem;
-    }
     .new-month {
         max-height: 550px;
     }
 }
+.btn-link {
+    display: flex;
+    width: 100%;
+    justify-content: center;
+    background: transparent;
+    border: none;
+    position: absolute;
+    bottom: 2rem;
+}
 </style>

src/layouts/demo-date-picker/demo-date-picker.vue

@@ -50,6 +50,7 @@ export default {
                 { year: 2023, month: 3, date: 5 },
                 { year: 2023, month: 3, date: 22 },
                 { year: 2023, month: 4, date: 13 },
+                { year: 2023, month: 4, date: 7 },
                 { year: 2023, month: 4, date: 14 },
                 { year: 2023, month: 4, date: 26 },
                 { year: 2023, month: 5, date: 21 },
@@ -81,3 +82,9 @@ export default {
     },
 };
 </script>
+
+<style lang="scss">
+    // .page-container-grouped-styles {
+    //     padding: 0 .5rem !important;
+    // }
+</style>