[Dialog]: Buttons leave too much spacing on the right

[mhchem]

Describe the bug

Buttons leave too much spacing on the right. There should be 1rem, not 2 (in this size).

https://sap.github.io/ui5-webcomponents-react/?path=/docs/modals-popovers-dialog--docs

UI5 Web Components for React Version

latest

UI5 Web Components Version

latest

Browser

Chrome

Declaration

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

[Lukas742]

Hi @mhchem

Thanks for reporting! I'll forward this issue to our UI5 Web Components Colleagues as the affected component is developed in their repository.

---

Hi colleagues,

the dialog in our example is implemented as shown in this codeSandbox example.

[didip1000]

Hello @SAP/ui5-webcomponents-topic-rd,

Can you look into this? It seems like the dialog footer and the bar in the slot are applying their own seperate padding.

Thanks,
Diana

[LidiyaGeorgieva]

@Lukas742 ,

When ui5-bar is used inside ui5-dialog there is need of additional styling from your side.
This is mentioned in this example (see the content of the dialog):
https://sap.github.io/ui5-webcomponents/nightly/playground/?path=/story/main-dialog--bar-in-dialog
It took me some time to find it, so there is need to be documented better. I will make one pull request for that.

Please add to your sample similar code to this and this will solve the issue:
#dialog::part(footer) {
padding-inline: 0;
}

Best Regards,
Lidiya

[Lukas742]

Hi @LidiyaGeorgieva

wouldn't this cause discrepancies with the responsive padding of the content and the header of the dialog?
The inline start and end padding of the bar container is always 0.75rem, while the responsive padding of the dialog is 3rem when rendered in XL mode, for example.

[LidiyaGeorgieva]

Hi @Lukas742 ,

Yes, the responsive paddings are not still implemented for the ui5-bar, but sooner or later will be.

Best Regards,
Lidiya

[Lukas742]

Ok, we will adjust our examples then. Thanks :)

[LidiyaGeorgieva]

@Lukas742 I created a Feature Request for the responsive paddings for the ui5-bar: #7359

[LidiyaGeorgieva]

@Lukas742 I have merged my pull request. Could you please move this issue to your project "SAP/ui5-webcomponents-react"

[LidiyaGeorgieva]

Hello @mhchem ,

It looks like the sample is corrected.
I'm closing the issue.

Best Regards,
Lidiya