This issue was duplicated from #7735, as issues can only be transferred after the ui5-webcomponents-react repository has been migrated to the UI5 organization as well.

Describe the bug

There is additional spacing when the DatePicker is opened and the content density is set to "compact". Please see the attached StackBlick example.

I investigated it a bit deeper and found out, that the responsive popover width is set to 20rem (in both modes "compact" and "default"). But the actual calendar width in the content changes based on the different settings:

• webcomponents/packages/main/src/themes/base/sizes-parameters.css

  Line 186 in 8edc111

  --_ui5_calendar_width: 17.75rem;

• webcomponents/packages/main/src/themes/base/sizes-parameters.css

  Line 4 in 8edc111

  --_ui5_calendar_width: 20rem;

Isolated Example

https://stackblitz.com/edit/github-bndx5rqy?file=index.html,src%2FApp.tsx

Reproduction steps

1. Open the DatePicker with content-density "compact"
2. Open the DatePicker with the default content density
3. The responsive popover width stays the same, but the content in the "compact" view is more narrow, leading to unnecessary extra space

Expected Behaviour

The responsive popover width should also be adjusted based on the content density, so no unnecessary space is shown

Screenshots or Videos

No response

UI5 Web Components for React Version

2.14.0

UI5 Web Components Version

2.14.0

Browser

Chrome

Operating System

MacOS

Additional Context

No response

Relevant log output

Organization

No response

Declaration

• I’m not disclosing any internal or sensitive information.