Ignore invalid height messages from Mermaid iframes

What does this MR do and why?

Fixes Mermaid diagrams are clipped in Chrome on iOS/i... (#619904 - closed).

Cause

With Web Inspector attached to Chrome on an iPad, every Mermaid iframe on the page had height="NaNpx":

<iframe
  src="https://gitlab.com/-/sandbox/mermaid_v11"
  sandbox="allow-scripts allow-popups"
  frameborder="0"
  scrolling="no"
  width="100%"
  height="NaNpx"  <!-- 👈 -->
></iframe>

Normally, a listener on the parent side sets this attribute from the height that the sandboxed iframe posts after drawing the diagram.

The listener, however, never validates the payload. When a message without a numeric h arrives, the height ends up as "NaNpx". That's not a valid value, so the iframe falls back to its default height (150px), clipping the diagram.

A log statement right before the listener revealed that the legitimate height message is followed by another one from the same iframe:

{"h":486.90625,"w":763}
{"command":"registerAsChildFrameAck","remoteFrameId":"4547d9da50e1d06103b42b3e2a64ee86"}

The second message comes from a script that Chrome for iOS injects into the frame, and overwrites the correctly set height with "NaNpx":

---
config:
#  theme: default
  fontSize: 14
---

sequenceDiagram
    participant Parent as Parent page
    participant Frame as Sandboxed iframe

    Parent->>Frame: postMessage(diagram source)
    Frame->>Frame: render SVG
    Frame->>Parent: postMessage({ h: 486, w: 763 })
    Parent->>Parent: height = "496px" ✅

    Frame-->>Parent: postMessage({ command: "registerAsChildFrameAck", ... })
    Note over Parent: payload is not validated
    Parent->>Parent: height = "NaNpx" ❌ → falls back to 150px

As MDN advises in the security concerns for postMessage:

Having verified identity, however, you still should always verify the syntax of the received message.

🔴 RED → 🟢 GREEN cycles

1. Add specs for invalid height messages to the viewer-side renderer — 🔴 RED at this point due to the existing bug (job log).
2. Add a Number.isFinite guard, turning it 🟢 GREEN.
3. Add the same specs to the rich text editor's preview component — 🔴 RED.
4. Add the same guard, turning it 🟢 GREEN.

How to set up and validate locally

How do GitLab frontend developers usually test mobile-specific issues that require a physical device?

I visually verified this change on a physical iPad by setting up a local DNS server to make GDK-in-a-box accessible from the tablet.

Notes

• I don't work on the frontend regularly — a careful look at this approach would be very helpful.

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.