Skip to content

Wrap long words in timeline events

Paulina Sedlak-Jakubowska requested to merge 381266-psj-the-timeline-event-with-the-content-with-no-spaces-is-unbreakable into master

What does this MR do and why?

Adds wrapping for long strings in incident timeline entry, where it previously overflew the container.

I wanted first to use the utility class for word-wrap: break-word; to have the same styling as in issue descriptions or comments. However, because of a different layout that uses flexbox, timeline event items don't have a limited space so the condition for word-break to work is not met. That is why I decided to go with the .text-break-word class instead.

What is more, I have noticed that for comments and issue description/incident summary, we use the markup typography class - .md (see: app/assets/stylesheets/framework/typography.scss). And that we do not use it for timeline events, which (if the condition above would not apply) would take care of a too long strings and it's wrapping. With a simple, one paragraph entries it doesn't make much difference. But timeline items also accept code snippets. With .md class added, that incident specific CSS becomes redundant, which saves us some specificity and CSS-HTML binding:

.issuable-discussion.incident-timeline-events {
  .timeline-event-note {
    p {
      margin-bottom: 0;
      font-size: 0.875rem;
    }
  }
}

You can find that change in the second commit. I can revert it, if that's a too significant or if I misjudged here 🙂 Below you'll find screenshots comparing incident item with and without .md class.

Screenshots or screen recordings

before after
timeline-event-no-wrap add-text-break-word_
timeline event item, no .md class timeline event item, with .md class
timeline-event-no-md-class timeline-event-md-class

How to set up and validate locally

  1. Navigate to Monitor > Incidents page
  2. Create new or open an existing incident
  3. Navigate to Timeline tab of the incident
  4. Click "Add new timeline event" button at the bottom
  5. Provide the timeline text as a single word with a long length (for example 280 characters)
  6. Click "Save" button
  7. Reload the page
  8. If needed navigate to Timeline tab

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Related to #381266 (closed)

Merge request reports