From 82fdcbce37365fc6ac6275070a25e976c1ca98ef Mon Sep 17 00:00:00 2001 From: "Chen, Yicun" Date: Wed, 29 Jul 2026 12:20:30 +0800 Subject: [PATCH 1/2] fix(web): prevent fallback code line number overlap --- .changeset/fix-web-fallback-line-numbers.md | 5 +++++ apps/kimi-web/src/components/chat/Markdown.vue | 10 ++++++++++ 2 files changed, 15 insertions(+) create mode 100644 .changeset/fix-web-fallback-line-numbers.md diff --git a/.changeset/fix-web-fallback-line-numbers.md b/.changeset/fix-web-fallback-line-numbers.md new file mode 100644 index 0000000000..c4f8e406c0 --- /dev/null +++ b/.changeset/fix-web-fallback-line-numbers.md @@ -0,0 +1,5 @@ +--- +"@moonshot-ai/kimi-code": patch +--- + +web: Fix line numbers overlapping code in fallback-rendered code blocks. diff --git a/apps/kimi-web/src/components/chat/Markdown.vue b/apps/kimi-web/src/components/chat/Markdown.vue index 42535be66b..30d1a92340 100644 --- a/apps/kimi-web/src/components/chat/Markdown.vue +++ b/apps/kimi-web/src/components/chat/Markdown.vue @@ -672,6 +672,16 @@ function copyDiff(code: string, idx: number) { .md :deep(.code-block-content pre:not(.shiki) code) { color: var(--color-text); } +/* markstream-vue 1.0.7's scoped fallback rule does not match the generated + 
 element, so line-numbered fallback blocks do not reserve space for the
+   gutter. Keep this limited to the fallback renderer; Shiki already applies
+   the same padding to its code element. */
+.md :deep(pre.markstream-pre--line-numbers.code-pre-fallback > .markstream-pre__code) {
+  box-sizing: border-box;
+  min-width: 100%;
+  padding-left: var(--markstream-code-padding-left, 52px);
+  padding-right: var(--markstream-code-padding-x, 12px);
+}
 
 /* Links — open in a new tab (markstream handles target/rel) */
 .md :deep(a) {

From 50454312cbc14c7c601cfc497b7ce04b4c4d4c70 Mon Sep 17 00:00:00 2001
From: "Chen, Yicun" 
Date: Wed, 29 Jul 2026 14:14:52 +0800
Subject: [PATCH 2/2] fix(web): restore fallback code block layout

---
 .changeset/fix-web-fallback-line-numbers.md   |  2 +-
 .../kimi-web/src/components/chat/Markdown.vue | 37 +++++++++++++++----
 2 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/.changeset/fix-web-fallback-line-numbers.md b/.changeset/fix-web-fallback-line-numbers.md
index c4f8e406c0..0acd3293b3 100644
--- a/.changeset/fix-web-fallback-line-numbers.md
+++ b/.changeset/fix-web-fallback-line-numbers.md
@@ -2,4 +2,4 @@
 "@moonshot-ai/kimi-code": patch
 ---
 
-web: Fix line numbers overlapping code in fallback-rendered code blocks.
+web: Fix line numbers overlapping or drifting out of alignment in fallback-rendered code blocks.
diff --git a/apps/kimi-web/src/components/chat/Markdown.vue b/apps/kimi-web/src/components/chat/Markdown.vue
index 30d1a92340..9249a0eca2 100644
--- a/apps/kimi-web/src/components/chat/Markdown.vue
+++ b/apps/kimi-web/src/components/chat/Markdown.vue
@@ -672,15 +672,38 @@ function copyDiff(code: string, idx: number) {
 .md :deep(.code-block-content pre:not(.shiki) code) {
   color: var(--color-text);
 }
-/* markstream-vue 1.0.7's scoped fallback rule does not match the generated
-   
 element, so line-numbered fallback blocks do not reserve space for the
-   gutter. Keep this limited to the fallback renderer; Shiki already applies
-   the same padding to its code element. */
-.md :deep(pre.markstream-pre--line-numbers.code-pre-fallback > .markstream-pre__code) {
+/* markstream-vue 1.0.7 renders its standalone fallback as the component root,
+   but scopes the corresponding styles as though the 
 were a descendant.
+   Restore that fallback layout here; loading fallbacks already receive the
+   equivalent global markstream rule. */
+.md :deep(pre.code-pre-fallback:not(.markstream-pre--diff-preview):not([data-markstream-code-loading='1'])) {
   box-sizing: border-box;
-  min-width: 100%;
+  width: 100%;
+  margin: 0.6em 0;
+  padding: var(--markstream-code-padding-y, 8px) var(--markstream-code-padding-x, 12px);
   padding-left: var(--markstream-code-padding-left, 52px);
-  padding-right: var(--markstream-code-padding-x, 12px);
+  overflow: auto;
+  border: 1px solid var(--color-line);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-sunken);
+  box-shadow: var(--shadow-xs);
+  color: var(--color-text);
+  font-family: var(--markstream-code-font-family, var(--font-mono));
+  font-size: var(--vscode-editor-font-size, var(--text-sm));
+  font-weight: var(--weight-regular);
+  line-height: var(--vscode-editor-line-height, calc(var(--text-sm) * 1.65));
+}
+.md :deep(pre.code-pre-fallback.is-wrap:not(.markstream-pre--diff-preview)) {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+.md :deep(pre.code-pre-fallback:not(.markstream-pre--diff-preview) > .markstream-pre__code) {
+  min-width: 100%;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: inherit;
+  font: inherit;
 }
 
 /* Links — open in a new tab (markstream handles target/rel) */