CSS Bug: customHeader with a ShellBar in it creates <header> DOM that overlaps <section> by 8 px.

[MBenediktM]

OpenUI5 version: 1.120.1

Browser/version (+device/version): Chrome, latest Version 117.0.5938.92 (Official Build) (64-bit)

Any other tested browsers/devices(OK/FAIL): Also failed in Brave Browser, Version 1.60.114 Chromium: 119.0.6045.124 (Official Build) (64-bit)]

URL (minimal example if possible): Test ready code: https://plnkr.co/plunk/XFsMYL46cTBBur7s

Steps to reproduce the problem:

1. Go to the example of the ShellBar https://openui5.hana.ondemand.com/1.120.1/#/entity/sap.f.ShellBar/sample/sap.f.sample.ShellBarWithMenuButton
2. Go to code editor of the ShellBarWithMenuButton.view.xml
3. Overwrite the xml view witht the following lines: (To add a Page, customHeader, content and Text Control) <mvc:View controllerName="sap.f.sample.ShellBarWithMenuButton.ShellBarWithMenuButton" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.f" xmlns:m="sap.m" xmlns:layout= "sap.ui.layout" height="100%"> <m:Page title="Title" enableScrolling="true" class="sapUiResponsivePadding--header sapUiResponsivePadding--footer"> <m:customHeader> <ShellBar id="sapFShellBarSample" title="Application Title" secondTitle="Short description" homeIcon="./resources/sap/ui/documentation/sdk/images/logo_ui5.png" showCopilot="false" showSearch="true" showMenuButton="true" showNavButton="false" showNotifications="false" showProductSwitcher="false" notificationsNumber="2"> <profile> <m:Avatar initials="UI"/> </profile> </ShellBar> </m:customHeader> <m:content> <m:Text text="Text within content" /> </m:content> </m:Page> </mvc:View>
4. Press Run.
5. See on the preview on the left side, that the content got overlapped by the customHeader with the ShellBar in it. Also, press the "Back to samples" Button in order to close the code editor mode to see the overlapping and 52px height of the header.
6. Check the CSS. contentHeader / ShellBar is 52 px high (header tag). The content (section tag in DOM) has top-margin of 44px -> The header overlaps the content/section by 8 pixels.

What is the expected result? The content should be right under the customHeader. -> The section element should have correct top-margin to be right under the header dom element.

What happens instead? The customHeader overlaps the content by 8 px. header tag has height of 52 px. section tag has top of only 44 px.

Any other information? (attach screenshot if possible) I saw similiar bug 3712 here. Please cross-check if that is relevant here (internal incident 2370012820). Please also see above link to Plunker.

[IlianaB]

Hello @ddNils ,

Thank you for sharing this finding. This issue is related with the already reported one (#3712), so you can still track the progress of Internal Incident 2370012820. The status of the issue will be updated here in GitHub.

Regards, Iliana

[flovogt]

The team decided to work on this issue via backlog item BGSOFUIPIRIN-6322. Updates will be posted here.