Compact Gantt layout lacks adaptive spacing, causing label and timeline overlap when displayMode: compact is enabled

[EmnaBarbouch]

Description

When using displayMode: compact, the chart compresses vertically but does not adequately manage spacing between:
task bars
axis labels
time ticks
This leads to visual crowding and overlap, especially with dense timelines.

Steps to reproduce

1. Create a Mermaid Gantt chart using compact display mode:

---

displayMode: compact

gantt
title GANTT compact layout overlap demo
dateFormat HH:mm:ss
axisFormat %Hh%M

section Sessions
A: 12:00:00, 63m
B: 12:30:00, 12m
C: 13:05:00, 12m
D: 13:06:00, 33m
E: 13:15:00, 55m
2. Render the diagram in a browser http://localhost:9000/gantt.html
3. Observe the rendered Gantt chart in compact mode

Screenshots

Code Sample

---
displayMode: compact
---
gantt
  title GANTT compact layout overlap demo
  dateFormat HH:mm:ss
  axisFormat %Hh%M

  section Sessions
  A: 12:00:00, 63m
  B: 12:30:00, 12m
  C: 13:05:00, 12m
  D: 13:06:00, 33m
  E: 13:15:00, 55m

Setup

• Mermaid version: 11.13.0
• Browser: Chrome

Suggested Solutions

. Introduce spacing controls:
gantt:
rowSpacing: 4
labelPadding: 6
. Or adaptive layout based on task density

Additional Context

No response