[ui5-dialog]: compact density has no effect on content padding
@dimovpetar is already working on this.
Since Sep 11, 2026.
- Dominant language
- TypeScript
- Stars
- 1.8k
- Forks
- 285
- Avg merge
- 3d 2h
- Merged PRs (30d)
- 59
Description
Bug Description
ui5-dialog (and all popups using PopupsCommon-parameters.css ) ignores compact density when applying content padding. The media-range-based padding vars (--_ui5_popup_content_padding_m_l: 2rem, --_ui5_popup_content_padding_xl: 3rem) are not overridden in compact mode, so a wide dialog under .ui5-content-density-compact still renders 32px horizontal padding instead of 16px.
23 other components in the repo have a @container style(--ui5_content_density: compact) block in their *-parameters.css file. PopupsCommon-parameters.css is missing it.
Affected Component
ui5-dialog / ui5-popup
Expected Behaviour
Under .ui5-content-density-compact, dialog content padding should be 1rem (16px) at all breakpoints, consistent with Fiori compact spec and with how other components handle density.
Isolated Example
https://stackblitz.com/edit/js-t13sqby5?file=index.html
Steps to Reproduce
- Add
.ui5-content-density-compactto a parent element - Open a
ui5-dialogthat is wide enough to getmedia-range="M"or"L" - Inspect computed padding on
.ui5-popup-content— it renders32pxinstead of16px
Log Output, Stack Trace or Screenshots
No response
Priority
Low
UI5 Web Components Version
2.26.0
Browser
Chrome
Operating System
No response
Additional Context
ViewSettingsDialog-parameters.css in the same repo correctly implements the compact override pattern.
Proposed fix, add to packages/main/src/themes/base/PopupsCommon-parameters.css:
@container style(--ui5_content_density: compact) {
:host {
--_ui5_popup_content_padding_m_l: 1rem;
--_ui5_popup_content_padding_xl: 1rem;
--_ui5_popup_header_footer_padding_m_l: 1rem;
--_ui5_popup_header_footer_padding_xl: 1rem;
}
}
Organization
No response
Declaration
- I’m not disclosing any internal or sensitive information.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.