flixlix/shadcn-date-picker: Spacing Between Months in DayPicker Causing Overflow

[Ganbin]

Hi,

I'm using a calendar with numberOfMonths={2} and showWeekNumber. However, the two months feel too close together, so I tried adding some spacing using gap, margin, and padding within the months classNames. The issue is that while the spacing applies, the main container doesn’t adjust accordingly, causing the second month to overflow.

I inspected the structure and found that the div with the rdp-root class has an inline style="width: 497.6px;", which seems to be dynamically calculated by the DayPicker component. Because of this, any modifications to inner elements lead to overflow, as the container width remains fixed.

Additionally, I added a margin: 0.5rem to my custom WeekNumber component, and even that small adjustment causes slight overflow. It’s not immediately noticeable, but it confirms that the main container doesn’t account for internal spacing.

Is there a way to introduce spacing between the months without breaking the layout?

Thanks!

[Ganbin]

Never mind, I needed to write it down before to see it. I use https://github.com/flixlix/shadcn-date-picker and it is hardcoded in the style. Sorry for the noise.

[rodgobbi]

All good @Ganbin
If you find any issues again, try to reproduce it by forking this CodeSandbox so it's to visualize and discuss.