fix(css): Shorter events overlapping

[pallavibakale]

Fixes: #8229

Removed min-height for shorter events to avoid overlapping events and a better view.
Screenshot attached:

Before fix:

1. With 1 hour density setting:

2. With 10 mins density setting:

After fix:

1. With 1 hour density setting:

2. With 10 mins density setting:

[SebastianKrupinski]

Hi @pallavibakale

Thanks for the PR. I will have some one from the design team review the changes.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!

[SebastianKrupinski]

@nimishavijay @kra-mo

Please have a look at the proposed changes

[nimishavijay]

Good idea! However, I'm not sure if this would be accessible if the min-height is completely removed. Since they are all clickable items, the minimum height should be 24px to make sure it remains accessible (especially important on mobile), and we should also try to center the text in that little container so it doesn't appear cut off as much as possible :)

[pallavibakale]

@nimishavijay I agree on keeping the minimum height to 24px. The text is vertically centered, it appears to be clipped when there is no minimum height set. The padding adds the extra space, without padding the text sticks to container which is not recommended.
Could you suggest some other ways to resolve this issue?

[nimishavijay]

Just quickly checked with the dev tools and using a 24px min-height doesn't cut off any text, so we can do ahead with that :) the center alignment is too negligible in this case, so we don't have to necessarily adjust it :)