fix: rendering problem in query preview sliding panel

[lauramargar]

EMP-2492

Pull request template

When opening Empathize without query, and then closing it by clicking somewhere in the brand recommendations area, the carousel behind the Empathize stays hidden until you roll over it.

Google Chrome has a problem rendering components with mask style applied. We think that is a new bug from Chrome, so we have decided to develop a temporary solution and wait for them to fix it soon.

Next steps:

• Apply this fix to all the setups with a fill width empathize.

Motivation and context

• Dependencies. If any, specify:
• Open issue. If applicable, link: EMP-2492

Type of change

• Bug fix (non-breaking change that fixes an issue)
• New feature (non-breaking change that adds functionality)
• Breaking change (fix or feature that causes existing functionality to not work as expected)
• Change requires a documentation update

What is the destination branch of this PR?

• Main
• Other. Specify:

How has this been tested?

Go to the archetype:

• Open empathize
• Click somewhere in the brand recommendations area

The carousel that was behind the empathize should look ok.

Checklist:

• My code follows the style guidelines of this project.
• I have performed a self-review on my own code.
• I have commented my code, particularly in hard-to-understand areas.
• I have made corresponding changes to the documentation.
• My changes generate no new warnings.
• I have added tests that prove my fix is effective or that my feature works.
• New and existing unit tests pass locally with my changes.

[support-empathy]

Check PR 352 preview 👀

https://x.test.empathy.co/preview/352/index.html