[Bug]: sp-card (supplied with an actions slot) action menu elements overlaps with neighbouring component in Safari versions and Firefox.

[jaya-Adobe]

Code of conduct

• I agree to follow this project's code of conduct.

Impacted component(s)

sp-card, sp-grid, firefly autodub lipsync module.

Expected behavior

On opening of action menu in sp-card, the action menu should be at top layer and should not overlap as here (image taken from sp-card-documentation chrome):

Actual behavior

On opening of action menu in sp-card, the action menu hides behind the neighbouring component sharing same pixels.
image taken from sp-card-documentation Safari 16.4/16.6 version.

This issue also happens on Firefox.

Screenshots

In firefly project the issue persists as this:

What browsers are you seeing the problem in?

Firefox, Safari

How can we reproduce this issue?

1. On Safari 16.4 version or Firefox, go to firefly stage url
2. Click on auto dub and lip sync module OR directly navigate to autodub-module
3. Upload your file and autodub content by hitting generate.
4. Once dubbed file is generated, hit back to upload page again.
5. The queue should be visible, click on three dots (action-menu) of sp-card.
6. The action menu hides behind the neighbouring components.

Sample code that illustrates the problem

No response

Logs taken while reproducing problem

No response

[Westbrook]

Without an abstract reproduction we're not likely to revisit this beyond sharing the application level mitigation steps that can be leveraged when delivering Overlaid content in polyfilled browsers: https://opensource.adobe.com/spectrum-web-components/components/overlay/#fallback-support When making a repro, we highly suggest you start from something like https://studio.webcomponents.dev/edit/0lwluuJO4nR1daE9dyRw?p=stories wherein you can recreate the situation devoid of any application level interference in order to support finding any component specific change that may be necessary here.

Related, you've referenced this as also being a Firefox issue, but I do not expereience in Firefox:

Additional information about your experience and the versions you are experiencing it in in that context would be greatly appreciated.

[jaya-Adobe]

@Westbrook for repro please use this storybook - https://studio.webcomponents.dev/edit/GnkodO5cuznEsnNm8DyF/src/index.ts?p=stories
Also to note Safari version 16.4 and firefox version 124.0.2 has this issue to name a few. Some other versions have this problem. Please let me know if something else is needed , Attaching recording as well -

Screen.Recording.2024-05-15.at.10.06.36.PM.1.mov

[najikahalsema]

@Rajdeepc test this tomorrow please!