IO-1275 Finish appointment notes.

client/src/components/job-at-change/schedule-event.component.jsx

@@ -1,4 +1,4 @@
-import { Button, Popover, Space } from "antd";
+import { Button, Divider, Popover, Space } from "antd";
 import { AlertFilled } from "@ant-design/icons";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -13,6 +13,7 @@ import DataLabel from "../data-label/data-label.component";
 import ScheduleAtChange from "./job-at-change.component";
 import ScheduleEventColor from "./schedule-event.color.component";
 import queryString from "query-string";
+import ScheduleEventNote from "./schedule-event.note.component";
 
 const mapDispatchToProps = (dispatch) => ({
   setScheduleContext: (context) =>
@@ -39,7 +40,7 @@ export function ScheduleEventComponent({
   );
 
   const popoverContent = (
-    <div>
+    <div style={{ maxWidth: "40vw" }}>
       {!event.isintake ? (
         <strong>{event.title}</strong>
       ) : (
@@ -84,12 +85,10 @@ export function ScheduleEventComponent({
             {(event.job && event.job.alt_transport) || ""}
             <ScheduleAtChange job={event && event.job} />
           </DataLabel>
-          <DataLabel label={t("appointments.fields.note")}>
-            {event.note || ""}
-          </DataLabel>
+          <ScheduleEventNote event={event} />
         </div>
       ) : null}
-
+      <Divider />
       <Space wrap>
         {event.job ? (
           <Link to={`/manage/jobs/${event.job && event.job.id}`}>