Cannot read title of event when it overlaps with others on day view #1219

Expected Behavior

A user can always see the title of their events in the /day view, regardless of whether it overlaps with another one.

Current Behavior

The event title is cut off by the border of the other events that it overlaps with

Use Case

Allow users to view and interact with overlapping events on the day view without confusion. Improves clarity in scheduling and daily planning, especially for users with busy schedules.

Additional Context

There are a couple of approaches we could take for this:

1. Recommended: Adjust the styles by adding a border around the events and moving the event title to the top of the event rectangle. This should hopefully be a more straightforward way to fix the problem, as it'd allow us to simply show events without worrying about the widths of their rectangles.
2. Adjusting the position of events so that they make room for each other. This would involve shifting some to the right and narrowing their widths based on overlaps. We currently do a naive implementation of this on the week view by simply halving the widths. However, this wouldn't be sustainable on the day view, which already has a very narrow column.

Adjust event widths to improve overlapping event styles in the daily planner. The current approach from the week view (simply halving the width) is ineffective due to the narrow column. A more advanced solution is needed to visually distinguish overlapping events without loss of clarity or usability.

This was not included in MVP as it is too tricky for the initial release. Consider designing a layout and algorithm that adapts event width dynamically. Explore existing POCs or relevant calendar libraries for inspiration.

Layout Algorithm

• Overlapping Events will be overlayed on top of each other horiontally
• Subsequent overlapping events in a grid will be placed on top of the previous events.
• • When there are less than 3 overlapping events, the events will have equal widths and be spaced apart - flex, space-between, max-w-1/3 min-w-1/3
• When there are more than 3 overlapping events, the min and max width of each event will range from max-w-{no of overlapping events - index}/{no of overlapping events} min-w-3{no of overlapping events - index}{no of overlapping events}, with increasing z-index values