From 7d00426bd0a9af5742e68a4c3132e6e05ca39488 Mon Sep 17 00:00:00 2001
From: qer <wbxl2000@outlook.com>
Date: Wed, 1 Jul 2026 21:19:04 +0800
Subject: [PATCH 1/2] fix(web): hide conversation outline when it cannot expand

---
 .changeset/web-outline-fit.md                 |  5 ++
 .../src/components/chat/ConversationToc.vue   | 57 +++++++++++++++++--
 2 files changed, 58 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/web-outline-fit.md

diff --git a/.changeset/web-outline-fit.md b/.changeset/web-outline-fit.md
new file mode 100644
index 0000000000..159c865faa
--- /dev/null
+++ b/.changeset/web-outline-fit.md
@@ -0,0 +1,5 @@
+---
+"@moonshot-ai/kimi-code": patch
+---
+
+Hide the conversation outline when there is not enough room to expand its labels, so it no longer clips against the window edge.
diff --git a/apps/kimi-web/src/components/chat/ConversationToc.vue b/apps/kimi-web/src/components/chat/ConversationToc.vue
index 5267b9c500..88649c9b3e 100644
--- a/apps/kimi-web/src/components/chat/ConversationToc.vue
+++ b/apps/kimi-web/src/components/chat/ConversationToc.vue
@@ -1,6 +1,6 @@
 <!-- apps/kimi-web/src/components/chat/ConversationToc.vue -->
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import type { ChatTurn } from '../../types';
 
@@ -25,8 +25,50 @@ const emit = defineEmits<{
 
 const { t } = useI18n();
 
+// Width the rail needs beside the reading column once its labels are fully
+// revealed on hover/focus: 3px bar + 10px gap + 220px label, plus a small
+// buffer so the text never kisses the container edge. Kept in sync with the
+// `.toc-bar` / `.toc-label` rules below.
+const EXPANDED_WIDTH = 240;
+
+const navRef = ref<HTMLElement | null>(null);
+// Whether the rail, once expanded, fits within the room to the right of the
+// reading column. When it would overflow, we hide the outline entirely rather
+// than showing a panel that gets clipped by the container edge.
+const fits = ref(true);
+
+let observer: ResizeObserver | null = null;
+
+function measure(): void {
+  const nav = navRef.value;
+  const parent = nav?.offsetParent as HTMLElement | null;
+  if (!nav || !parent) return;
+  const navLeft = nav.getBoundingClientRect().left;
+  const parentRight = parent.getBoundingClientRect().right;
+  fits.value = parentRight - navLeft >= EXPANDED_WIDTH;
+}
+
+onMounted(() => {
+  const parent = navRef.value?.offsetParent as HTMLElement | null;
+  if (!parent) return;
+  if (typeof ResizeObserver !== 'undefined') {
+    observer = new ResizeObserver(measure);
+    observer.observe(parent);
+  }
+  // Run once synchronously so the very first paint is already correct, instead
+  // of flashing a clipped panel before the observer fires.
+  measure();
+});
+
+onBeforeUnmount(() => {
+  observer?.disconnect();
+  observer = null;
+});
+
 // The outline is only useful once there is something to navigate, and it never
-// shows on mobile or while the session is still loading.
+// shows on mobile or while the session is still loading. `fits` is kept out of
+// this computed so the nav stays mounted (and measurable) even when hidden;
+// clipping is applied via the `toc-clipped` class instead.
 const visible = computed(
   () => !props.mobile && !props.sessionLoading && props.items.length > 1,
 );
@@ -38,8 +80,11 @@ const visible = computed(
        and reveals each query's title to the right, making rows easy to click. -->
   <nav
     v-if="visible"
+    ref="navRef"
     class="conversation-toc"
+    :class="{ 'toc-clipped': !fits }"
     :aria-label="t('conversation.toc')"
+    :aria-hidden="fits ? undefined : true"
   >
     <div class="toc-scroll">
       <button
@@ -151,7 +196,11 @@ const visible = computed(
 .toc-row:hover .toc-bar { opacity: 1; }
 .toc-row:hover .toc-label { color: var(--color-text); }
 
-@container (max-width: 920px) {
-  .conversation-toc { display: none; }
+/* When there is not enough room to the right of the reading column to reveal
+   the labels, the rail is kept mounted (so its position can keep being
+   measured) but hidden from view and from pointer/screen-reader interaction. */
+.conversation-toc.toc-clipped {
+  visibility: hidden;
+  pointer-events: none;
 }
 </style>

From 42b17b9dc5dda76b593bd617ac6808e8a5cdda4d Mon Sep 17 00:00:00 2001
From: qer <wbxl2000@outlook.com>
Date: Wed, 1 Jul 2026 21:50:34 +0800
Subject: [PATCH 2/2] fix(web): re-measure conversation outline when it becomes
 visible

When ConversationToc mounts while hidden (sessionLoading, mobile, or before a second user turn), navRef is null and the ResizeObserver is never set up, so fits stays true and the outline shows even in narrow layouts. Re-initialize the measurement whenever the nav is rendered.
---
 .../src/components/chat/ConversationToc.vue   | 49 ++++++++++++-------
 1 file changed, 31 insertions(+), 18 deletions(-)

diff --git a/apps/kimi-web/src/components/chat/ConversationToc.vue b/apps/kimi-web/src/components/chat/ConversationToc.vue
index 88649c9b3e..a725ad6d33 100644
--- a/apps/kimi-web/src/components/chat/ConversationToc.vue
+++ b/apps/kimi-web/src/components/chat/ConversationToc.vue
@@ -1,6 +1,6 @@
 <!-- apps/kimi-web/src/components/chat/ConversationToc.vue -->
 <script setup lang="ts">
-import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
+import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import type { ChatTurn } from '../../types';
 
@@ -48,23 +48,6 @@ function measure(): void {
   fits.value = parentRight - navLeft >= EXPANDED_WIDTH;
 }
 
-onMounted(() => {
-  const parent = navRef.value?.offsetParent as HTMLElement | null;
-  if (!parent) return;
-  if (typeof ResizeObserver !== 'undefined') {
-    observer = new ResizeObserver(measure);
-    observer.observe(parent);
-  }
-  // Run once synchronously so the very first paint is already correct, instead
-  // of flashing a clipped panel before the observer fires.
-  measure();
-});
-
-onBeforeUnmount(() => {
-  observer?.disconnect();
-  observer = null;
-});
-
 // The outline is only useful once there is something to navigate, and it never
 // shows on mobile or while the session is still loading. `fits` is kept out of
 // this computed so the nav stays mounted (and measurable) even when hidden;
@@ -72,6 +55,36 @@ onBeforeUnmount(() => {
 const visible = computed(
   () => !props.mobile && !props.sessionLoading && props.items.length > 1,
 );
+
+// The nav is rendered only while `visible` (v-if), so a mount while navRef is
+// still null (during sessionLoading, on mobile, or before a second user turn)
+// would skip the ResizeObserver setup and leave `fits` at its default `true`.
+// Re-initialize whenever the nav is actually rendered so `fits` is measured
+// against the real layout instead.
+watch(
+  visible,
+  (isVisible) => {
+    observer?.disconnect();
+    observer = null;
+    if (!isVisible) return;
+    void nextTick(() => {
+      const nav = navRef.value;
+      const parent = nav?.offsetParent as HTMLElement | null;
+      if (!nav || !parent) return;
+      if (typeof ResizeObserver !== 'undefined') {
+        observer = new ResizeObserver(measure);
+        observer.observe(parent);
+      }
+      measure();
+    });
+  },
+  { immediate: true },
+);
+
+onBeforeUnmount(() => {
+  observer?.disconnect();
+  observer = null;
+});
 </script>
 
 <template>