The timeline event with the content with no spaces is unbreakable

Summary

When we create a timeline event with a long text without any spaces, the timeline text is shown outside of the timeline event's borders.

Steps to reproduce

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

Example Project

What is the current bug behavior?

The timeline text is rendered outside of timeline events borders

What is the expected correct behavior?

The timeline event text should wrap, example:

testline_testline_testline_testline_testline_testline_testline_testline_testline_testline_testline_testline_testline_testline_testline_testline_testline_testline_testline_testline_testline_testline_testline_testline_testline_testline_testline_testline_testline_testline_testline_testline_testline_testline_testline_testline_

Relevant logs and/or screenshots

Example https://gitlab.com/gitlab-examples/ops/incident-setup/everyone/tanuki-inc/-/issues/2566

non-breakable-timeline

Possible fixes

Implementation guide

Files to look at:

• app/assets/javascripts/issues/show/components/incidents/timeline_events_item.vue
• spec/frontend/issues/show/components/incidents/timeline_events_item_spec.js