UI5 / UI5/webcomponents

[ui5-dialog]: compact density has no effect on content padding

Open
#14,023 3 comments 1 reaction 1 assignee View on GitHub

@dimovpetar is already working on this.

Since Sep 11, 2026.

author action bug Low Prio TOPIC RD
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
  1. Add .ui5-content-density-compact to a parent element
  2. Open a ui5-dialog that is wide enough to get media-range="M" or "L"
  3. Inspect computed padding on .ui5-popup-content — it renders 32px instead of 16px
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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.