Event timeline form clean-ups

Additional UI clean-ups were set-aside as follow-up items from !81284 (closed)

• Introduce character limit + character counter for timeline events Moved to #372289 (closed)

• Fix spacing between empty state message and 'Add new timeline event' button. Related discussion: !81284 (comment 903399642) See #358637 (comment 1024556024) Moved to #384191 (closed)

• Fix alignment of the timeline display (related discussion): Fixed! Screenshot_2022-11-30_at_1.36.25_PM

• Increase space between days (16px): moved to #384237 (closed)

• Update text size/colors of timeline items (see Figma): moved to #384236 (closed)

• Subscriptions for real time events moved to #384239 (closed)

We can check into GraphQL subscriptions for real time updates as per this slack thread.

• Add frontend validation. covered by #358637 (comment 1192126143)

The frontend is currently missing validation, for instance if the user doesn't add add a description, the timeline event mutation will fail, but we don't tell the user this ahead of time.

• Spacing cleanup moved to #384237 (closed)

It looks like the space on the first row of timeline entries is a bit smaller than the space on the subsequent rows:

I can see it a bit when I inspect the rows, too. The first row:

The second one:

I think the orange in the second image is the space above the green in the first image. But, there's also that additional space above the orange in the second image, and I think this is what's causing those subsequent rows to grow in size as compared to the first one?

Discussion here: !100661 (comment 1131988307)