Date Picker with mode 'multiple' computes wrong heights

[FrancisRoc]

Reproduction link

CodeSandbox

Steps to reproduce

1. Overwrite ConfigProvider theme property with theme: { token: { controlHeight: 40 }
2. Use DatePicker with property multiple to true
3. See the input height is 46px instead of 40px

What is expected?

DatePicker input with default size='middle' should be the height of the value passed in the theme token for control heights. In this scenario the height should be 40px and NOT 46px
Also, I would expect the placeholder to work, doesn't seem to work. Also included that in the repro sandbox

What is actually happening?

The height of date picker in mode multiple is based on some padding we apply and the height line-height of the tags items or simply the empty picker selector div. That padding height/line-height is wrong and gives the wrong height (46px instead of the 40px expected from the controlHeight token)

Environment	Info
antd	5.14.1
React	React 18.2.0
System	MacOS Ventura version 13.4
Browser	Version 119.0.6045.199 (Official Build) (arm64)

---

It is an exciting update cause the UX of our workaround to have a multi date picker wasn't as good. This is a small bump in the road and the style is quite complex to understand and I wouldn't be confortable changing values there. Otherwise I would be down to open a PR

This is explained only in the context of components with default size type ('middle') but the bug applies to other sizes too.
Also, NOTE that this is BEFORE we select value(s). After that it get more complex cause there is also the styles applied to the tags that will apply a wrong height and mess with the control height

This might not be the exact bug and all the cases the height is broken but I think it gives a good start point to understand why this bug happens.

Hierarchy important to understand the height bug is only the 2 top level DIVs: div (ant-picker-multiple, other clases...) > div (ant-picker-selector)
With Antd default configuration this is what happens:

1. .ant-picker-multiple applies (basically the same for padding-top and bottom):
   padding-top: max(calc((var(--ant-control-height) - calc(var(--ant-font-height) 2px) - var(--ant-line-width) * 2)/2),0px); with controlHeight of 24px, fontHeight of 22px and lineWidth of 1px => 3px (Total of 6px top bottom)
2. .ant-picker-multiple .ant-picker-selector:after applies a line-height:
   line-height: var(--ant-date-picker-multiple-item-height); Where this value is equal the controlHeightSM value (24px). Line of code assigning the itemHeight value

Total height with antd token values => 24 6 = 30px which is the expected controlHeight since that design token is set to 30px by default
Now, in our case we define controlHeight: 40 and controlHeightSM: 32 which will give a height of 48px which isn't equal to the expected 40px

[FrancisRoc]

BTW, This is fixable with overwritten styling but we shouldn't need to modify the styling. And for other sizes you might also need to do some similar fixes

ant-picker-multiple:not(.ant-picker-sm):not(.ant-picker-lg) {
      .ant-picker-selector:after {
        line-height: 24px;
      }
      .ant-picker-selection-item {
        height: 24px;
        line-height: 22px;
      }
}

[FrancisRoc]

Potential related issue: #45850