fix(web): restore chat code block styling after the markstream upgrade - #2459
Conversation
🦋 Changeset detectedLatest commit: b85b1d7 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
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 |
commit: |
markstream-vue 1.0.9 renders shiki code blocks through stream-diffs (code-editor-container) instead of <pre>, and drives font size, line height, and font family from monacoOptions applied as inline styles. With only lineNumbers passed, blocks fell back to 12px/18px in the inherited proportional UI font, and the pre/copy-button/content CSS overrides in Markdown.vue no longer matched anything. Pass fontSize/lineHeight/fontFamily/padding through codeBlockProps monacoOptions (the only channel that reaches the shiki renderer), retarget the dead overrides to code-block-shell-content and code-action-btn, and hide the loading fallback's hardcoded line-number gutter so the highlight upgrade no longer shifts layout.
9327b5f to
8ded53c
Compare
wbxl2000
changed the title
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 8ded53c306
ℹ️ About Codex in GitHub
Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
| fontSize: 13, | ||
| lineHeight: 21.45, |
There was a problem hiding this comment.
When users change the Appearance font-size setting, applyUiFontSize updates --base-ui-font-size and the shared chat CSS keeps code surfaces on the derived token; these new inline fontSize: 13 / lineHeight: 21.45 values bypass that path for shiki-rendered blocks, so highlighted code stays at the default size while fallback/pre-rendered code, diffs, and the surrounding chat scale. Please derive these options from the same UI font-size token or refresh them when the setting changes instead of freezing the default metrics.
AGENTS.md reference: apps/kimi-web/AGENTS.md:L9-L13
Useful? React with 👍 / 👎.
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: c97d715900
ℹ️ About Codex in GitHub
Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
| }; | ||
| monacoOptions: { | ||
| lineNumbers: false, | ||
| fontSize: uiFontSize.value, |
There was a problem hiding this comment.
When the user changes the Appearance font size after a chat code block has already mounted, this reactive object now changes only monacoOptions.fontSize. In markstream-vue 1.0.9-beta.1, the prop watcher updates mounted stream-diffs editors with updateOptions({ fontSize }), and the fallback <pre> reads props.monacoOptions.lineHeight before using its own default, so the added CSS line-height: 1.65 is overridden by inline styles and the editor/fallback no longer keep the intended rhythm at non-default sizes. Please pass a numeric lineHeight derived from uiFontSize alongside fontSize so mounted and fallback blocks scale together. Fresh evidence: this commit made codeBlockProps reactive but still omits lineHeight.
Useful? React with 👍 / 👎.
Tying the code font size to the Appearance UI font size setting changed the default rendering from the 13px design token to 14px and broke the 15/14/13 type scale; revert to the fixed token size. Keep the fallback ↔ settled alignment: the restored monaco padding option feeds the fallback pre's inline padding (12px, ignored by the shadow-root renderer), and a relative 1.65 line-height with !important beats the inline 1.5x default upstream stamps on the fallback.
The markstream family ships breaking rendering changes in patch releases (1.0.8 swapped the code-block engine and renamed its DOM classes), so a floating caret range hands merge control to upstream. Pin markstream-vue, stream-diffs, stream-markdown and stream-monaco exactly — upgrades become deliberate actions with a visual check, same posture as @chenglou/pretext in the same file.
|
Codex Review: Didn't find any major issues. You're on a roll. Reviewed commit: ℹ️ About Codex in GitHubCodex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
If Codex has suggestions, it will comment; otherwise it will react with 👍. When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback". |
1 participant
Related Issue
No linked issue — regression from #2415 (markstream-vue 1.0.9-beta.1 upgrade), explained below.
Problem
After the markstream-vue 1.0.9-beta.1 upgrade, chat code blocks render in the inherited proportional UI font at the wrong size: 1.0.9 renders shiki blocks through stream-diffs (
code-editor-containerdivs instead of<pre><code>) and applies font metrics as inline styles frommonacoOptions. The oldpre-targeted CSS could no longer reach those values. Two override targets also went dead (.code-block-content→.code-block-shell-content,.copy-button→.code-action-btn), and the loading fallback<pre>shows a hardcoded line-number gutter that disappears once highlighting lands.What changed
--diffs-gap-blockvariable and the shared--space-3token for highlighted-block spacing; apply the same token to the plain fallback.loading: falseso settled blocks show readable plain text immediately while highlighting initializes.Verified with the production build, vue-tsc, the 653-test web suite, the style guard, and a real browser at 12px / 14px / 20px in light and dark themes.
Checklist
gen-changesetsskill, or this PR needs no changeset.gen-docsskill, or this PR needs no doc update.