Timeline LongText wrap

[0xshellming]

Description

Timeline text will display out of the color block when it is too long

Steps to reproduce

input long text timeline

Screenshots

Code Sample

timeline
    title History of Social Media Platform
    2002 : LongLongLongLongLongLongLongLongLongLongLongLongLongLong
    2004 : Facebook
         : Google
    2005 : Youtube
    2006 : LongLongLongLongLongLongLongLongLongLongLongLongLongLong

Setup

• Mermaid version:
• Browser and Version: [Chrome, Edge, Firefox]

Suggested Solutions

Automatically wrap lines and display inside the color block

Additional Context

No response

[nour0205]

Bug confirmation : Timeline Text Overflow Issue

Hi @0xshellming
Thank you for reporting this issue! I've thoroughly investigated it and can confirm that the bug exists. Below are the detailed steps i followed, along with additional observations and environment details

Steps to Reproduce
1. Opened the Mermaid Live Editor.
2. Used the following code snippet:

	`	
	timeline
	    title Evolution of Programming Languages
	    1950 : Assembly
	    1970 : LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLong
	    1980 : C
	         : Smalltalk (Object-Oriented Programming introduced)
	    1991 : Python (Readable, Versatile, Popular in AI and Data Science)
	    1995 : JavaScript (Web Revolution LongLongLongLongLongLongLong)
	         : Java (Write Once, Run Anywhere)
	    2000 : LongTextLongTextLongTextLongTextLongTextLongTextLongTextLongTextLongText
	    2010 : Kotlin (Android Development) and Swift (iOS Development)
	    2020 : WebAssembly (New Era for Browsers)`

3. Rendered the timeline chart.
4. Observed the issue: Long text overflows outside the color block, making it hard to read and visually unaligned.

Here is a screenshot of the issue as observed in my testing:

I also tested the timeline in the demo

Key Observations
• The text for the entry "JavaScript (Web Revolution LongLongLongLongLongLong)" overflows the block, which disrupts the layout and alignment of the timeline.

• In the first example the entries for 1991 and 2010 experience inconsistent text overflow issues, with the text for 1991 spilling above the block and for 2010 underfilling the block

Environment Details
• Mermaid Version: 0.2.4
• Browsers Tested:
Mozilla Firefox (Version: 134.0.2)
Microsoft Edge (Version: 132.0.2957.115)
• Operating System: (Windows 11)

Additional Observations
• The bug occurs consistently across all tested browsers.
• The issue is more noticeable with extremely long text entries.
• Shorter text entries do not exhibit this problem.
• Multiple timeline entries for the same year are unaffected unless the text is long.

Thank you for reporting this issue! I hope the additional details provided here help the maintainers reproduce and categorize it further. Let me know if any other information or testing is required!