fix: use a box-drawing-capable monospace font for the mono typography token

[alexey-milovidov]

Problem

The typography.font.families.mono token was "Inconsolata", Consolas, "SFMono Regular", monospace. In apps that load Inconsolata from Google Fonts (as .storybook/preview-head.html did, and as ClickHouse Fiddle does), box-drawing characters — the frames of ClickHouse Pretty* output formats, U+2500–U+259F — render broken:

• The full Inconsolata font does contain box-drawing glyphs, but Google Fonts serves latin/latin-ext/vietnamese subsets whose unicode-range does not include U+2500–U+259F, so those characters fall through to the rest of the stack.
• Consolas is absent on Linux and macOS, and SFMono Regular is not a real family name (the PostScript name is SFMono-Regular, the family is SF Mono), so the characters land in a generic monospace whose advance width differs from Inconsolata — every frame line breaks apart horizontally.
• The mono text styles used line-height 1.6/1.7, which leaves vertical gaps between the │ glyphs of consecutive rows even with a correct font.

This is the upstream half of ClickHouse/clickhouse-fiddle#82.

Fix

• Change the mono stack to "DejaVu Sans Mono", "Liberation Mono", MonoLisa, Consolas, monospace — the same stack the ClickHouse Play UI uses. Every font in it (and the typical monospace defaults such as Menlo) covers box drawing.
• Set line-height: normal for the product/text/mono styles. These fonts draw box-drawing glyphs to fill exactly their normal line box (1.164 em for DejaVu Sans Mono, 1.133 em for Liberation Mono), so vertical lines touch at normal and break apart at anything larger — a fixed value like 1.25 measurably leaves gaps (comparison).
• Regenerated token files with yarn generate:tokens; removed the now-unused Inconsolata webfont from the Storybook preview head.

Before / after

The same PrettyMonoBlock output rendered with the old and new --click-codeblock-typography-text-default token values:

And the effect in ClickHouse Fiddle (https://fiddle.clickhouse.com/7ae4e9f7-bd3a-4638-8d98-540c90aa14bd): before → after.

Verification

• yarn build passes (including the dist health check)
• yarn vitest run: 544 tests in 61 files pass
• yarn lint: only pre-existing warnings

🤖 Generated with Claude Code

[changeset-bot]

🦋 Changeset detected

Latest commit: 099b31c

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

This PR includes changesets to release 1 package

Name	Type
@clickhouse/click-ui	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

[workflow-authentication-public]

Storybook Preview Deployed

✅ Preview URL: https://click-o7x6y2d58-clickhouse.vercel.app

Built from commit: 724f54101929d739921781e94c2f53d66fd61cfe

[XOP]

Hi @alexey-milovidov ! 👋

Thank you for the PR!
We checked with @gjones and confirmed that this change requires a deeper investigation. Due to the global nature of updates it will be a waterfall in several places apart from CodeBlock (sql console one of them).

Created a follow up ticket

Proposal:

• close this PR for now
• in your project, create a local font override that would use suitable monospace font, it's totally okay so far

[gjones]

Yeah agreed, for context, in addition to CodeBlock, the SQL Console uses Inconsolata so any change needs to be deeply tested to ensure that all existing functionality is preserved and unaffected. Special characters, Cyrillic fallback etc etc.

cc @ArctypeZach for awareness as we'll want to collaborate on testing.