Branch Banner issues with new mobile GNAV experience

[Deva309]

I am currently investigating issues related to the branch banner (mobile-app-banner) that appears after the page load on the new mobile GNAV experience. Below is an example screenshot:

Ticket: https://jira.corp.adobe.com/browse/MWPW-165867

While fixing the issue, I discovered that the branch banner can be either sticky or inline. Once the banner is injected into the page along with its JS and CSS for styling, different products inject different CSS for the branch banner. For example:

1. Photoshop Lightroom (inline varient)

2. Aero (inline varient)

When a fix is applied to the branch banner for one product (e.g., Photoshop Lightroom), it causes the banner for another product (e.g., Aero) to break. This happens because the CSS is handled differently for each page, as seen in the examples for Photoshop Lightroom and Aero.

To apply a consistent fix for all branch banners, the injected CSS should be standardized for scenarios like the inline branch banner, and the same should apply to the sticky behavior. If we handle CSS differently for the same type of experience, a fix applied to one branch banner could unintentionally break others with the same experience.

Therefore, we need to standardize the CSS for both inline and sticky behaviors, ensuring that the same CSS is applied across all products with the same experience.

Need some suggestion to resolve these issues with branch banner with new mobile GNAV experience.
@narcis-radu @overmyheadandbody @mokimo
CC: @salonijain3 @bandana147 @sharmrj

[TsayAdobe]

@Deva309 As you said, all branch.io banners should have the same injected CSS. I found Aero and Acrobat Reader have the same, but Lightroom is different. Making them consistent is the first step.

[Deva309]

@TsayAdobe Agreed, we can update Lightroom as we did for Aero and Acrobat. However, it will still fail if similar Lightroom-style CSS is used in other product branch banners, as those would also need to be updated. Which default CSS should we follow to ensure consistent inline and sticky behavior?