Skip to content

Long comments overflow container on merge diffs

Summary

When leaving a long comment on a merge diff with the new unified component layout it overflows the bounds of its parent.

Steps to reproduce

Open a project that is using the new unified component layout. Currently that is https://gitlab.com/gitlab-org/gitlab and https://gitlab.com/gitlab-com/www-gitlab-com or enable unified components on a local project like so:

Feature.enable(:unified_diff_components, Project.find_by_full_path("h5bp/html5-boilerplate"))

Then leave a long comment on any MR.

Example Comment

!50692 (diffs, comment 476411058)

What is the current bug behavior?

Content overflows the bounds of the diffs container.

What is the expected correct behavior?

Content should wrap.

Relevant logs and/or screenshots

image

Possible fixes

In app/assets/javascripts/diffs/components/diff_view.vue the .notes-content div needs overflow set to auto.