Months with 6 lines cause the calendar to shift if more than 2 months shown

[incognos]

Describe the bug Months with 6 lines cause the calendar to shift if more than 2 months shown

To Reproduce

over the summer of 2024, june starts on a saturday and ends on a sunday. This causes the month to have 6 lines.

<DatePicker
  swapRange
  selected={fieldStartDate.value}
  onChange={(dates: [Date | null, Date | null]) => {
    const [startDate, endDate] = dates
    setFieldValue('reportStartDate', startDate)
    setFieldTouched('reportStartDate', true)
    setFieldValue('reportEndDate', endDate)
    setFieldTouched('reportEndDate', true)
  }}
  maxDate={new Date()}
  startDate={fieldStartDate.value}
  endDate={fieldEndDate.value}
  monthsShown={4}
  selectsRange
  inline
  showDisabledMonthNavigation
/>

Expected behavior I don;t expect september to be completely out of alignment with the other months

Screenshots

Desktop (please complete the following information):

• OS: MAc OS 14.6.1
• Browser Brave
• Version Version 1.70.126 Chromium: 129.0.6668.100 (Official Build) (arm64)

[pmacmillan]

not sure if this is a good way to address this, but here is a workaround:

.react-datepicker {
  display: flex;
  flex-wrap: wrap;
}

or combine with calendarClassName if you're wary of overriding the main class.

i.e.

   <DatePicker ... calendarClassName="react-datepicker-flexible" ... />

.react-datepicker-flexible {
  display: flex;
  flex-wrap: wrap;
}

[incognos]

Did not fix it but appreciate the response. Limited to 2 months for now.