Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Mermaid diagram does not work inside <details> tag #32392

Closed
rijenkii opened this issue Oct 31, 2024 · 0 comments · Fixed by #32457
Closed

Mermaid diagram does not work inside <details> tag #32392

rijenkii opened this issue Oct 31, 2024 · 0 comments · Fixed by #32457
Labels
issue/confirmed Issue has been reviewed and confirmed to be present or accepted to be implemented type/bug

Comments

@rijenkii
Copy link

rijenkii commented Oct 31, 2024 •
edited
Loading

Description

Wrapping a mermaid diagram into a <details> tag causes its height to be invalid.

To reproduce create a comment with following contents:

<details>

```mermaid
---
title: Order example
---
erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
```

</details>

Reproduction on demo: https://demo.gitea.com/rijenkii/tjest/issues/2.

Gitea Version

1.23.0+dev-567-g9df5ddaf44

Can you reproduce the bug on the Gitea demo site?

Yes

Log Gist

No response

Screenshots

image

Git Version

No response

Operating System

No response

How are you running Gitea?

Demo

Database

None
@silverwind silverwind added the issue/confirmed Issue has been reviewed and confirmed to be present or accepted to be implemented label Oct 31, 2024
silverwind added a commit to silverwind/gitea that referenced this issue Nov 8, 2024
@silverwind
Fix mermaid diagram height when it's initially hidden
f28142f 
Fixes: go-gitea#32392
@silverwind silverwind mentioned this issue Nov 8, 2024
Merged
lafriks pushed a commit that referenced this issue Nov 9, 2024
@silverwind
Fix mermaid diagram height when initially hidden (#32457)
b55a31e 
In a hidden iframe, `document.body.clientHeight` is not reliable. Use
`IntersectionObserver` to detect the visibility change and update the
height there.

Fixes: #32392

<img width="885" alt="image"
src="https://github.com/user-attachments/assets/a95ef6aa-27e7-443f-9d06-400ef27919ae">
GiteaBot pushed a commit to GiteaBot/gitea that referenced this issue Nov 10, 2024
@silverwind @GiteaBot
Fix mermaid diagram height when initially hidden (go-gitea#32457)
26ec283 
In a hidden iframe, `document.body.clientHeight` is not reliable. Use
`IntersectionObserver` to detect the visibility change and update the
height there.

Fixes: go-gitea#32392

<img width="885" alt="image"
src="https://github.com/user-attachments/assets/a95ef6aa-27e7-443f-9d06-400ef27919ae">
@GiteaBot GiteaBot mentioned this issue Nov 10, 2024
Merged
lunny pushed a commit that referenced this issue Nov 10, 2024
@GiteaBot @silverwind
Fix mermaid diagram height when initially hidden (#32457) (#32464)
62d8433 
Backport #32457 by @silverwind

In a hidden iframe, `document.body.clientHeight` is not reliable. Use
`IntersectionObserver` to detect the visibility change and update the
height there.

Fixes: #32392

<img width="885" alt="image"
src="https://github.com/user-attachments/assets/a95ef6aa-27e7-443f-9d06-400ef27919ae">

Co-authored-by: silverwind <[email protected]>
DennisRasey pushed a commit to DennisRasey/forgejo that referenced this issue Nov 16, 2024
@silverwind @earl-warren
Fix mermaid diagram height when initially hidden (#32457)
308812a 
In a hidden iframe, `document.body.clientHeight` is not reliable. Use
`IntersectionObserver` to detect the visibility change and update the
height there.

Fixes: go-gitea/gitea#32392

<img width="885" alt="image"
src="https://github.com/user-attachments/assets/a95ef6aa-27e7-443f-9d06-400ef27919ae">

(cherry picked from commit b55a31eb6a894feb5508e350ff5e9548b2531bd6)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
issue/confirmed Issue has been reviewed and confirmed to be present or accepted to be implemented type/bug
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix mermaid diagram height when initially hidden silverwind/gitea
2 participants
@silverwind @rijenkii