In DayPicker an hardcoded bottom margin is added to the calculated height

[marcopiii]

react-dates version
verified on [email protected]

Describe the bug
With horizontal orientation, the element with class DayPicker_transitionContainer (which height is dynamically calculated based on the number of rows to be displayed) has a hardcoded bottom margin of 23px.

This margin is not applied as a margin-bottom property, but by adding 23px to the calculated height.
Due to this, it's not possible to customize the component via CSS to be marginless: if it was a margin-bottom you could just remove it with a margin-bottom: none !important, but since you need to rely on the calculated height you can not override that.

In the source code, I see that the property is set here with transitionContainerStyle
https://github.com/airbnb/react-dates/blob/adec1c86590f1f86a4cd2537c6b780cdc35dd812/src/components/DayPicker.jsx#L1205-L1214

and height is calculated in the following part
https://github.com/airbnb/react-dates/blob/adec1c86590f1f86a4cd2537c6b780cdc35dd812/src/components/DayPicker.jsx#L879-L890

where, as you can see, it is increased by MONTH_PADDING.

I think this could be fixed by making MONTH_PADDING customizable as a component prop, or if it is applied as a margin-bottom instead of being added to the calculated height.

Desktop (please complete the following information):

• OS: macOS 11.4
• Browser: Chrome
• Version: 97.0.4692.71

[AMMAR-62]

Can I take up this issue?

[ljharb]

@AMMAR-62 there's no "pull request wanted" label, and there's no clear description of what, if anything, needs to be done.

[erikt9]

I haven't tested it, but you may be able to fix it by setting margin-bottom: -23px

[ljharb]

It seems fine to me to make MONTH_PADDING configurable via the react-with-styles theme, but default to 23.