diff --git a/packages/ui/src/components/ui/ScrollableOverlay.tsx b/packages/ui/src/components/ui/ScrollableOverlay.tsx
index befb1e68..e273ad89 100644
--- a/packages/ui/src/components/ui/ScrollableOverlay.tsx
+++ b/packages/ui/src/components/ui/ScrollableOverlay.tsx
@@ -53,7 +53,7 @@ export const ScrollableOverlay = React.forwardRef<HTMLElement, ScrollableOverlay
     return (
       <div
         className={cn(
-          "relative flex flex-col min-h-0 w-full overflow-hidden",
+          "overlay-scrollbar-wrapper relative flex flex-col min-h-0 w-full overflow-hidden",
           preventOverscroll && "overscroll-none",
           outerClassName
         )}
diff --git a/packages/ui/src/index.css b/packages/ui/src/index.css
index f9a0b123..51fc8ba2 100644
--- a/packages/ui/src/index.css
+++ b/packages/ui/src/index.css
@@ -655,6 +655,13 @@ html:not(.dark) .chat-scroll {
 }
 
 /* Overlay scrollbar styling (custom thumb) */
+/* Reserve the thumb's 6px width, 4px right inset and a 4px content gap.
+   Follow overflow, not hover visibility, so showing the thumb never shifts text.
+   Direct-child matching prevents nested scrollers from reserving space twice. */
+.overlay-scrollbar-wrapper:has(> .overlay-scrollbar > .overlay-scrollbar__thumb--vertical:not([hidden])) {
+  padding-right: 6px;
+}
+
 .overlay-scrollbar {
   position: absolute;
   inset: 0;