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

@@ -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
         )}

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;