Skip to content

Make sure explain code button doesn't overlap sticky headers and nav

What does this MR do and why?

The explain code button for highlighted code had z-index 9999, which made it overlap elements that should be on top of it, like the global nav's flyout menus or sticky headers.

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

Before After
image Screenshot_2024-09-10_at_12.00.25
image Screenshot_2024-09-10_at_12.00.31

How to set up and validate locally

  1. Check out this branch
  2. Ensure that you have Ultimate features and Duo enabled in a group in the GDK
  3. Visit a source code file in a project inside that group
  4. Narrow your window so that the left side global nav is close to the left edge of the page content (about 1600px or so should work)
  5. Highlight some source code so that the ? explain code button appears
  6. Scroll the page so that the explain code button moves underneath the sticky header for the file
    • Expected: You should see that the explain code button is below, not above, the sticky header
  7. Scroll the page back down so that the ? button is visible
  8. hover over a left side nav item so that its flyout menu appears
  9. Scroll the page so that the ? button is beneath the fly out menu
    • Expected: the ? button is beneath, not above, the fly out menu

Related to #469616 (closed)

Edited by Chad Lavimoniere

Merge request reports

Loading