Fixed Banner element overlay issue on mobile when min-height is customized

[ChavdaNayan]

Preconditions (*)

Tested in this versions:
Magento 2.4.8

Description (*)

When we set a custom minimum height for the banner, the content overlay doesn’t show up on the mobile frontend.

Steps to reproduce (*)

1. Go to Content > Pages Or Blocks.
2. Edit a page or block using Page Builder.
3. Drag and drop a Banner element.
4. Add text, button and overlay color in the content area.
5. In mobile view, change the banner set a minimum height that's different from the desktop view. The issue happens only when mobile and desktop have different heights. (e.g Desktop minimum height 300px and Mobile minimum height 301px) (See Screenshot 1).
6. Save and view the page on mobile device (or emulate with browser tools).

Screenshot-1

Expected result (*)

When setting a custom minimum height value for the Banner element in Page Builder’s mobile view, the content overlay (text/button layer) should be visible (See Screenshot 2).

Screenshot-2

Actual result (*)

When setting a custom minimum height value for the Banner element in Page Builder’s mobile view, the content overlay (text/button layer) is not clearly visible (See Screenshot 3).

Screenshot-3

Additional information (*)

In the banner element on mobile viewports, when we change the custom minimum height value, the banner overlay background color becomes transparent (See Screenshot 4).

Screenshot-4

Resolved issues:

1. resolves [Issue] Fixed Banner element overlay issue on mobile when min-height is customized #901: Fixed Banner element overlay issue on mobile when min-height is customized

[engcom-Hotel]

@magento create issue

[engcom-Hotel]

@magento run all tests

[engcom-Hotel]

Hello @ChavdaNayan,

Thanks for the contribution!

The changes looks good to us, but please fix the failed static test failures. Other failures seems flaky to me.

Thanks

[engcom-Hotel]

@magento run Functional Tests B2B, Functional Tests CE, Functional Tests EE, Unit Tests