From 6ba91256353eee0c0c02ec18f71eabf10806e62c Mon Sep 17 00:00:00 2001
From: Bohdan Triapitsyn <artmore@protonmail.com>
Date: Tue, 8 Sep 2026 00:45:12 +0300
Subject: [PATCH] fix: prevent overlay scrollbar from shifting content

Reserves scrollbar space in overlay overlays when the thumb appears
Keeps text and layout from jumping on hover
Avoids double-reserving space for nested scrollers
---
 packages/ui/src/components/ui/ScrollableOverlay.tsx | 2 +-
 packages/ui/src/index.css                           | 7 +++++++
 2 files changed, 8 insertions(+), 1 deletion(-)

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;