feat: use pre and code tags for JSON display

[telestrial]

Closes #1295.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
explorer	Ready	Preview, Comment	Feb 3, 2026 5:00pm
explorer-zen	Ready	Preview, Comment	Feb 3, 2026 5:00pm

3 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
hostd	Ignored	Preview	Feb 3, 2026 5:00pm
indexd	Ignored	Preview	Feb 3, 2026 5:00pm
renterd	Ignored	Preview	Feb 3, 2026 5:00pm

[changeset-bot]

🦋 Changeset detected

Latest commit: 2fd8e17

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
explorer	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[telestrial]

• feat: use pre and code tags for JSON display #1434 👈 (View in Graphite)
• main

This stack of pull requests is managed by Graphite. Learn more about stacking.

[telestrial]

@alexfreska I renamed this component, so the changes here are a bit obfuscated. Check ExplorerTextArea. This reduces the complexity of this considerably and was a great idea (yours!).

[Copilot]

Pull request overview

This PR replaces the ExplorerTextarea component with a new ExplorerCopyableCodeBlock component that uses semantic HTML <pre> and <code> tags instead of <textarea> for displaying JSON data. This change addresses UX issues related to height and scrollbar behavior in JSON dropdown views.

Changes:

• Introduced ExplorerCopyableCodeBlock component using <pre> and <code> tags with horizontal overflow support
• Removed ExplorerTextarea component and its dynamic height management logic
• Updated all JSON display locations to use the new component

Reviewed changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
apps/explorer/components/ExplorerCopyableCodeBlock.tsx	New component implementing copyable code blocks with <pre> and <code> tags
apps/explorer/components/ExplorerTextarea.tsx	Removed legacy textarea-based component
apps/explorer/components/TroubleshooterResults/index.tsx	Updated to use ExplorerCopyableCodeBlock for JSON display
apps/explorer/components/Transaction/index.tsx	Updated to use ExplorerCopyableCodeBlock for JSON display
apps/explorer/components/Output/index.tsx	Updated to use ExplorerCopyableCodeBlock for state element JSON display
apps/explorer/components/BlockMetrics/DifficultyMetrics.tsx	Updated to use ExplorerCopyableCodeBlock for metrics JSON display
apps/explorer/components/Block/index.tsx	Updated to use ExplorerCopyableCodeBlock for block JSON display
.changeset/better-shrimps-stay.md	Documented the change as a minor version bump for the explorer package

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.