fix: Mermaid tab UI never rendered (wrong sibling lookup) - #20
Merged
Conversation
enhanceMermaidTabs looked for the code block via diagram.previousElementSibling, expecting a pre[data-language="mermaid"] right before the .mermaid div. But the actual markup (from the remarkMermaid plugin in astro.config.mjs) wraps the diagram in its own <figure class="mermaid-figure">, with the source code living in a separate <details class="mermaid-source"> that follows the figure — so previousElementSibling was always null and the tabs never built. This was already broken on main before any of the recent work; unrelated to it. Look up the diagram/code pair from the figure and its next sibling details block instead, and remove the now-empty figure/details shells once their contents are moved into the tab panels. Verified with Playwright against a production preview build: all 4 diagrams on a test post get Mermaid/Code tab pairs, switching tabs shows the correct content, tab state survives a theme toggle (re-render from the earlier Mermaid dark/light fix keeps working underneath), and no leftover empty figure/details elements remain.
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
1 participant
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.
Summary
enhanceMermaidTabslooked for the code block viadiagram.previousElementSibling, which is alwaysnullgiven the actual markup structure (.mermaiddiv is the only child of<figure class="mermaid-figure">; the code lives in a separate<details class="mermaid-source">that follows the figure).Test plan
npm run checkpassesastro build+astro preview):<figure>/<details>shellsCloses #19
🤖 Generated with Claude Code