Add viewer controller for mermaid (zoom, drag)

[wxiaoguang]

Fix #25803

Now the rendered mermaid chart can be dragged or zoomed.

[wxiaoguang]

I didn't spend time on the "button styles". Feel free to make more changes if you'd like to.

---

---

[silverwind]

yes these buttons definitely need styling, same style as copy button. and gap between.

[silverwind]

Button CSS fixed:

[silverwind]

One related fix that also affects the copy button: Using @media (hover: none) we detect whether the device supports no hover states (touch devices), which then causes the buttons to always show, this goes for both the copy button and the zoom/reset buttons.

[silverwind]

One last topic: I'd like to remove the new css variable in favor of re-using the existing fadeout and fadein keyframe-based animations, checking if it's possible.

[silverwind]

ok think I'm done here now, changes are minimal.

[silverwind]

One minor issue but I don't think it would block the merge. On very small diagrams the buttons overlap. Maybe it needs a minimum height:

Source code:

```mermaid
flowchart LR
TEST{{"`**Rendering problem**`"}}
```

[silverwind]

Small alignment fix pushed so that the buttons align on right side:

[wxiaoguang]

Feel free to merge if it looks good to you

[silverwind]

One more thing I noticed: when the copy button is hovered, the view-controller hides. It seems tricky to solve, likely requires the view-controller to be moved outside the iframe.

[silverwind]

One more thing I noticed: when the copy button is hovered, the view-controller hides. It seems tricky to solve, likely requires the view-controller to be moved outside the iframe.

Merging now, this is not worth the effort it would take imho.

[silverwind]

For reference, here is how the min height looks now:

[wxiaoguang]

One more thing I noticed: when the copy button is hovered, the view-controller hides. It seems tricky to solve, likely requires the view-controller to be moved outside the iframe.

Fix markup code block layout #36578