CI pipeline graph on Pipelines page can wrap and be hard to use

Summary

On the Pipelines page for a repo, if a pipeline mini graph is long enough relative to the browser window's width, when you hover over a pipeline stage so that the stage expands to show the dropdown option, the stages wrap which can make it hard/impossible to actually interact with the stage.

Steps to reproduce

  1. Create a CI pipeline with enough stages to produce a long pipeline. The exact requirement here is that there are enough stages so that the pipeline graph will wrap when you narrow the browser window, before the Pipelines page switches to that alternate (mobile?) layout. In my case, I have 7 stages.
  2. Go to the Pipelines page. Narrow the browser window to just before the pipeline graph wraps.
  3. Attempt to interact with the last pipeline stage, or approach any of the other stages from the bottom.

Example Project

What is the current bug behavior?

When you hover over a pipeline stage, it expands slightly to show a down arrow for a dropdown menu. When it expands, the graph wraps because there is no more horizontal space. This shifts the stages, which can move the stage you were hovering over away from the mouse cursor. This can make stages hard to interact with, and can also produce a state where there's a rapid switch between hovering/not-hovering because the stages are moving.

What is the expected correct behavior?

Somehow prevent the stages from shifting wildly on hover when there isn't enough space to accommodate the dropdown indicator on hover.

Relevant logs and/or screenshots

Here's two videos showing the bug behaviour.

Long_Pipeline_Graph

Long_Pipeline_Graph_2

Output of checks

This is on GitLab 10.6.

Possible fixes