search

SAP / ui5-webcomponents

UI5 Web Components - the enterprise-flavored sugar on top of native APIs! Build SAP Fiori user interfaces with the technology of your choice.
https://sap.github.io/ui5-webcomponents/
Apache License 2.0
1.54k stars 265 forks source link

[ui5-page]: double footer wrapper #9756

Closed nnaydenow closed 1 month ago

nnaydenow commented 2 months ago

Bug Description

Footer has shadows borders and 2 box shadows

image

Affected Component

ui5-page

Expected Behaviour

No response

Isolated Example

https://sap.github.io/ui5-webcomponents/nightly/packages/fiori/test/pages/Page.html

Steps to Reproduce

1. 2. 3. ...

Log Output, Stack Trace or Screenshots

No response

Priority

None

UI5 Web Components Version

nightly

Browser

Chrome

Operating System

No response

Additional Context

No response

Organization

No response

Declaration

elenastoyanovaa commented 2 months ago

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

The issue is reproducible in the test page provided. Tried to debug a little bit and I see that the issue is reproducible once the following breakpoint is met:

@container (min-width: 600px) and (max-width: 1023px) {
    ::slotted([ui5-bar][slot="header"]), ::slotted([ui5-bar][slot="footer"]) {
        box-sizing: border-box;
        padding: 0px 1.25rem;
    }
}

if you zoom out the issue is not reproducible.

Also I checked the styles of the ui5-bar:

.ui5-bar-root {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: inherit;
    width: inherit;
    background-color: inherit;
    box-shadow: inherit;
    border-radius: inherit;
}

if you remove the box-shadow the issue is not present, but I am not sure if the expected visualisation is to have the floating footer with no padding on the left and right side.

As a reference the issue is not reproducible in the Dynamic Page.

Kind Regards, Elena