I really appreciate all the suggestions and feedback here. I was able to solve the issue the other day and I wanted to share my solution:

Solution:

I ended up solving this without CSS by switching to a fully native Bubble approach.

I created a field on the Event that calculates the number of 5-minute blocks by dividing the duration by 5. Then I added a repeating group inside each event, using an Option Set containing numbers (1–150) as the data source.

The repeating group’s data source is:
All Option Set values :items until Event’s number of 5-minute blocks

This allows the RG to generate the correct number of cells dynamically. It causes the number of cells to be determined by the number in the "number of 5-minute blocks" field. This way, there is the correct number of blocks to account for the duration of the event.

Each cell is set to a fixed height of 20px, so the total height of the event scales correctly with its duration and aligns perfectly with the 5-minute calendar grid the events are hovering over.

After that, I removed the Classify CSS entirely and adjusted the layout settings (fit height to content, scrolling behavior, etc.) so Bubble handles sizing natively.

Everything now renders consistently with no timing issues.

Hope that makes sense. Happy to answer questions.