Long branch names cause editor buttons to wrap and stack vertically

Summary

When using the default code editor, at certain window widths and when there is a long branch name, the area on the top bar with square icons wraps, causing those buttons to stack vertically and drastically grow the size of the top bar.

Steps to reproduce

On a merge request for a branch with a long name (e.g. 79 characters), click the edit icon on a file to enter the default UI editor, and narrow the viewport to the point that any content on the bar above the text area begins to wrap. The branch name will not wrap, forcing the button area to wrap.

Example Project

(If possible, please create an example project here on GitLab.com that exhibits the problematic behavior, and link to it here in the bug report)

(If you are using an older version of GitLab, this will also determine whether the bug is fixed in a more recent version)

What is the current bug behavior?

Button area wraps, causing the buttons to stack vertically, growing the height of the bar above the text area, creating a lot of blank space.

What is the expected correct behavior?

Wrap the branch name instead, or clip it and allow the entire name to be displayed on hover.

Relevant logs and/or screenshots

Kapture_2019-06-10_at_14.57.03_600

Output of checks

This bug happens on GitLab.com

Results of GitLab environment info

Expand for output related to GitLab environment info

(For installations with omnibus-gitlab package run and paste the output of: sudo gitlab-rake gitlab:env:info)

(For installations from source run and paste the output of: sudo -u git -H bundle exec rake gitlab:env:info RAILS_ENV=production)

Results of GitLab application Check

Expand for output related to the GitLab application check

(For installations with omnibus-gitlab package run and paste the output of: sudo gitlab-rake gitlab:check SANITIZE=true)

(For installations from source run and paste the output of: sudo -u git -H bundle exec rake gitlab:check RAILS_ENV=production SANITIZE=true)

(we will only investigate if the tests are passing)

Possible fixes

(If you can, link to the line of code that might be responsible for the problem)

Assignee Loading
Time tracking Loading