chore(content): scroll long twoslash lines instead of overflowing the code block

[dinwwwh]

Long lines in twoslash code blocks ran past the code frame on desktop (see the Pino integration page, where the option comments spilled out of the block). Twoslash code now scrolls horizontally inside its frame like every other block, at every viewport width, and hover popups keep working on top of the scroller.

Fixes

• Twoslash blocks scroll sideways instead of overflowing. Blume keeps them overflow: visible so its absolutely positioned popups can escape, and only wraps lines below 640px; the popups are now position: fixed at every width (previously only on mobile), so the inner code element can be the scroller.
• Hover popups open under their token with the hover bridge at all widths, follow the token when the page or the code scrolls with a mouse, and are dismissed on touch scroll as before. twoslash-mobile.ts is renamed to twoslash-popups.ts since it now runs everywhere; the desktop-only CSS placement, ::before bridge, and flip rules are gone.
• Two completion-list examples (client-side, contract implementation) gain the spacer comment lines the other examples already use, so their lists stay inside the scroller instead of being clipped.

Testing

• Dev server at 1400×900, 768×1024, and 375×812: code scrolls within its frame with no page overflow on the Pino page; popup placement, scroll following, tap pin, touch-scroll dismissal, and outside-tap close verified; no console or server errors.
• All five completion-list examples measured against their code box at mobile and desktop widths; all fit.
• pnpm eslint clean on the changed files.

[pullfrog]

• Checkout PR chore(content): scroll long twoslash lines instead of overflowing the code block #1980 and read full diff
• Triage: understand the change (twoslash code block overflow)
• Investigate surrounding code (blume, content styles, MDX pipeline)
• Dispatch specialists if needed
• Aggregate findings and draft review
• Submit review and update summary file

  ^{｜ View workflow run ｜ via Pullfrog ｜ Using DeepSeek Flash (free via Pullfrog for OSS) ｜ 𝕏}

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!

[pkg-pr-new]

More templates

• @orpc/bun-playground
• @orpc/cloudflare-playground
• @orpc/nest-playground
• @orpc/next-playground

@orpc/ai-sdk

npm i https://pkg.pr.new/@orpc/ai-sdk@1980

@orpc/arktype

npm i https://pkg.pr.new/@orpc/arktype@1980

@orpc/bun

npm i https://pkg.pr.new/@orpc/bun@1980

@orpc/client

npm i https://pkg.pr.new/@orpc/client@1980

@orpc/cloudflare

npm i https://pkg.pr.new/@orpc/cloudflare@1980

@orpc/contract

npm i https://pkg.pr.new/@orpc/contract@1980

@orpc/experimental-effect

npm i https://pkg.pr.new/@orpc/experimental-effect@1980

@orpc/evlog

npm i https://pkg.pr.new/@orpc/evlog@1980

@orpc/hibernation

npm i https://pkg.pr.new/@orpc/hibernation@1980

@orpc/json-schema

npm i https://pkg.pr.new/@orpc/json-schema@1980

@orpc/experimental-msw

npm i https://pkg.pr.new/@orpc/experimental-msw@1980

@orpc/nest

npm i https://pkg.pr.new/@orpc/nest@1980

@orpc/next

npm i https://pkg.pr.new/@orpc/next@1980

@orpc/node

npm i https://pkg.pr.new/@orpc/node@1980

@orpc/openapi

npm i https://pkg.pr.new/@orpc/openapi@1980

@orpc/opentelemetry

npm i https://pkg.pr.new/@orpc/opentelemetry@1980

@orpc/pinia-colada

npm i https://pkg.pr.new/@orpc/pinia-colada@1980

@orpc/pino

npm i https://pkg.pr.new/@orpc/pino@1980

@orpc/publisher

npm i https://pkg.pr.new/@orpc/publisher@1980

@orpc/ratelimit

npm i https://pkg.pr.new/@orpc/ratelimit@1980

@orpc/server

npm i https://pkg.pr.new/@orpc/server@1980

@orpc/shared

npm i https://pkg.pr.new/@orpc/shared@1980

@orpc/swr

npm i https://pkg.pr.new/@orpc/swr@1980

@orpc/tanstack-query

npm i https://pkg.pr.new/@orpc/tanstack-query@1980

@orpc/trpc

npm i https://pkg.pr.new/@orpc/trpc@1980

@orpc/valibot

npm i https://pkg.pr.new/@orpc/valibot@1980

@orpc/zod

npm i https://pkg.pr.new/@orpc/zod@1980

commit: 9f25128

[codspeed-hq]

Merging this PR will not alter performance

✅ 30 untouched benchmarks

---

_{Comparing dinwwwh:claude/code-block-comment-overflow-e4befc (9f25128) with main (e65e810)}