MR diffs breaking words on line return

Problem seen

When reading through an MR I noticed that the lines in the Diffs were breaking words on line return:

Proposal

Correct CSS to allow words wrap to the next line and not get broken at the end of the container width. Perhaps use overflow-wrap: break-word?

Here is a link to the Slack discussion:

Slack Thread

Justin Mandell:spiral_calendar_pad:  10 days ago
Hey @pedroms (or anyone else that may know) is there a setting I can change or is this a bug that is breaking words in half at line breaks instead of carrying them over whole? (edited) 
image.png 
image.png

asmolinski  10 days ago
I just noticed that yesterday!

clenneville  10 days ago
Sid just brought it up yesterday, too, and asked the CEO Shadows to create an issue.

Justin Mandell:spiral_calendar_pad:  10 days ago
oh good! It’s making it really hard to read MRs

jelder  10 days ago
@justin Mandell do you have a link where I can inspect that? My guess is that it’s simply related to how the CSS is set up for that particular element.

Justin Mandell:spiral_calendar_pad:  10 days ago
yeah, the line break/word wrap css probably got change to something less strict?
This is the MR I’m reading but I’ve seen it in others as well:
https://gitlab.com/gitlab-org/gitlab/-/merge_requests/51226/diffs#note_481189247 (edited) 

GitLabGitLab
Add Design Sprint Template to issue templates. (gitlab-com/www-gitlab-com!51226) · Merge Requests · GitLab.org / GitLab
What does this MR do? Add a Design Sprint issue template to https://gitlab.com/gitlab-org/gitlab/-/tree/master/.gitlab/issue_templates
Author
Maria Vrachni
Assignee
Jackie Porter and Justin Mandell

jelder  10 days ago
Ah, yes. Both white-space: break-spaces and word-break: break-all are set.

Justin Mandell:spiral_calendar_pad:  10 days ago
that’ll do it!

jelder  10 days ago
I think overflow-wrap: break-word; could potentially be used instead.

jelder  10 days ago
In contrast to word-break, overflow-wrap will only create a break if an entire word cannot be placed on its own line without overflowing.

jelder  10 days ago
So after a bit of research word-wrap: break-word (which is in the cascade, but overwritten) changed to overflow-wrap: break-word  and it:
will wrap long words onto the next line.
adjusts different words so that they do not break in the middle.
word-break: break-all :
irrespective of whether it’s a continuous word or many words, breaks them up at the edge of the width limit. (i.e. even within the characters of the same word)

jelder  10 days ago
Is there an open issue/MR for this anywhere? If not would you mind opening one and I can add my thoughts there?

Justin Mandell:spiral_calendar_pad:  10 days ago
@clenneville had mentioned that Sid had asked for one but I can’t seem to find it (though I’m not great at finding existing issues with our search).

clenneville  10 days ago
I think @Tanya was one of the shadows, so she may know.

pedroms:construction:  7 days ago
@justin Mandell thanks for the heads up! @iamphill are you aware of this?
:+1:
1

iamphill  7 days ago
Nope not aware of it :pensive:

pedroms:construction:  3 days ago
@justin Mandell would you mind opening and issue for this in case there isn’t one already?


pedroms:construction:  18 minutes ago
@justin Mandell thank you!