Explain Code inaccessible if content is taller than viewport

Summary

When the Explain Code AI Genie pops up and the content becomes taller than the viewport, the content isn't scrollable so it becomes inaccessible.

Steps to reproduce

  1. Use the Explain Code https://gitlab.com/gitlab-org/gitlab/-/issues/403727
  2. After the Ai Genie pops up, resize window to be shorter than the height of the Genie.
  3. Notice you can't scroll through the content.

Example Project

https://gitlab.com/gitlab-org/gitlab/-/blob/master/app/assets/javascripts/diffs/components/diff_file_header.vue

What is the current bug behavior?

Content is unscrollable.

What is the expected correct behavior?

Content within the Genie is scrollable.

Relevant logs and/or screenshots

Screenshot_2023-04-18_at_15.40.26

Possible fixes

Setting a max-height on the content area of the Genie based on vh and adding overflow: auto could be enough, as a quick fix.