Datepicker caption select icons sometimes overlap text

[adidahiya]

Environment

• Package version(s): @blueprintjs/datetime 5.0.6, @blueprintjs/datetime2 1.0.6
• Operating System: macOS
• Browser name and version: Chrome 114

Steps to reproduce

Render a DatePicker, DateRangePicker, DateInput, or DateRangeInput in a way that makes the .DayPicker element take up its minimum width (currently defined as 210px)

Actual behavior

state.monthRightOffset computation inside <DatePickerCaption> is slightly off, which makes the dropdown icon overlap the month and year text by 7px

Expected behavior

No overlap

Possible solution

Maybe we just need to increase the min-width?

[adidahiya]

This turned out to be a CSS specificity/ordering issue when blueprint.css was loaded onto the page after blueprint-datetime.css. It can be fixed by increasing the specificity of some datepicker caption styles.