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
- 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
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
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
Edited by Paulina Sedlak-Jakubowska