Gantt: Create a hard border between section name and timeline

[ross-spencer]

Description

When using long section names they encroach on the timeline.

Steps to reproduce

Define sections with long names.

Screenshots

No response

Code Sample

gantt
title section demo
%%{init: {'theme': 'default' } }%%
dateFormat YYYY-MM-DD
excludes    weekends
tickInterval 1week
weekday monday
section this is a long section name
    phase 1         :active, crit, a1, 2024-03-04, 2024-03-25
    phase 2         :active, crit, a2, after a1, 2024-04-29
section another long section name here
    phase2          :active, 2024-03-11, 2024-05-27

gantt
title section demo
%%{init: {'theme': 'default' } }%%
dateFormat YYYY-MM-DD
excludes    weekends
tickInterval 1week
weekday monday
section this is a long section name
    phase 1         :active, crit, a1, 2024-03-04, 2024-03-25
    phase 2         :active, crit, a2, after a1, 2024-04-29
section another long section name here
    phase2          :active, 2024-03-11, 2024-05-27

Loading

Setup

• Mermaid version: latest
• Browser and Version: Chrome

Suggested Solutions

As these are two different parts of the diagram a hard border that ensures that the timeline starts after the longest section name seems like it might be more idiomatic.

Additional Context

One workaround is to create a single 0-duration task before everything else, but it takes a bit of calibrating.

E.g.

gantt
title section demo
%%{init: {'theme': 'default' } }%%
dateFormat YYYY-MM-DD
excludes    weekends
tickInterval 1week
weekday monday
section  
    🟢    :a0, 2024-02-26, 2024-02-26 
section this is a long section name
    phase 1         :active, crit, a1, 2024-03-04, 2024-03-25
    phase 2         :active, crit, a2, after a1, 2024-04-29
section another long section name here
    phase2          :active, 2024-03-11, 2024-05-27

gantt
title section demo
%%{init: {'theme': 'default' } }%%
dateFormat YYYY-MM-DD
excludes    weekends
tickInterval 1week
weekday monday
section  
    🟢    :a0, 2024-02-26, 2024-02-26 
section this is a long section name
    phase 1         :active, crit, a1, 2024-03-04, 2024-03-25
    phase 2         :active, crit, a2, after a1, 2024-04-29
section another long section name here
    phase2          :active, 2024-03-11, 2024-05-27

Loading

I've read through the gantt docs and the issues on this repo but haven't found anything to suggest better control of the sections, e.g. using quotes. Trying this doesn't seem to work.