Unable to select items from dropdown due to overlapping header

[asvinb]

Bug Description

When we have lots of items in a dropdown menu(select) and which open upwards, it is impossible to select some items since they are hidden by the header which has a higher z-index.

This was previously fixed in #2885 and was reintroduced somewhere along the line.

Steps to reproduce

1. Go to the Analytics module settings in edit mode.
2. Click on the "Account" dropdown.
3. See issue if you have a lot of accounts.

Screenshots

From the screenshot there is another account before the "Asvin test" account which is completely hidden by the header and inaccessible.

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• Open Site Kit menus should not be obstructed by the main header element that spans across the top of all Site Kit screens
• A VRT test should be added to cover this scenario

Implementation Brief

• Revert changes from Fix tooltip overlapping. #6431
• Using assets/js/components/JoyrideTooltip.js,
  • Add 2 new props:
    • onTourStart: callback function called when tour has started
    • onTourEnd: callback function called when tour has ended
  • Update the callback prop for Joyride to call the above functions:
    • if type === EVENTS.TOUR_START, call onTourStart,
    • if type === EVENTS.TOUR_END, call onTourEnd.
• Using assets/js/modules/analytics/components/settings/GA4SettingsControls.js,
  • add the 2 newly added props to JoyrideTooltip.
    • onTourStart should have a function as value which adds a custom class name (for e.g googlesitekit--has-visible-tooltip) to document.body.
    • onTourEnd should have a function as value which removes the custom class name which was added by onTourStart.
• Add styles which sets the z-index of .googlesitekit--has-visible-tooltip #adminmenuwrap to 10, which is lower than the z-index of the tooltip which itself has a lower z-index than the header.

Test Coverage

• No new tests to be added.

QA Brief

• Follow steps in the Steps to reproduce section and ensure that select dropdowns show above the header.

Changelog entry

• Fix bug that could cause select component to be hidden underneath the Site Kit header.

[asvinb]

Bug was introduced while trying to fix the issue described here where the WordPress left menu is overlapping tooltips. The z-index for the Site Kit header was increased from 12 to 10000 because the z-index of the left menu is 9990 . Trying to see if there are alternatives to increasing the z-index to such as high number.

[eugene-manuilov]

IB ✔️

[mohitwp]

QA Update ✅

• Tested on dev environment.
• Verified Site Kit menus are not obstructed by the main header element that spans across the top of all Site Kit screens.
• Verified for analytics and tag manager settings screen in edit mode.
• Verified for analytics and tag manager set up screen.

Latest

Develop