Mermaid gantt diagrams render differently based on viewport size #10324

New Issue

2025-11-02T09:04:20-06:00

GiteaMirror commented

2025-11-02 09:04:20 -06:00

Originally created by @silverwind on GitHub (Feb 22, 2023).

Description

https://try.gitea.io/silverwind/symlink-test/issues/4#issuecomment-162691

It seems mermaid gantt diagrams render differently based on browser viewport size (zoom or resize browser window) even thought the rendered area does not change. We should check if we can get mermaid to ignore viewport size and always render the big readable version.

Small viewport:

Big viewport

Same here on github:

gantt
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD
    section Section
    A task           :a1, 2014-01-01, 30d
    Another task     :after a1  , 20d
    section Another
    Task in sec      :2014-01-12  , 12d
    another task      : 24d

Gitea Version

latest

Can you reproduce the bug on the Gitea demo site?

Yes

Originally created by @silverwind on GitHub (Feb 22, 2023). ### Description https://try.gitea.io/silverwind/symlink-test/issues/4#issuecomment-162691 It seems mermaid gantt diagrams render differently based on browser viewport size (zoom or resize browser window) even thought the rendered area does not change. We should check if we can get mermaid to ignore viewport size and always render the big readable version. Small viewport: <img width="779" alt="Screenshot 2023-02-22 at 15 55 07" src="https://user-images.githubusercontent.com/115237/220660356-bb6fb031-10da-4b6b-886b-fb9ecf0b84c6.png"> Big viewport <img width="693" alt="Screenshot 2023-02-22 at 15 55 20" src="https://user-images.githubusercontent.com/115237/220660361-443ff472-2969-45a1-a6d0-a32a0ff9dd8d.png"> Same here on github: ```mermaid gantt title A Gantt Diagram dateFormat YYYY-MM-DD section Section A task :a1, 2014-01-01, 30d Another task :after a1 , 20d section Another Task in sec :2014-01-12 , 12d another task : 24d ``` ### Gitea Version latest ### Can you reproduce the bug on the Gitea demo site? Yes

GiteaMirror added the topic/ui type/bug labels 2025-11-02 09:04:20 -06:00

GiteaMirror commented

2025-11-02 09:04:21 -06:00

@SoftUniq commented on GitHub (Nov 27, 2023):

Is there a version for Gitea?

@SoftUniq commented on GitHub (Nov 27, 2023): Is there a version for Gitea?

GiteaMirror commented

2025-11-02 09:04:21 -06:00

@lng2020 commented on GitHub (Nov 28, 2023):

Is there a version for Gitea?

From my test, still exists in latest code.

@lng2020 commented on GitHub (Nov 28, 2023): > Is there a version for Gitea? From my test, still exists in latest code.

GiteaMirror commented

2025-11-02 09:04:21 -06:00

@maurerle commented on GitHub (May 5, 2024):

I came here with the same behavior in mermaid on my gantt charts without a solution yet.

I am rendering the mermaid gantt chart in markdown and nothing of this helps:

---
width: 500px
height: 400px
---
%%{init: {'theme': 'forest', 'width': '500px' } }%%
gantt
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD
    section Section
    A task           :a1, 2014-01-01, 30d
    Another task     :after a1  , 20d
    section Another
    Task in sec      :2014-01-12  , 12d
    another task      : 24d

---
width: 500px
height: 400px
---
%%{init: {'theme': 'forest', 'max-width': '500px' } }%%
gantt
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD
    section Section
    A task           :a1, 2014-01-01, 30d
    Another task     :after a1  , 20d
    section Another
    Task in sec      :2014-01-12  , 12d
    another task      : 24d

Though GitHub itself does not seem to have this issue somehow.. :)

@maurerle commented on GitHub (May 5, 2024): I came here with the same behavior in mermaid on my gantt charts without a solution yet. I am rendering the mermaid gantt chart in markdown and nothing of this helps: ``` --- width: 500px height: 400px --- %%{init: {'theme': 'forest', 'width': '500px' } }%% gantt title A Gantt Diagram dateFormat YYYY-MM-DD section Section A task :a1, 2014-01-01, 30d Another task :after a1 , 20d section Another Task in sec :2014-01-12 , 12d another task : 24d ``` ```mermaid --- width: 500px height: 400px --- %%{init: {'theme': 'forest', 'max-width': '500px' } }%% gantt title A Gantt Diagram dateFormat YYYY-MM-DD section Section A task :a1, 2014-01-01, 30d Another task :after a1 , 20d section Another Task in sec :2014-01-12 , 12d another task : 24d ``` Though GitHub itself does not seem to have this issue somehow.. :)

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github-starred/gitea#10324