From db6da4aecc949326411cbff28de81232c038622f Mon Sep 17 00:00:00 2001
From: xintaofei <itpkcn@gmail.com>
Date: Sun, 12 Apr 2026 19:20:45 +0800
Subject: [PATCH] fix(frontend): remove scrollbar-gutter and restore padding
 for scroll containers

Drop `scrollbar-gutter: stable both-edges` / `stable` from `.scrollbar-thin`
and `.scrollbar-thin-edge` so scrollbars overlay content without reserving
space, fixing layout inconsistencies between overlay and classic scrollbar
environments. Restore padding that was previously reduced to compensate for the
gutter: `px-1` to `px-3` in git-log-tab, `px-2` to `px-4` in
virtualized-message-thread, and add `px-2` to sidebar-conversation-list and
session-files-tab.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/app/globals.css                                  | 12 ++----------
 .../conversations/sidebar-conversation-list.tsx      |  2 +-
 src/components/layout/aux-panel-git-log-tab.tsx      |  8 ++++----
 .../layout/aux-panel-session-files-tab.tsx           |  2 +-
 .../message/virtualized-message-thread.tsx           |  2 +-
 5 files changed, 9 insertions(+), 17 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 42f23d8..a1276cb 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1003,19 +1003,11 @@
 }
 
 /* Unified scrollbar style for scrollable containers.
-   Matches StickToBottom's internal scrollbar-gutter so all scroll areas
-   behave the same: symmetric gutter, no layout shift. */
-.scrollbar-thin {
-  scrollbar-width: thin;
-  scrollbar-color: var(--border) transparent;
-  scrollbar-gutter: stable both-edges;
-}
-
-/* Single-edge variant: only reserves space on the scrollbar side */
+   Thin overlay scrollbar — no gutter reserved, no layout shift. */
+.scrollbar-thin,
 .scrollbar-thin-edge {
   scrollbar-width: thin;
   scrollbar-color: var(--border) transparent;
-  scrollbar-gutter: stable;
 }
 
 /* Streamdown code blocks: dark mode via shiki dual-theme CSS variables */
diff --git a/src/components/conversations/sidebar-conversation-list.tsx b/src/components/conversations/sidebar-conversation-list.tsx
index 5d94881..89c27bf 100644
--- a/src/components/conversations/sidebar-conversation-list.tsx
+++ b/src/components/conversations/sidebar-conversation-list.tsx
@@ -482,7 +482,7 @@ export function SidebarConversationList({
             <div
               ref={scrollContainerRef}
               className={cn(
-                "flex-1 min-h-0 overflow-y-auto scrollbar-thin",
+                "flex-1 min-h-0 overflow-y-auto scrollbar-thin px-2",
                 "[overflow-anchor:none]"
               )}
             >
diff --git a/src/components/layout/aux-panel-git-log-tab.tsx b/src/components/layout/aux-panel-git-log-tab.tsx
index a1ade89..353d636 100644
--- a/src/components/layout/aux-panel-git-log-tab.tsx
+++ b/src/components/layout/aux-panel-git-log-tab.tsx
@@ -903,7 +903,7 @@ export function GitLogTab() {
 
   if (loading) {
     return (
-      <div className="flex flex-col h-full overflow-y-auto scrollbar-thin px-1 py-3">
+      <div className="flex flex-col h-full overflow-y-auto scrollbar-thin px-3 py-3">
         {hasBranches && (
           <BranchSelector
             branchList={branchList}
@@ -929,7 +929,7 @@ export function GitLogTab() {
 
   if (error) {
     return (
-      <div className="flex flex-col h-full overflow-y-auto scrollbar-thin px-1 py-3">
+      <div className="flex flex-col h-full overflow-y-auto scrollbar-thin px-3 py-3">
         {hasBranches && (
           <BranchSelector
             branchList={branchList}
@@ -959,7 +959,7 @@ export function GitLogTab() {
 
   if (entries.length === 0) {
     return (
-      <div className="flex flex-col h-full overflow-y-auto scrollbar-thin px-1 py-3">
+      <div className="flex flex-col h-full overflow-y-auto scrollbar-thin px-3 py-3">
         {hasBranches && (
           <BranchSelector
             branchList={branchList}
@@ -985,7 +985,7 @@ export function GitLogTab() {
         <ContextMenuTrigger asChild>
           <div
             onScroll={handleScroll}
-            className="flex-1 min-h-0 overflow-y-auto scrollbar-thin px-1 py-3 space-y-3"
+            className="flex-1 min-h-0 overflow-y-auto scrollbar-thin px-3 py-3 space-y-3"
           >
             {hasBranches && (
               <div
diff --git a/src/components/layout/aux-panel-session-files-tab.tsx b/src/components/layout/aux-panel-session-files-tab.tsx
index 90d4791..fee555c 100644
--- a/src/components/layout/aux-panel-session-files-tab.tsx
+++ b/src/components/layout/aux-panel-session-files-tab.tsx
@@ -290,7 +290,7 @@ export function SessionFilesTab() {
 
   return (
     <div className="flex flex-col h-full">
-      <div className="flex-1 min-h-0 overflow-y-auto scrollbar-thin">
+      <div className="flex-1 min-h-0 overflow-y-auto scrollbar-thin px-2">
         <SessionFilesContent conversationId={conversationId} />
       </div>
     </div>
diff --git a/src/components/message/virtualized-message-thread.tsx b/src/components/message/virtualized-message-thread.tsx
index 030a9e0..224b86e 100644
--- a/src/components/message/virtualized-message-thread.tsx
+++ b/src/components/message/virtualized-message-thread.tsx
@@ -88,7 +88,7 @@ export function VirtualizedMessageThread<T>({
               key={getItemKey(item, index)}
               style={itemStyle(index, items.length)}
             >
-              <div className={cn("mx-auto max-w-3xl px-2", className)}>
+              <div className={cn("mx-auto max-w-3xl px-4", className)}>
                 {renderItem(item, index)}
               </div>
             </div>