fix(ui5-date-picker): use variable for popover width in compact density mode

[Copilot]

The DatePicker popover was displaying unnecessary whitespace when the content density was set to "compact". This occurred because the popover width was hardcoded to 20rem in the CSS, while the calendar content inside adapts to different widths based on the content density:

• Default mode: Calendar width is 20rem (320px)
• Compact mode: Calendar width is 17.75rem (284px)

This mismatch resulted in a 36px whitespace gap in compact mode, as shown in the issue screenshot.

Solution

The fix replaces the hardcoded width with a CSS variable that already exists in the design system and automatically adapts to content density:

.ui5-date-picker-popover {
-	width: 20rem;
+	width: var(--_ui5_calendar_width);
	.ui5-popover-header {
		width: 100%;
	}
}

The CSS variable --_ui5_calendar_width is defined in the base sizes parameters:

• Default: --_ui5_calendar_width: 20rem
• Compact (within [data-ui5-compact-size] selector): --_ui5_calendar_width: 17.75rem

This ensures the popover width automatically matches the calendar width in both content density modes, eliminating the whitespace issue while maintaining perfect alignment.

Fixes #12277.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• download.cypress.io
• googlechromelabs.github.io
  • Triggering command: /usr/local/bin/node install.js (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

---

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.

[cla-assistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}