cssreact-big-calendar

React Big Calendar expanding its container


For screens that are 13" and smaller, you will see that the calendar is expanding over the container/screen width and thus causing horizontal scrollbar to happen rendering parts of the content outside the window...

https://hojden.fanus.app/calendar

This happens only in the current month (March), and not all others. For example February, previous month, is totally fine.

I have so far reckoned that the issue happens due to titles of some entries, some of them being pretty long. Although there's ellipsis solution in the CSS, the problem seems to originate from there. Try to delete the entire last week of the month in the DOM (27 Mar - 2 Feb) and the calendar will work to fit in the container.

I'm stuck as to find the solution.

Please advise, thanks!


Solution

  • putting these styles in may be a temporary solution:

    #main-viewport { width: -webkit-fill-available; padding-right: 5%; }

    makes it look better for me...