feat(codeblock): Add wrapping and persistent copy action

[evanpurkhiser]

Summary

Adds reusable CodeBlock options for prose-like snippets in constrained layouts:

• wrap long lines instead of requiring horizontal scrolling
• keep the copy action visible and reserve space so it does not overlap content
• document both behaviors in the component examples

Testing

• .venv/bin/prek run -q --files static/app/components/core/code/codeBlock.tsx static/app/components/core/code/codeBlock.mdx
• node_modules/.bin/knip
• node_modules/.bin/knip --production --exclude dependencies

[github-actions]

Story previews

Preview the stories changed in this PR on the Vercel deployment:

• app/components/core/code/codeBlock.mdx

_{Preview deployment: https://sentry-3zj3zukpy.sentry.dev}

[natemoo-re]

not sure that's correct

[evanpurkhiser]

Good catch. The exclusion only applied in wrapping mode, so the persistent copy action could overlap a regular scrolling snippet. Scrolling blocks now reserve trailing space, while wrapping blocks use a 12×16px float exclusion limited to the first line.

— Claude Code

[natemoo-re]

Suggested change

	</Storybook.Demo>
	</Storybook.Demo>
	```tsx
	<CodeBlock alwaysShowCopyButton language="bash">
	pnpm install @sentry/browser
	</CodeBlock>
	```

[evanpurkhiser]

Added the JSX example below the demo.

— Claude Code

[natemoo-re]

Suggested change

	</Storybook.Demo>
	</Storybook.Demo>
	```tsx
	<CodeBlock alwaysShowCopyButton wrapMode="wrap">
	Ask your coding agent to configure Sentry and verify that an error reaches your project.
	</CodeBlock>
	```

[evanpurkhiser]

Added the JSX example below the wrapping demo.

— Claude Code

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit 05e3185. Configure here.}

[cursor]

Copy button overlaps wrapped text

Medium Severity

The wrap-mode spacer for the persistent copy control is smaller than the floating copy button, so wrapped snippet text still runs underneath it. That breaks the reserved-space behavior for alwaysShowCopyButton with wrapMode="wrap".

 

^{Reviewed by Cursor Bugbot for commit 05e3185. Configure here.}