From e758582822f474aa7e2c3112fd34a8f022952b00 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 3 Nov 2023 19:26:43 +0000
Subject: [PATCH] Add cross browser style improvements for datepicker

---
 .../Form/Core/DateTimePicker/Calendar.svelte   | 13 ++++++++++---
 .../Core/DateTimePicker/DateTimePicker.svelte  | 18 ++++++++++++++----
 .../Core/DateTimePicker/NumberInput.svelte     |  1 +
 3 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/packages/bbui/src/Form/Core/DateTimePicker/Calendar.svelte b/packages/bbui/src/Form/Core/DateTimePicker/Calendar.svelte
index ae32190e2e..6491ba94ab 100644
--- a/packages/bbui/src/Form/Core/DateTimePicker/Calendar.svelte
+++ b/packages/bbui/src/Form/Core/DateTimePicker/Calendar.svelte
@@ -61,6 +61,10 @@
     onChange(base.year(date.year()).month(date.month()).date(date.date()))
   }
 
+  export const setDate = date => {
+    calendarDate = date
+  }
+
   const cleanYear = cleanInput({ max: 9999, pad: 0, fallback: now.year() })
 </script>
 
@@ -85,6 +89,7 @@
         value={calendarDate.year()}
         min={0}
         max={9999}
+        width={64}
         on:change={handleCalendarYearChange}
         on:input={cleanYear}
       />
@@ -173,6 +178,9 @@
   .spectrum-Calendar {
     width: auto;
   }
+  .spectrum-Calendar-header {
+    width: auto;
+  }
   .spectrum-Calendar-title {
     display: flex;
     justify-content: flex-start;
@@ -196,12 +204,11 @@
     background: var(--spectrum-global-color-blue-400);
   }
   .spectrum-Calendar tr {
+    box-sizing: content-box;
     height: 40px;
   }
   .spectrum-Calendar-tableCell {
-    height: 32px;
-    width: 32px;
-    padding: 4px;
+    box-sizing: content-box;
   }
   .spectrum-Calendar-nextMonth,
   .spectrum-Calendar-prevMonth {
diff --git a/packages/bbui/src/Form/Core/DateTimePicker/DateTimePicker.svelte b/packages/bbui/src/Form/Core/DateTimePicker/DateTimePicker.svelte
index 3ae2571166..cccfea612c 100644
--- a/packages/bbui/src/Form/Core/DateTimePicker/DateTimePicker.svelte
+++ b/packages/bbui/src/Form/Core/DateTimePicker/DateTimePicker.svelte
@@ -25,6 +25,7 @@
   let isOpen = false
   let anchor
   let popover
+  let calendar
 
   $: parsedValue = parseValue(value)
   $: showCalendar = !timeOnly
@@ -107,6 +108,12 @@
 
     dispatch("change", newValue)
   }
+
+  const setToNow = () => {
+    const now = dayjs()
+    calendar?.setDate(now)
+    handleChange(now)
+  }
 </script>
 
 <DateTimeInput
@@ -133,7 +140,11 @@
   {#if isOpen}
     <div class="date-time-popover">
       {#if showCalendar}
-        <Calendar value={parsedValue} onChange={handleChange} />
+        <Calendar
+          value={parsedValue}
+          onChange={handleChange}
+          bind:this={calendar}
+        />
       {/if}
       <div class="footer" class:spaced={showCalendar}>
         {#if showTime}
@@ -147,7 +158,7 @@
           >
             Clear
           </ActionButton>
-          <ActionButton size="S" on:click={() => handleChange(dayjs())}>
+          <ActionButton size="S" on:click={setToNow}>
             {showTime ? "Now" : "Today"}
           </ActionButton>
         </div>
@@ -164,7 +175,7 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    gap: 32px;
+    gap: 60px;
   }
   .footer.spaced {
     padding-top: 14px;
@@ -175,6 +186,5 @@
     display: flex;
     justify-content: flex-end;
     gap: 6px;
-    margin-right: 4px;
   }
 </style>
diff --git a/packages/bbui/src/Form/Core/DateTimePicker/NumberInput.svelte b/packages/bbui/src/Form/Core/DateTimePicker/NumberInput.svelte
index 5b7c6dccce..8d7c72e94e 100644
--- a/packages/bbui/src/Form/Core/DateTimePicker/NumberInput.svelte
+++ b/packages/bbui/src/Form/Core/DateTimePicker/NumberInput.svelte
@@ -34,6 +34,7 @@
     font-weight: bold;
     font-family: var(--font-sans);
     -webkit-font-smoothing: antialiased;
+    box-sizing: content-box;
   }
   input:focus,
   input:hover {