nicer dates

packages/bbui/src/Tooltip/Context.svelte

@@ -157,6 +157,8 @@
 
     border-radius: 5px;
     box-sizing: border-box;
+    opacity: 0;
+    overflow: hidden;
     border: 1px solid var(--grey-4);
 
     transition: width 300ms ease-in, height 300ms ease-in, top 300ms ease-in, left 300ms ease-in;

packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/Column.svelte

@@ -7,6 +7,17 @@
   }
   export let schema
   export let columnName
+
+  const parseDate = (isoString) => {
+    if ([null, undefined, ""].includes(isoString)) {
+      return "None"
+    }
+
+    const epoch = Date.parse(isoString);
+    const date = new Date(epoch);
+
+    return date.toLocaleString();
+  }
 </script>
 
 
@@ -23,11 +34,11 @@
   {:else if schema.type === "datetime"}
     <Property
       name="Earliest"
-      value={schema?.constraints?.datetime?.earliest === "" ? "None" : schema?.constraints?.datetime?.earliest}
+      value={parseDate(schema?.constraints?.datetime?.earliest)}
     />
     <Property
       name="Latest"
-      value={schema?.constraints?.datetime?.latest === "" ? "None" : schema?.constraints?.datetime?.latest}
+      value={parseDate(schema?.constraints?.datetime?.latest)}
     />
     <Property
       name="Ignore time zones"

packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Property.svelte

@@ -37,7 +37,7 @@
 
 
   .propertyDivider {
-    padding: 0 2px;
+    padding: 0 4px;
     flex-shrink: 0;
   }
 

packages/builder/src/components/design/settings/controls/FieldContext/lines/Column.svelte

@@ -38,6 +38,7 @@
 <Line noWrap>
   <InfoWord
     on:mouseenter={() => setExplanationSubject(subjects.column)}
+    on:mouseleave={() => setExplanationSubject(subjects.none)}
     href={tableHref}
     text={columnName}
   />