From 3e3cf61dcf617c4652ba6cbebb3740aee29a1980 Mon Sep 17 00:00:00 2001
From: Nahiyan Khan <nahiyan.khan@gmail.com>
Date: Tue, 1 Apr 2025 13:25:05 -0400
Subject: [PATCH] fix scrollbar under search - alt take (#1964)

Co-authored-by: Zane Staggs <zane@squareup.com>
---
 ui/desktop/src/components/ChatView.tsx                | 7 +++----
 ui/desktop/src/components/conversation/SearchBar.tsx  | 2 +-
 ui/desktop/src/components/conversation/SearchView.tsx | 6 +-----
 3 files changed, 5 insertions(+), 10 deletions(-)

diff --git a/ui/desktop/src/components/ChatView.tsx b/ui/desktop/src/components/ChatView.tsx
index 7c1a089e..9973dee6 100644
--- a/ui/desktop/src/components/ChatView.tsx
+++ b/ui/desktop/src/components/ChatView.tsx
@@ -387,11 +387,10 @@ export default function ChatView({
             activities={botConfig?.activities || null}
           />
         ) : (
-          /* 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}>
+          <ScrollArea ref={scrollRef} className="flex-1" autoScroll>
+            <SearchView scrollAreaRef={scrollRef}>
               {filteredMessages.map((message, index) => (
-                <div key={message.id || index} className="mt-[16px] message-content">
+                <div key={message.id || index} className="mt-4 px-4">
                   {isUserMessage(message) ? (
                     <UserMessage message={message} />
                   ) : (
diff --git a/ui/desktop/src/components/conversation/SearchBar.tsx b/ui/desktop/src/components/conversation/SearchBar.tsx
index 81b8129a..a52a05e5 100644
--- a/ui/desktop/src/components/conversation/SearchBar.tsx
+++ b/ui/desktop/src/components/conversation/SearchBar.tsx
@@ -82,7 +82,7 @@ export const SearchBar: React.FC<SearchBarProps> = ({
 
   return (
     <div
-      className={`fixed top-[36px] left-0 right-0 bg-bgAppInverse text-textProminentInverse z-50 ${
+      className={`sticky top-0 bg-bgAppInverse text-textProminentInverse z-50 ${
         isExiting ? 'search-bar-exit' : 'search-bar-enter'
       }`}
     >
diff --git a/ui/desktop/src/components/conversation/SearchView.tsx b/ui/desktop/src/components/conversation/SearchView.tsx
index 221bff51..16ddc37b 100644
--- a/ui/desktop/src/components/conversation/SearchView.tsx
+++ b/ui/desktop/src/components/conversation/SearchView.tsx
@@ -146,11 +146,7 @@ export const SearchView: React.FC<PropsWithChildren<SearchViewProps>> = ({
           searchResults={searchResults}
         />
       )}
-      <div
-        className={`transition-transform ${isSearchVisible ? 'translate-y-[52px] pb-[52px]' : 'translate-y-0'}`}
-      >
-        {children}
-      </div>
+      {children}
     </div>
   );
 };