Calendar - Day cell expands to fill remaining space on last month when endMonth is set

[mariio46]

I encountered a UI bug when using the <Calendar /> component with the range mode and endMonth prop.

When I set both startMonth and endMonth, the day button(s) in the last visible month (usually December) incorrectly expand to fill the remaining horizontal space. This results in the day cell (e.g. December 31) stretching unnaturally, as shown in the screenshot below.

Code:

<Calendar
  mode='range'
  selected={field.value}
  onSelect={field.onChange}
  defaultMonth={field.value.from}
  numberOfMonths={2}
  className='[--cell-size:--spacing(9.5)]'
  buttonVariant='ghost'
  locale={idLocale}
  startMonth={startOfYear(new Date())}
  endMonth={endOfYear(new Date())}
  hidden={{ before: startOfYear(new Date()), after: endOfYear(new Date()) }}
  disabled={{ before: startOfYear(new Date()), after: endOfYear(new Date()) }}
  formatters={{
    formatCaption: (date) => formatDateTime(date, 'MMMM'),
  }}
  showOutsideDays={false}
/>

📸 Screenshot: