From 31817eac87815dc1cc1e2110049058b20667fd57 Mon Sep 17 00:00:00 2001
From: Zane <75694352+zanesq@users.noreply.github.com>
Date: Tue, 1 Apr 2025 08:09:31 -0700
Subject: [PATCH] Fix padding in chat ScrollArea pushing out scrollbar (#1959)

---
 ui/desktop/src/components/ChatView.tsx       |  3 ++-
 ui/desktop/src/components/ui/scroll-area.tsx | 11 ++++++++---
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/ui/desktop/src/components/ChatView.tsx b/ui/desktop/src/components/ChatView.tsx
index 012d636c..7c1a089e 100644
--- a/ui/desktop/src/components/ChatView.tsx
+++ b/ui/desktop/src/components/ChatView.tsx
@@ -387,7 +387,8 @@ export default function ChatView({
             activities={botConfig?.activities || null}
           />
         ) : (
-          <ScrollArea ref={scrollRef} className="flex-1 px-4" autoScroll>
+          /* padding needs to be passed into the container inside ScrollArea to avoid pushing the scrollbar out */
+          <ScrollArea ref={scrollRef} className="flex-1" paddingX={4} autoScroll>
             <SearchView className="mt-[16px]" scrollAreaRef={scrollRef}>
               {filteredMessages.map((message, index) => (
                 <div key={message.id || index} className="mt-[16px] message-content">
diff --git a/ui/desktop/src/components/ui/scroll-area.tsx b/ui/desktop/src/components/ui/scroll-area.tsx
index a994f8f3..0be52b56 100644
--- a/ui/desktop/src/components/ui/scroll-area.tsx
+++ b/ui/desktop/src/components/ui/scroll-area.tsx
@@ -12,10 +12,13 @@ export interface ScrollAreaHandle {
 
 interface ScrollAreaProps extends React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> {
   autoScroll?: boolean;
+  /* padding needs to be passed into the container inside ScrollArea to avoid pushing the scrollbar out */
+  paddingX?: number;
+  paddingY?: number;
 }
 
 const ScrollArea = React.forwardRef<ScrollAreaHandle, ScrollAreaProps>(
-  ({ className, children, autoScroll = false, ...props }, ref) => {
+  ({ className, children, autoScroll = false, paddingX, paddingY, ...props }, ref) => {
     const rootRef = React.useRef<React.ElementRef<typeof ScrollAreaPrimitive.Root>>(null);
     const viewportRef = React.useRef<HTMLDivElement>(null);
     const viewportEndRef = React.useRef<HTMLDivElement>(null);
@@ -104,8 +107,10 @@ const ScrollArea = React.forwardRef<ScrollAreaHandle, ScrollAreaProps>(
           ref={viewportRef}
           className="h-full w-full rounded-[inherit] [&>div]:!block"
         >
-          {children}
-          {autoScroll && <div ref={viewportEndRef} style={{ height: '1px' }} />}
+          <div className={cn(paddingX ? `px-${paddingX}` : '', paddingY ? `py-${paddingY}` : '')}>
+            {children}
+            {autoScroll && <div ref={viewportEndRef} style={{ height: '1px' }} />}
+          </div>
         </ScrollAreaPrimitive.Viewport>
         <ScrollBar />
         <ScrollAreaPrimitive.Corner />