grok-mermaid: render wide diagrams with horizontal scroll on narrow screens#294
Merged
Merged
Conversation
…creens On phone-width viewports the default 'Fit output panel' mode computed ~43 columns, which no example diagram fits in, so the renderer silently fell back to a framed echo of the raw source — making the page look completely broken on mobile (reproduced in both WebKit and Chromium at 390px; it was viewport-driven, not a Safari engine bug). Since max_width never reshapes a diagram (it only swaps in the fallback when the art is too wide), fit mode now re-renders uncapped when the cap changes the output, shows the real diagram in the already-scrollable output panel, and notes 'scroll the output sideways' in the status line. Also for mobile Safari: 16px textarea font below 600px so iOS stops zooming the page on focus, and autocapitalize/autocorrect off so it stops mangling Mermaid source. While investigating, wasm-tools validate showed grok-mermaid.wasm required reference-types support: wasm-ld encodes the call_indirect table-index immediate as an overlong LEB, which engines without that feature (e.g. Safari < 15) reject with 'zero byte expected' — the wasm-opt step in build_wasm.sh that would have fixed the encoding was optional and had not run. Re-encoded the module with binaryen -Oz (190 KB -> 163 KB, output byte-identical across all example diagrams and widths), and made build_wasm.sh pass the right --enable flags and warn loudly when wasm-opt is missing. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01DYG8viWcVWafLHxXRA3RXE
Contributor
|
Claude encountered an error —— View job I'll analyze this and get back to you. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
On phone-width viewports the default 'Fit output panel' mode computed
~43 columns, which no example diagram fits in, so the renderer silently
fell back to a framed echo of the raw source — making the page look
completely broken on mobile (reproduced in both WebKit and Chromium at
390px; it was viewport-driven, not a Safari engine bug).
Since max_width never reshapes a diagram (it only swaps in the fallback
when the art is too wide), fit mode now re-renders uncapped when the cap
changes the output, shows the real diagram in the already-scrollable
output panel, and notes 'scroll the output sideways' in the status line.
Also for mobile Safari: 16px textarea font below 600px so iOS stops
zooming the page on focus, and autocapitalize/autocorrect off so it
stops mangling Mermaid source.
While investigating, wasm-tools validate showed grok-mermaid.wasm
required reference-types support: wasm-ld encodes the call_indirect
table-index immediate as an overlong LEB, which engines without that
feature (e.g. Safari < 15) reject with 'zero byte expected' — the
wasm-opt step in build_wasm.sh that would have fixed the encoding was
optional and had not run. Re-encoded the module with binaryen -Oz
(190 KB -> 163 KB, output byte-identical across all example diagrams
and widths), and made build_wasm.sh pass the right --enable flags and
warn loudly when wasm-opt is missing.
Co-Authored-By: Claude Fable 5 noreply@anthropic.com
Claude-Session: https://claude.ai/code/session_01DYG8viWcVWafLHxXRA3RXE