From 2480939dfc45be8e6cc7f8d709c34a47ca5d54b3 Mon Sep 17 00:00:00 2001
From: Jinjing <6427696+AmethystLiang@users.noreply.github.com>
Date: Mon, 7 Sep 2026 11:52:45 -0700
Subject: [PATCH] Stabilize scrollbar gutter to prevent message list layout
 shift

- Add `scrollbar-gutter:stable` to prevent reflow when scrollbar appears
- Adjust scroll container padding to properly accommodate the scrollbar
- Add 5px horizontal inset to content for alignment with composer field
---
 .../src/components/native-chat/NativeChatMessageList.tsx  | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/renderer/src/components/native-chat/NativeChatMessageList.tsx b/src/renderer/src/components/native-chat/NativeChatMessageList.tsx
index 12b10e0f714..b819dd94c8e 100644
--- a/src/renderer/src/components/native-chat/NativeChatMessageList.tsx
+++ b/src/renderer/src/components/native-chat/NativeChatMessageList.tsx
@@ -342,13 +342,13 @@ export function NativeChatMessageList({
       <div
         ref={scrollRef}
         onScroll={handleScroll}
-        className="scrollbar-sleek h-full overflow-y-auto px-3 pt-10 pb-4 sm:px-4"
+        className="scrollbar-sleek h-full overflow-y-auto [scrollbar-gutter:stable] pr-3 pl-[calc(theme(spacing.3)+12px)] pt-10 pb-4 sm:pr-4 sm:pl-[calc(theme(spacing.4)+12px)]"
       >
         <div
           ref={contentRef}
-          // Why: same max width as the composer column; horizontal inset comes
-          // from the scroll container so content aligns with the composer field.
-          className="mx-auto flex w-full max-w-4xl flex-col gap-5"
+          // Why: matches composer column (max-w-4xl) with 5px horizontal inset
+          // on each side so content is slightly narrower than the input box.
+          className="mx-auto flex w-full max-w-4xl flex-col gap-5 px-[5px]"
           // Why: `zoom` scales the chat transcript's text and layout together,
           // scoped to this container so the rest of the app is untouched. It's
           // the desktop analog of the mobile pinch-zoom (Chromium/Electron only).