@W-20615600 feat: Search popup Ask Shopping Agent banner and mobile layout

[sf-tejas-nadkarni]

Description

Adds and updates the "Ask Shopping Agent" banner in the search suggestions popup with a new layout, styling, and reliable full-bleed behavior on mobile and desktop.

Types of Changes

• Bug fix (non-breaking change that fixes an issue)
• New feature (non-breaking change that adds functionality)
• Documentation update
• Breaking change (could cause existing functionality to not work as expected)
• Other changes (non-breaking changes that does not fit any of the above)

Breaking changes include:

• Removing a public function or component or prop
• Adding a required argument to a function
• Changing the data type of a function parameter or return value
• Adding a new peer dependency to package.json

Changes

• Ask Shopping Agent banner
• Full-bleed and mobile overlay
• Assets and config

How to Test-Drive This PR

• (step1)

Checklists

General

• Changes are covered by test cases
• CHANGELOG.md updated with a short description of changes (not required for documentation updates)

Accessibility Compliance

You must check off all items in one of the follow two lists:

• There are no changes to UI

or...

• Changes were tested with a Screen Reader (iOS VoiceOver or Android Talkback) and had no issues
• Changes comply with WCAG 2.0 guidelines levels A and AA
• [ x] Changes to common UI patterns and interactions comply with WAI-ARIA best practices

Localization

• Changes include a UI text update in the Retail React App (which requires translation)

[cc-prodsec]

✅ Snyk checks have passed. No issues have been found so far.

Status	Scanner	Critical	High	Medium	Low	Total (0)
✅	Open Source Security	0	0	0	0	0 issues
✅	Licenses	0	0	0	0	0 issues

💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse.

[sf-jhalak-maheshwari]

LGTM

[shethj]

SearchSuggestions component is using negative margins:
marginLeft: -6 while here we're clipping the element with overflow hidden.

We must seek to address the core issue instead of having contradicting css.

[sf-tejas-nadkarni]

The negative margin was to get a full-bleed look inside a padded container, and overflow hidden is used to hide the side effects of that breakout

refactoring the parent container is currently out of scope and this approach is only to meet the UX requirement. Since the feature is behind the perm, it won't impact the standard suggestion box