docs(uikit): fix Provider Tree diagram text truncation in React Integration#7
Merged
pasevin merged 4 commits intocursor/openzeppelin-uikit-documentation-5e15from Apr 9, 2026
Conversation
The previous commit reduced the information shown to users (e.g. 'EcosystemRuntir' truncated to fit narrow LR nodes). Restored full descriptive text using bold provider names with descriptions on separate lines, increased node spacing, and set useMaxWidth:false to prevent truncation. Co-authored-by: Aleksandr Pasevin <aleksandr.pasevin@openzeppelin.com>
LR layout with subgraph truncates descriptive text. TD layout without subgraph wrapper allows full-width nodes that display all information. Matches the clean node style used by other UIKit diagrams. Co-authored-by: Aleksandr Pasevin <aleksandr.pasevin@openzeppelin.com>
Add wrappingWidth:400 and classDef width:350px to prevent Mermaid from truncating descriptive text in Provider Tree nodes. Use classDef for cleaner style definitions matching other UIKit diagram patterns. Co-authored-by: Aleksandr Pasevin <aleksandr.pasevin@openzeppelin.com>
… for provider tree diagram Co-authored-by: Aleksandr Pasevin <aleksandr.pasevin@openzeppelin.com>
9 tasks
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.
Documentation Pull Request
Summary
Fixes the Provider Tree Mermaid diagram in the UIKit React Integration page where node text was being truncated (e.g. "EcosystemRuntir" instead of "EcosystemRuntime instances", "wallet stat" instead of "wallet state · hooks").
The previous commit switched the diagram to
flowchart LRwhich caused Mermaid to constrain node widths and truncate descriptive text. This PR:flowchart TD(top-down) layout for better node width behaviorwrappingWidth: 400andclassDef width: 350pxto prevent text truncationclassDeffor cleaner style definitions, matching other UIKit diagram patternsBefore (truncated):
Provider Tree before fix showing truncated text
After (full text visible):
Provider Tree after fix with full text
Demo:
provider_tree_diagram_demo.mp4
Type of Change
Related Issues
Relates to the UIKit documentation effort
Checklist
pnpm run buildpnpm run check(pre-existing link errors for/ecosystem-adapters/*routes are unrelated)Additional Notes
The lint check reports 11 pre-existing errors for broken
/ecosystem-adapters/*links across multiple UIKit pages — these exist on the parent branch and are unrelated to this change.To show artifacts inline, enable in settings.