mermaid gantt graph in small screen

[bosconb]

when theme embed a mermaid gantt graph, the abscissa scale shows a terrible result in mobile (iphone 6/7 plus screen),any idea?

[matalo33]

Agreed, it does look quite bad! Is this an issue with mermaid or the theme implementation of mermaid?

[McShelby]

Mermaid generates a width=100% for certain diagram types - e.g the gantt diagram. On a narrow website this may cause the observed distortion.

The mermaid docs expose this behaviour, too, as seen here.

Also related to this issue: If mermaid does not generate a width=100% the diagramm may overflow out of view if the browser window is too narrow - without generating scroll bars. This is clearly an issue of our CSS and also affects print output.

Nevertheless I don't have an idea how to fix this in a satisfying way for all users.