Draft: Resolve "The timeline event with the content with no spaces is unbreakable"
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 .md
class.
Screenshots or screen recordings
before | after |
---|---|
timeline event item, no .md class |
timeline event item, with .md class |
---|---|
How to set up and validate locally
- Navigate to Monitor > Incidents page
- Create new or open an existing incident
- Navigate to Timeline tab of the incident
- Click "Add new timeline event" button at the bottom
- Provide the timeline text as a single word with a long length (for example 280 characters)
- Click "Save" button
- Reload the page
- 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.
-
I have evaluated the MR acceptance checklist for this MR.
Related to #381266 (closed)