From f7695d9f9a8e60924b0d2415b813166ce0290d52 Mon Sep 17 00:00:00 2001
From: qer <wbxl2000@outlook.com>
Date: Tue, 23 Jun 2026 01:16:58 +0800
Subject: [PATCH 1/7] feat(web): remove sidebar and panel max-width limits

Make the resize handle max width optional so the web sidebar and right-side detail/preview panel can be resized beyond their previous fixed maximums.
---
 .changeset/web-unbounded-panel-width.md           | 5 +++++
 apps/kimi-web/src/App.vue                         | 4 ----
 apps/kimi-web/src/components/ResizeHandle.vue     | 2 +-
 apps/kimi-web/src/composables/useDetailPanel.ts   | 2 --
 apps/kimi-web/src/composables/useResizable.ts     | 6 +++---
 apps/kimi-web/src/composables/useSidebarLayout.ts | 2 --
 6 files changed, 9 insertions(+), 12 deletions(-)
 create mode 100644 .changeset/web-unbounded-panel-width.md

diff --git a/.changeset/web-unbounded-panel-width.md b/.changeset/web-unbounded-panel-width.md
new file mode 100644
index 0000000000..6c0b5b244b
--- /dev/null
+++ b/.changeset/web-unbounded-panel-width.md
@@ -0,0 +1,5 @@
+---
+"@moonshot-ai/kimi-code": minor
+---
+
+Allow the web sidebar and detail panel to be resized beyond their previous fixed maximum widths.
diff --git a/apps/kimi-web/src/App.vue b/apps/kimi-web/src/App.vue
index beffa8e337..d0e82e5214 100644
--- a/apps/kimi-web/src/App.vue
+++ b/apps/kimi-web/src/App.vue
@@ -123,7 +123,6 @@ const {
   SIDEBAR_WIDTH_KEY,
   SIDEBAR_DEFAULT,
   SIDEBAR_MIN,
-  SIDEBAR_MAX,
   sessionColWidth,
   sidebarCollapsed,
   sideWidth,
@@ -160,7 +159,6 @@ const {
   PREVIEW_WIDTH_KEY,
   PREVIEW_MIN,
   previewDefaultWidth,
-  previewMaxWidth,
   previewWidth,
   thinkingPanelText,
   thinkingVisible,
@@ -561,7 +559,6 @@ function openPr(url: string): void {
         :storage-key="SIDEBAR_WIDTH_KEY"
         :default-width="SIDEBAR_DEFAULT"
         :min="SIDEBAR_MIN"
-        :max="SIDEBAR_MAX"
         @update:width="sessionColWidth = $event"
       />
       <div v-if="sidebarCollapsed" class="sidebar-rail">
@@ -686,7 +683,6 @@ function openPr(url: string): void {
       :storage-key="PREVIEW_WIDTH_KEY"
       :default-width="previewDefaultWidth"
       :min="PREVIEW_MIN"
-      :max="previewMaxWidth"
       reverse
       :aria-label="t('layout.resizePreviewAria')"
       @update:width="previewWidth = $event"
diff --git a/apps/kimi-web/src/components/ResizeHandle.vue b/apps/kimi-web/src/components/ResizeHandle.vue
index 1c670aefc2..4b362bb236 100644
--- a/apps/kimi-web/src/components/ResizeHandle.vue
+++ b/apps/kimi-web/src/components/ResizeHandle.vue
@@ -13,7 +13,7 @@ const props = withDefaults(
     storageKey: string;
     defaultWidth: number;
     min: number;
-    max: number;
+    max?: number;
     reverse?: boolean;
     ariaLabel?: string;
   }>(),
diff --git a/apps/kimi-web/src/composables/useDetailPanel.ts b/apps/kimi-web/src/composables/useDetailPanel.ts
index a119d5ed56..f71d3df5ea 100644
--- a/apps/kimi-web/src/composables/useDetailPanel.ts
+++ b/apps/kimi-web/src/composables/useDetailPanel.ts
@@ -45,7 +45,6 @@ export function useDetailPanel({
   }
 
   const previewDefaultWidth = computed(() => defaultPreviewWidth());
-  const previewMaxWidth = computed(() => Math.max(PREVIEW_MIN, previewAreaWidth() - PREVIEW_MIN));
   const previewWidth = ref(previewDefaultWidth.value);
 
   // ---------------------------------------------------------------------------
@@ -227,7 +226,6 @@ export function useDetailPanel({
     PREVIEW_WIDTH_KEY,
     PREVIEW_MIN,
     previewDefaultWidth,
-    previewMaxWidth,
     previewWidth,
     thinkingPanelText,
     thinkingVisible,
diff --git a/apps/kimi-web/src/composables/useResizable.ts b/apps/kimi-web/src/composables/useResizable.ts
index 41c9d8d60d..4b7675bbc7 100644
--- a/apps/kimi-web/src/composables/useResizable.ts
+++ b/apps/kimi-web/src/composables/useResizable.ts
@@ -14,8 +14,8 @@ export interface UseResizableOptions {
   defaultWidth: number;
   /** Smallest allowed width (px). */
   min: number;
-  /** Largest allowed width (px). */
-  max: number;
+  /** Largest allowed width (px). Omit to allow unbounded growth. */
+  max?: number;
   /** True when dragging right should shrink the controlled width. */
   reverse?: boolean;
 }
@@ -57,7 +57,7 @@ export function useResizable(options: UseResizableOptions): UseResizable {
 
   function clamp(value: number): number {
     if (!Number.isFinite(value)) return defaultWidth;
-    return Math.min(max, Math.max(min, Math.round(value)));
+    return Math.min(max ?? Infinity, Math.max(min, Math.round(value)));
   }
 
   const width = ref<number>(clamp(readStored(storageKey) ?? defaultWidth));
diff --git a/apps/kimi-web/src/composables/useSidebarLayout.ts b/apps/kimi-web/src/composables/useSidebarLayout.ts
index a05e1c080d..49af2f8cfa 100644
--- a/apps/kimi-web/src/composables/useSidebarLayout.ts
+++ b/apps/kimi-web/src/composables/useSidebarLayout.ts
@@ -9,7 +9,6 @@ const SIDEBAR_WIDTH_KEY = STORAGE_KEYS.sidebarWidth;
 const SIDEBAR_COLLAPSED_KEY = STORAGE_KEYS.sidebarCollapsed;
 const SIDEBAR_DEFAULT = 270;
 const SIDEBAR_MIN = 170;
-const SIDEBAR_MAX = 420;
 const SIDEBAR_COLLAPSED_WIDTH = 36;
 
 export function useSidebarLayout() {
@@ -44,7 +43,6 @@ export function useSidebarLayout() {
     SIDEBAR_WIDTH_KEY,
     SIDEBAR_DEFAULT,
     SIDEBAR_MIN,
-    SIDEBAR_MAX,
     sessionColWidth,
     sidebarCollapsed,
     sideWidth,

From cffcde3fa3d42ceb84f23ffcdbdbc3150fb1f4c9 Mon Sep 17 00:00:00 2001
From: qer <wbxl2000@outlook.com>
Date: Tue, 23 Jun 2026 01:27:42 +0800
Subject: [PATCH 2/7] fix(web): keep sidebar resize handle reachable on narrow
 windows

Cap the restored sidebar width at a viewport-aware maximum (viewport width minus the conversation pane minimum) so a width saved on a wide display cannot push the resize handle or collapse button off-screen on a narrower window. The cap updates on resize.
---
 .changeset/web-unbounded-panel-width.md       |  2 +-
 apps/kimi-web/src/App.vue                     |  2 ++
 .../src/composables/useSidebarLayout.ts       | 29 +++++++++++++++++--
 3 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/.changeset/web-unbounded-panel-width.md b/.changeset/web-unbounded-panel-width.md
index 6c0b5b244b..25d56ca5b4 100644
--- a/.changeset/web-unbounded-panel-width.md
+++ b/.changeset/web-unbounded-panel-width.md
@@ -2,4 +2,4 @@
 "@moonshot-ai/kimi-code": minor
 ---
 
-Allow the web sidebar and detail panel to be resized beyond their previous fixed maximum widths.
+Allow the web sidebar and detail panel to be resized up to the available viewport width instead of their previous fixed maximums.
diff --git a/apps/kimi-web/src/App.vue b/apps/kimi-web/src/App.vue
index d0e82e5214..39886903c9 100644
--- a/apps/kimi-web/src/App.vue
+++ b/apps/kimi-web/src/App.vue
@@ -123,6 +123,7 @@ const {
   SIDEBAR_WIDTH_KEY,
   SIDEBAR_DEFAULT,
   SIDEBAR_MIN,
+  sidebarMax,
   sessionColWidth,
   sidebarCollapsed,
   sideWidth,
@@ -559,6 +560,7 @@ function openPr(url: string): void {
         :storage-key="SIDEBAR_WIDTH_KEY"
         :default-width="SIDEBAR_DEFAULT"
         :min="SIDEBAR_MIN"
+        :max="sidebarMax"
         @update:width="sessionColWidth = $event"
       />
       <div v-if="sidebarCollapsed" class="sidebar-rail">
diff --git a/apps/kimi-web/src/composables/useSidebarLayout.ts b/apps/kimi-web/src/composables/useSidebarLayout.ts
index 49af2f8cfa..dee20488ae 100644
--- a/apps/kimi-web/src/composables/useSidebarLayout.ts
+++ b/apps/kimi-web/src/composables/useSidebarLayout.ts
@@ -2,7 +2,7 @@
 // Layout: resizable session column. ResizeHandle owns the column width (with
 // localStorage persistence); we mirror it here to drive the App grid.
 
-import { computed, ref } from 'vue';
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
 import { safeGetString, safeSetString, STORAGE_KEYS } from '../lib/storage';
 
 const SIDEBAR_WIDTH_KEY = STORAGE_KEYS.sidebarWidth;
@@ -10,12 +10,33 @@ const SIDEBAR_COLLAPSED_KEY = STORAGE_KEYS.sidebarCollapsed;
 const SIDEBAR_DEFAULT = 270;
 const SIDEBAR_MIN = 170;
 const SIDEBAR_COLLAPSED_WIDTH = 36;
+// Minimum width kept for the conversation pane. The sidebar is capped so the
+// conversation keeps at least this much room, which also guarantees the sidebar
+// resize handle and collapse button stay inside the viewport even when a width
+// saved on a wider display is restored on a narrower one.
+const CONVERSATION_MIN = 320;
 
 export function useSidebarLayout() {
   const sessionColWidth = ref(SIDEBAR_DEFAULT);
   const sidebarCollapsed = ref(false);
+  const viewportWidth = ref(
+    typeof window === 'undefined' ? SIDEBAR_DEFAULT + CONVERSATION_MIN : window.innerWidth,
+  );
+
+  function updateViewportWidth(): void {
+    viewportWidth.value = window.innerWidth;
+  }
+
+  // Largest sidebar width that still leaves the conversation pane usable. Never
+  // below SIDEBAR_MIN so the sidebar itself stays intact on very narrow windows.
+  const sidebarMax = computed(() =>
+    Math.max(SIDEBAR_MIN, viewportWidth.value - CONVERSATION_MIN),
+  );
+
   const sideWidth = computed(() =>
-    sidebarCollapsed.value ? SIDEBAR_COLLAPSED_WIDTH : sessionColWidth.value,
+    sidebarCollapsed.value
+      ? SIDEBAR_COLLAPSED_WIDTH
+      : Math.min(sessionColWidth.value, sidebarMax.value),
   );
 
   function loadSidebarCollapsed(): void {
@@ -39,10 +60,14 @@ export function useSidebarLayout() {
     saveSidebarCollapsed();
   }
 
+  onMounted(() => window.addEventListener('resize', updateViewportWidth));
+  onBeforeUnmount(() => window.removeEventListener('resize', updateViewportWidth));
+
   return {
     SIDEBAR_WIDTH_KEY,
     SIDEBAR_DEFAULT,
     SIDEBAR_MIN,
+    sidebarMax,
     sessionColWidth,
     sidebarCollapsed,
     sideWidth,

From 26e1cd5bf2cb4e0cbe1c9ccd8d5029ec7361098f Mon Sep 17 00:00:00 2001
From: qer <wbxl2000@outlook.com>
Date: Tue, 23 Jun 2026 01:34:41 +0800
Subject: [PATCH 3/7] fix(web): cap preview panel to viewport and share
 panel-width logic

Apply the same viewport-aware maximum to the right-side detail/preview panel and extract the viewport tracking and width clamping into a shared composable used by both panels.
---
 .changeset/web-unbounded-panel-width.md       |  2 +-
 apps/kimi-web/src/App.vue                     |  5 +-
 apps/kimi-web/src/components/ResizeHandle.vue |  2 +-
 .../src/composables/useDetailPanel.ts         | 28 ++++++++---
 apps/kimi-web/src/composables/useResizable.ts |  6 +--
 .../src/composables/useSidebarLayout.ts       | 21 +++-----
 .../src/composables/useViewportWidth.ts       | 50 +++++++++++++++++++
 7 files changed, 86 insertions(+), 28 deletions(-)
 create mode 100644 apps/kimi-web/src/composables/useViewportWidth.ts

diff --git a/.changeset/web-unbounded-panel-width.md b/.changeset/web-unbounded-panel-width.md
index 25d56ca5b4..42748324df 100644
--- a/.changeset/web-unbounded-panel-width.md
+++ b/.changeset/web-unbounded-panel-width.md
@@ -2,4 +2,4 @@
 "@moonshot-ai/kimi-code": minor
 ---
 
-Allow the web sidebar and detail panel to be resized up to the available viewport width instead of their previous fixed maximums.
+Allow the web sidebar and detail panel to be resized up to the available viewport width, keeping their resize handles reachable on narrow windows.
diff --git a/apps/kimi-web/src/App.vue b/apps/kimi-web/src/App.vue
index 39886903c9..20b170edb2 100644
--- a/apps/kimi-web/src/App.vue
+++ b/apps/kimi-web/src/App.vue
@@ -160,7 +160,9 @@ const {
   PREVIEW_WIDTH_KEY,
   PREVIEW_MIN,
   previewDefaultWidth,
+  previewMax,
   previewWidth,
+  previewPanelWidth,
   thinkingPanelText,
   thinkingVisible,
   openThinkingPanel,
@@ -526,7 +528,7 @@ function openPr(url: string): void {
       v-else
       class="app"
       :class="{ mobile: isMobile, 'sidebar-collapsed': sidebarCollapsed && !isMobile }"
-      :style="{ '--side-w': sideWidth + 'px', '--preview-w': previewWidth + 'px' }"
+      :style="{ '--side-w': sideWidth + 'px', '--preview-w': previewPanelWidth + 'px' }"
     >
     <!-- Desktop navigation: workspace rail + resizable session column. -->
     <template v-if="!isMobile">
@@ -685,6 +687,7 @@ function openPr(url: string): void {
       :storage-key="PREVIEW_WIDTH_KEY"
       :default-width="previewDefaultWidth"
       :min="PREVIEW_MIN"
+      :max="previewMax"
       reverse
       :aria-label="t('layout.resizePreviewAria')"
       @update:width="previewWidth = $event"
diff --git a/apps/kimi-web/src/components/ResizeHandle.vue b/apps/kimi-web/src/components/ResizeHandle.vue
index 4b362bb236..1c670aefc2 100644
--- a/apps/kimi-web/src/components/ResizeHandle.vue
+++ b/apps/kimi-web/src/components/ResizeHandle.vue
@@ -13,7 +13,7 @@ const props = withDefaults(
     storageKey: string;
     defaultWidth: number;
     min: number;
-    max?: number;
+    max: number;
     reverse?: boolean;
     ariaLabel?: string;
   }>(),
diff --git a/apps/kimi-web/src/composables/useDetailPanel.ts b/apps/kimi-web/src/composables/useDetailPanel.ts
index f71d3df5ea..06e08469a9 100644
--- a/apps/kimi-web/src/composables/useDetailPanel.ts
+++ b/apps/kimi-web/src/composables/useDetailPanel.ts
@@ -5,6 +5,7 @@ import { computed, ref, watch, type Ref } from 'vue';
 import type { AgentMember } from '../types';
 import type { DetailTarget } from './useFilePreview';
 import type { useKimiWebClient } from './useKimiWebClient';
+import { clampPanelWidth, panelMaxWidth, useViewportWidth } from './useViewportWidth';
 
 type KimiWebClient = ReturnType<typeof useKimiWebClient>;
 
@@ -30,22 +31,33 @@ export function useDetailPanel({
   // ---------------------------------------------------------------------------
   // Panel width helpers
   // ---------------------------------------------------------------------------
-  function previewAreaWidth(): number {
-    if (typeof window === 'undefined') return PREVIEW_MIN * 2;
-    return Math.max(0, window.innerWidth - sideWidth.value);
-  }
+  const { viewportWidth } = useViewportWidth();
+
+  // Area available to the right of the sidebar (conversation + preview).
+  const previewAreaWidth = computed(() =>
+    Math.max(0, viewportWidth.value - sideWidth.value),
+  );
+
+  // Largest preview width that still leaves the conversation pane usable.
+  const previewMax = computed(() =>
+    panelMaxWidth(previewAreaWidth.value, PREVIEW_MIN, PREVIEW_MIN),
+  );
 
   function clampPreviewWidth(width: number): number {
-    const max = Math.max(PREVIEW_MIN, previewAreaWidth() - PREVIEW_MIN);
-    return Math.min(max, Math.max(PREVIEW_MIN, Math.round(width)));
+    return clampPanelWidth(Math.round(width), PREVIEW_MIN, previewMax.value);
   }
 
   function defaultPreviewWidth(): number {
-    return clampPreviewWidth(previewAreaWidth() / 2);
+    return clampPreviewWidth(previewAreaWidth.value / 2);
   }
 
   const previewDefaultWidth = computed(() => defaultPreviewWidth());
   const previewWidth = ref(previewDefaultWidth.value);
+  // Rendered width, clamped to the current cap so a restored width or a window
+  // shrink can never push the resize handle off-screen.
+  const previewPanelWidth = computed(() =>
+    clampPanelWidth(previewWidth.value, PREVIEW_MIN, previewMax.value),
+  );
 
   // ---------------------------------------------------------------------------
   // Thinking panel
@@ -226,7 +238,9 @@ export function useDetailPanel({
     PREVIEW_WIDTH_KEY,
     PREVIEW_MIN,
     previewDefaultWidth,
+    previewMax,
     previewWidth,
+    previewPanelWidth,
     thinkingPanelText,
     thinkingVisible,
     openThinkingPanel,
diff --git a/apps/kimi-web/src/composables/useResizable.ts b/apps/kimi-web/src/composables/useResizable.ts
index 4b7675bbc7..41c9d8d60d 100644
--- a/apps/kimi-web/src/composables/useResizable.ts
+++ b/apps/kimi-web/src/composables/useResizable.ts
@@ -14,8 +14,8 @@ export interface UseResizableOptions {
   defaultWidth: number;
   /** Smallest allowed width (px). */
   min: number;
-  /** Largest allowed width (px). Omit to allow unbounded growth. */
-  max?: number;
+  /** Largest allowed width (px). */
+  max: number;
   /** True when dragging right should shrink the controlled width. */
   reverse?: boolean;
 }
@@ -57,7 +57,7 @@ export function useResizable(options: UseResizableOptions): UseResizable {
 
   function clamp(value: number): number {
     if (!Number.isFinite(value)) return defaultWidth;
-    return Math.min(max ?? Infinity, Math.max(min, Math.round(value)));
+    return Math.min(max, Math.max(min, Math.round(value)));
   }
 
   const width = ref<number>(clamp(readStored(storageKey) ?? defaultWidth));
diff --git a/apps/kimi-web/src/composables/useSidebarLayout.ts b/apps/kimi-web/src/composables/useSidebarLayout.ts
index dee20488ae..27b44a16b4 100644
--- a/apps/kimi-web/src/composables/useSidebarLayout.ts
+++ b/apps/kimi-web/src/composables/useSidebarLayout.ts
@@ -2,8 +2,9 @@
 // Layout: resizable session column. ResizeHandle owns the column width (with
 // localStorage persistence); we mirror it here to drive the App grid.
 
-import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
+import { computed, ref } from 'vue';
 import { safeGetString, safeSetString, STORAGE_KEYS } from '../lib/storage';
+import { clampPanelWidth, panelMaxWidth, useViewportWidth } from './useViewportWidth';
 
 const SIDEBAR_WIDTH_KEY = STORAGE_KEYS.sidebarWidth;
 const SIDEBAR_COLLAPSED_KEY = STORAGE_KEYS.sidebarCollapsed;
@@ -17,26 +18,19 @@ const SIDEBAR_COLLAPSED_WIDTH = 36;
 const CONVERSATION_MIN = 320;
 
 export function useSidebarLayout() {
+  const { viewportWidth } = useViewportWidth();
   const sessionColWidth = ref(SIDEBAR_DEFAULT);
   const sidebarCollapsed = ref(false);
-  const viewportWidth = ref(
-    typeof window === 'undefined' ? SIDEBAR_DEFAULT + CONVERSATION_MIN : window.innerWidth,
-  );
-
-  function updateViewportWidth(): void {
-    viewportWidth.value = window.innerWidth;
-  }
 
-  // Largest sidebar width that still leaves the conversation pane usable. Never
-  // below SIDEBAR_MIN so the sidebar itself stays intact on very narrow windows.
+  // Largest sidebar width that still leaves the conversation pane usable.
   const sidebarMax = computed(() =>
-    Math.max(SIDEBAR_MIN, viewportWidth.value - CONVERSATION_MIN),
+    panelMaxWidth(viewportWidth.value, SIDEBAR_MIN, CONVERSATION_MIN),
   );
 
   const sideWidth = computed(() =>
     sidebarCollapsed.value
       ? SIDEBAR_COLLAPSED_WIDTH
-      : Math.min(sessionColWidth.value, sidebarMax.value),
+      : clampPanelWidth(sessionColWidth.value, SIDEBAR_MIN, sidebarMax.value),
   );
 
   function loadSidebarCollapsed(): void {
@@ -60,9 +54,6 @@ export function useSidebarLayout() {
     saveSidebarCollapsed();
   }
 
-  onMounted(() => window.addEventListener('resize', updateViewportWidth));
-  onBeforeUnmount(() => window.removeEventListener('resize', updateViewportWidth));
-
   return {
     SIDEBAR_WIDTH_KEY,
     SIDEBAR_DEFAULT,
diff --git a/apps/kimi-web/src/composables/useViewportWidth.ts b/apps/kimi-web/src/composables/useViewportWidth.ts
new file mode 100644
index 0000000000..8271fd1d4b
--- /dev/null
+++ b/apps/kimi-web/src/composables/useViewportWidth.ts
@@ -0,0 +1,50 @@
+// apps/kimi-web/src/composables/useViewportWidth.ts
+// Shared reactive viewport width for the resizable layout panels. A single
+// window resize listener backs every consumer, so panels can cap themselves to
+// the current window size without each wiring up their own listener.
+
+import { onBeforeUnmount, onMounted, ref } from 'vue';
+
+const viewportWidth = ref(typeof window === 'undefined' ? 0 : window.innerWidth);
+let subscribers = 0;
+let listening = false;
+
+function update(): void {
+  viewportWidth.value = window.innerWidth;
+}
+
+function startListening(): void {
+  if (listening || typeof window === 'undefined') return;
+  window.addEventListener('resize', update);
+  listening = true;
+  update();
+}
+
+function stopListening(): void {
+  if (!listening || typeof window === 'undefined') return;
+  window.removeEventListener('resize', update);
+  listening = false;
+}
+
+/** Largest a panel may grow while keeping `reserve` px free for the rest of the
+ *  layout. Never drops below the panel's own `min`. */
+export function panelMaxWidth(available: number, min: number, reserve: number): number {
+  return Math.max(min, available - reserve);
+}
+
+/** Clamp a panel's chosen width into its allowed [min, max] range. */
+export function clampPanelWidth(width: number, min: number, max: number): number {
+  return Math.min(max, Math.max(min, width));
+}
+
+export function useViewportWidth() {
+  onMounted(() => {
+    subscribers += 1;
+    startListening();
+  });
+  onBeforeUnmount(() => {
+    subscribers = Math.max(0, subscribers - 1);
+    if (subscribers === 0) stopListening();
+  });
+  return { viewportWidth };
+}

From fa2ccb3165df7d786f0ce96bfd1e3f370130549e Mon Sep 17 00:00:00 2001
From: qer <wbxl2000@outlook.com>
Date: Tue, 23 Jun 2026 01:49:12 +0800
Subject: [PATCH 4/7] fix(web): keep resize caps reactive and reserve room for
 the preview

Make the resize handle read its max width reactively so a viewport-derived cap keeps working as the window grows after mount. Also have the sidebar reserve the preview panel's minimum width whenever the right-side panel is open, so the conversation column can never be squeezed to zero.
---
 apps/kimi-web/src/App.vue                     | 36 ++++++++++---------
 apps/kimi-web/src/components/ResizeHandle.vue |  4 ++-
 .../src/composables/useDetailPanel.ts         |  2 +-
 apps/kimi-web/src/composables/useResizable.ts |  9 ++---
 .../src/composables/useSidebarLayout.ts       | 22 ++++++++----
 5 files changed, 45 insertions(+), 28 deletions(-)

diff --git a/apps/kimi-web/src/App.vue b/apps/kimi-web/src/App.vue
index 20b170edb2..81be33ca5f 100644
--- a/apps/kimi-web/src/App.vue
+++ b/apps/kimi-web/src/App.vue
@@ -115,22 +115,6 @@ function onGlobalKeydown(e: KeyboardEvent): void {
   }
 }
 
-// ---------------------------------------------------------------------------
-// Layout: resizable session column. ResizeHandle owns the column width (with
-// localStorage persistence); we mirror it here to drive the App grid.
-// ---------------------------------------------------------------------------
-const {
-  SIDEBAR_WIDTH_KEY,
-  SIDEBAR_DEFAULT,
-  SIDEBAR_MIN,
-  sidebarMax,
-  sessionColWidth,
-  sidebarCollapsed,
-  sideWidth,
-  loadSidebarCollapsed,
-  toggleSidebarCollapse,
-} = useSidebarLayout();
-
 // ---------------------------------------------------------------------------
 // Unified right-side detail layer. Only one detail is open at a time. The
 // shared `detailTarget` ref lives here so the file-preview and detail-panel
@@ -152,6 +136,26 @@ const {
   revealPreviewFile,
 } = useFilePreview({ client, detailTarget });
 
+// True while a file preview or any detail panel claims the right-side slot, so
+// the sidebar reserves room for it and the conversation can never be squeezed.
+const previewOpen = computed(() => detailTarget.value !== null || previewTarget.value !== null);
+
+// ---------------------------------------------------------------------------
+// Layout: resizable session column. ResizeHandle owns the column width (with
+// localStorage persistence); we mirror it here to drive the App grid.
+// ---------------------------------------------------------------------------
+const {
+  SIDEBAR_WIDTH_KEY,
+  SIDEBAR_DEFAULT,
+  SIDEBAR_MIN,
+  sidebarMax,
+  sessionColWidth,
+  sidebarCollapsed,
+  sideWidth,
+  loadSidebarCollapsed,
+  toggleSidebarCollapse,
+} = useSidebarLayout({ previewOpen });
+
 // ---------------------------------------------------------------------------
 // Unified right-side detail layer (thinking / compaction / agent / diff / side
 // chat) plus the preview-panel width. Only one detail is open at a time.
diff --git a/apps/kimi-web/src/components/ResizeHandle.vue b/apps/kimi-web/src/components/ResizeHandle.vue
index 1c670aefc2..39ff4a25cd 100644
--- a/apps/kimi-web/src/components/ResizeHandle.vue
+++ b/apps/kimi-web/src/components/ResizeHandle.vue
@@ -33,7 +33,9 @@ const { width, dragging, onPointerDown } = useResizable({
   storageKey: props.storageKey,
   defaultWidth: props.defaultWidth,
   min: props.min,
-  max: props.max,
+  // Pass a getter so the cap stays reactive: a viewport-derived max can grow
+  // after the handle mounts and the next drag will use the new limit.
+  max: () => props.max,
   reverse: props.reverse,
 });
 
diff --git a/apps/kimi-web/src/composables/useDetailPanel.ts b/apps/kimi-web/src/composables/useDetailPanel.ts
index 06e08469a9..11c41fb16b 100644
--- a/apps/kimi-web/src/composables/useDetailPanel.ts
+++ b/apps/kimi-web/src/composables/useDetailPanel.ts
@@ -10,7 +10,7 @@ import { clampPanelWidth, panelMaxWidth, useViewportWidth } from './useViewportW
 type KimiWebClient = ReturnType<typeof useKimiWebClient>;
 
 const PREVIEW_WIDTH_KEY = 'kimi-web.file-preview-width';
-const PREVIEW_MIN = 320;
+export const PREVIEW_MIN = 320;
 
 export interface UseDetailPanelOptions {
   client: KimiWebClient;
diff --git a/apps/kimi-web/src/composables/useResizable.ts b/apps/kimi-web/src/composables/useResizable.ts
index 41c9d8d60d..7357bb9091 100644
--- a/apps/kimi-web/src/composables/useResizable.ts
+++ b/apps/kimi-web/src/composables/useResizable.ts
@@ -4,7 +4,7 @@
 // up pointer events (pointerdown/move/up with capture, no text-selection while
 // dragging). Used by the sidebar session column drag handle.
 
-import { onBeforeUnmount, ref, type Ref } from 'vue';
+import { onBeforeUnmount, ref, toValue, type MaybeRefOrGetter, type Ref } from 'vue';
 import { safeGetString, safeSetString } from '../lib/storage';
 
 export interface UseResizableOptions {
@@ -14,8 +14,9 @@ export interface UseResizableOptions {
   defaultWidth: number;
   /** Smallest allowed width (px). */
   min: number;
-  /** Largest allowed width (px). */
-  max: number;
+  /** Largest allowed width (px). Accepts a ref/getter so a cap derived from the
+   *  viewport keeps working as the window is resized after the handle mounts. */
+  max: MaybeRefOrGetter<number>;
   /** True when dragging right should shrink the controlled width. */
   reverse?: boolean;
 }
@@ -57,7 +58,7 @@ export function useResizable(options: UseResizableOptions): UseResizable {
 
   function clamp(value: number): number {
     if (!Number.isFinite(value)) return defaultWidth;
-    return Math.min(max, Math.max(min, Math.round(value)));
+    return Math.min(toValue(max), Math.max(min, Math.round(value)));
   }
 
   const width = ref<number>(clamp(readStored(storageKey) ?? defaultWidth));
diff --git a/apps/kimi-web/src/composables/useSidebarLayout.ts b/apps/kimi-web/src/composables/useSidebarLayout.ts
index 27b44a16b4..f568cb6a50 100644
--- a/apps/kimi-web/src/composables/useSidebarLayout.ts
+++ b/apps/kimi-web/src/composables/useSidebarLayout.ts
@@ -2,8 +2,9 @@
 // Layout: resizable session column. ResizeHandle owns the column width (with
 // localStorage persistence); we mirror it here to drive the App grid.
 
-import { computed, ref } from 'vue';
+import { computed, ref, toValue, type MaybeRefOrGetter } from 'vue';
 import { safeGetString, safeSetString, STORAGE_KEYS } from '../lib/storage';
+import { PREVIEW_MIN } from './useDetailPanel';
 import { clampPanelWidth, panelMaxWidth, useViewportWidth } from './useViewportWidth';
 
 const SIDEBAR_WIDTH_KEY = STORAGE_KEYS.sidebarWidth;
@@ -17,15 +18,24 @@ const SIDEBAR_COLLAPSED_WIDTH = 36;
 // saved on a wider display is restored on a narrower one.
 const CONVERSATION_MIN = 320;
 
-export function useSidebarLayout() {
+export interface UseSidebarLayoutOptions {
+  /** True while the right-side detail/preview panel is open, so the sidebar
+   *  reserves room for it in addition to the conversation pane. */
+  previewOpen?: MaybeRefOrGetter<boolean>;
+}
+
+export function useSidebarLayout(options: UseSidebarLayoutOptions = {}) {
   const { viewportWidth } = useViewportWidth();
   const sessionColWidth = ref(SIDEBAR_DEFAULT);
   const sidebarCollapsed = ref(false);
 
-  // Largest sidebar width that still leaves the conversation pane usable.
-  const sidebarMax = computed(() =>
-    panelMaxWidth(viewportWidth.value, SIDEBAR_MIN, CONVERSATION_MIN),
-  );
+  // Largest sidebar width that still leaves the conversation pane usable. When
+  // the right-side panel is open, also reserves its minimum width so the
+  // conversation column can never be squeezed to nothing.
+  const sidebarMax = computed(() => {
+    const reserve = CONVERSATION_MIN + (toValue(options.previewOpen) ? PREVIEW_MIN : 0);
+    return panelMaxWidth(viewportWidth.value, SIDEBAR_MIN, reserve);
+  });
 
   const sideWidth = computed(() =>
     sidebarCollapsed.value

From 455423346e1ca40b0748573a52fa070d2e5ef8d6 Mon Sep 17 00:00:00 2001
From: qer <wbxl2000@outlook.com>
Date: Tue, 23 Jun 2026 12:07:51 +0800
Subject: [PATCH 5/7] fix(web): clamp sidebar content width and ignore stale
 preview target

Render the Sidebar content at the clamped width so controls stay reachable when the saved width exceeds the viewport cap. Also stop reserving space for a hidden right panel by keying the sidebar preview-open check off detailTarget instead of the stale previewTarget.
---
 apps/kimi-web/src/App.vue | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/apps/kimi-web/src/App.vue b/apps/kimi-web/src/App.vue
index 81be33ca5f..c67f5d408a 100644
--- a/apps/kimi-web/src/App.vue
+++ b/apps/kimi-web/src/App.vue
@@ -136,9 +136,11 @@ const {
   revealPreviewFile,
 } = useFilePreview({ client, detailTarget });
 
-// True while a file preview or any detail panel claims the right-side slot, so
-// the sidebar reserves room for it and the conversation can never be squeezed.
-const previewOpen = computed(() => detailTarget.value !== null || previewTarget.value !== null);
+// True while the right-side slot is actually occupied, so the sidebar reserves
+// room for it and the conversation can never be squeezed. Keyed off detailTarget
+// (the real occupant) rather than previewTarget, which can stay set after the
+// panel is hidden.
+const previewOpen = computed(() => detailTarget.value !== null);
 
 // ---------------------------------------------------------------------------
 // Layout: resizable session column. ResizeHandle owns the column width (with
@@ -538,7 +540,7 @@ function openPr(url: string): void {
     <template v-if="!isMobile">
       <Sidebar
         v-show="!sidebarCollapsed"
-        :col-width="sessionColWidth"
+        :col-width="sideWidth"
         :active-workspace="client.visibleWorkspace.value"
         :active-workspace-id="client.activeWorkspaceId.value"
         :sessions="client.sessionsForView.value"

From f98d168be4a6037c146515afe513458f295b6ddb Mon Sep 17 00:00:00 2001
From: qer <wbxl2000@outlook.com>
Date: Tue, 23 Jun 2026 12:19:00 +0800
Subject: [PATCH 6/7] fix(web): clamp drag start to current resize cap

When the saved width exceeds the current cap (after the window narrows or a side panel opens), start the drag from the clamped width so the handle responds immediately instead of first covering an invisible delta.
---
 apps/kimi-web/src/composables/useResizable.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/apps/kimi-web/src/composables/useResizable.ts b/apps/kimi-web/src/composables/useResizable.ts
index 7357bb9091..4317ba0f91 100644
--- a/apps/kimi-web/src/composables/useResizable.ts
+++ b/apps/kimi-web/src/composables/useResizable.ts
@@ -108,7 +108,10 @@ export function useResizable(options: UseResizableOptions): UseResizable {
     event.preventDefault();
     dragging.value = true;
     startX = event.clientX;
-    startWidth = width.value;
+    // The stored width can exceed the current cap (e.g. after the window narrows
+    // or a side panel opens). Clamp the drag start so the handle responds
+    // immediately instead of first covering an invisible delta.
+    startWidth = clamp(width.value);
     activeEl = event.currentTarget as HTMLElement;
     activePointerId = event.pointerId;
     // Suppress text selection / show a resize cursor for the whole drag.

From eac41eb9ecde07d0635837d9237672334ddb1995 Mon Sep 17 00:00:00 2001
From: qer <wbxl2000@outlook.com>
Date: Tue, 23 Jun 2026 12:58:51 +0800
Subject: [PATCH 7/7] fix(web): clear detailTarget when closing side chat via
 /btw

The bare /btw close path called client.closeSideChat() directly, which hid the panel but left detailTarget set to 'btw', so the sidebar kept reserving room for a hidden right panel. Route it through the detail-layer close which clears detailTarget.
---
 apps/kimi-web/src/App.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/apps/kimi-web/src/App.vue b/apps/kimi-web/src/App.vue
index c67f5d408a..64474fc7d6 100644
--- a/apps/kimi-web/src/App.vue
+++ b/apps/kimi-web/src/App.vue
@@ -366,7 +366,9 @@ function handleCommand(cmd: string): void {
   if (cmd === '/btw' || cmd.startsWith('/btw ')) {
     const arg = cmd.slice('/btw'.length).trim();
     if (!arg && client.sideChatVisible.value) {
-      client.closeSideChat();
+      // Use the detail-layer close so detailTarget is cleared too; the bare
+      // client.closeSideChat() only hides the panel and leaves detailTarget set.
+      closeSideChat();
     } else {
       void openSideChatTab(arg || undefined);
     }