fix scrollbar under search - alt take (#1964)

Co-authored-by: Zane Staggs <zane@squareup.com>

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} />
                   ) : (

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'
       }`}
     >

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