React Big Calendar alignment issue

Question

I've been working on an application that uses React Big Calendar. We are using a thin scroll bar and when there is an overflow, the TimeGridHeader isn't well aligned :

React Big Calendar automatically adds a right margin that has the size of the default scrollbar, however our scroll bar is smaller so it creates a too big gap, and the alignment is bad.

Do you have any idea on how I could change this default margin value when the there's an overflow ? Thanks

I've tried setting 'margin: 0 !important' to the class .rbc-overflowing. It did override the right margin, howver I'd prefer doing it in another way.

Answer 1

I've got this same issue now and I guess there isn't a better way to fix it other than overwriting the margin-right property. It seems to be added dynamically as it is placed on the element.style as seen in developer tools: element.style screenshot.

On my case, I noticed too that it is a browser specific issue, as it was only happening on Chromium-like browsers. On Firefox, it wasn't happening.

To avoid overwriting unwanted CSS, you could try to cascade the solution the max that you can, so that it only affects the given case. Here is my solution:

.rbc-calendar .rbc-time-view .rbc-time-header.rbc-overflowing {
    margin-right: unset !important;
}