css inconsistency?

Hi,
I noticed a few things regarding visualization and I’d like to have clarification.

I’m using the plugin to display my public calendar inside a bootstrap modal window.
I’m currently using firefox from a pc so not on mobile.

1) The first time I open the modal (full window) the calendar display like this

img1

2) If I resize to approx tablet size the calendar display like this

img2

3) If I resize approx to phone size it displays like this

img3

4) If I resize again at full window it now displays like this

img4

Questions:

a) When I’m in full windows I would like the calendar to display as 4) and NOT as 1)

b) number 2 looks good but the some titles are overlapping each other (I set the limit at 20 chars in the plugin). Any solution?

c) number 3 looks good for mobile. However in the day selected I have multiple events and I won’t be able to scroll down inside the pop up to see all of them. Is this only happening because I’m from laptop and not in mobile?

Thank you!

https://ww.wp.xz.cn/plugins/google-calendar-events/