IdsBreadcrumb: Breadcrumb overflow menu shows incorrectly when used in a 4.x header

[pwpatton]

Describe the bug When using ids-breadcrumb component in a 4.x header the overflow menu display withing the bounds of the 4.x header causing things to shift up.

To Reproduce

Steps to reproduce the behavior:

1. Put attached ids-breadcrumbs/demos/side-by-side.html into place.
2. To to http://localhost:4300/ids-breadcrumb/side-by-side.html
3. Narrow the browser way down
4. Click breadcrumb overflow menu button

Expected behavior The overflow menu should display fully outside the bounds of the 4.x header. All item in overflow should display in the overflow menu.

Actual behavior Content in 4.x header gets pushed up in the header container and breadcrumb overflow menu does not display outside the bounds of the 4.x header.

Also for some reason not all overflowed menu items are in the menu.

Version

• ids-enterprise: latest mainline pull

Example side-by-side.zip

Screenshots Open example

Narrow browser and click the overflow button

Platform

• Infor Application/Team Name: Landmark
• OS Version: windows 11
• Browser Name: Chrome
• Browser Version: Version 122.0.6261.129

Additional context Add any other context about the problem here.

[tmcconechy]

Did you consider trying to replace 4.x header with new ids-header? (Idea).. But will look

[pwpatton]

Did you consider trying to replace 4.x header with new ids-header? (Idea).. But will look

Thought about it but not sure how much work that would be given the ids-toolbar isn't quite working for us last I heard from @Sovia. We also want to try and keep the scope of what we adopt smaller to avoid regressions and more work before we are ready.

[tmcconechy]

@pwpatton If we do this do we need to get the blue header (personalization) to work? I guess the only way to do that is hard code css in the old code base for this specific case.

[jbrcna]

popupmenu is not displayed

[tmcconechy]

@jbrcna im seeing the popup on https://main-enterprise.demo.design.infor.com/components/header/example-wc-breadcrumb.html

1. Resize the page so less items show
2. the items not showing will be the popup.

[jbrcna]

oh yeah I see it now. works on my end as well.