diff --git a/web/chat/thread-top-bar.css b/web/chat/thread-top-bar.css
index c20ccc090..144f9cc8e 100644
--- a/web/chat/thread-top-bar.css
+++ b/web/chat/thread-top-bar.css
@@ -1,60 +1,60 @@
 div.topBarContainer {
   display: flex;
   background-color: var(--bg);
   align-items: center;
   justify-content: space-between;
   padding: 16px;
   color: var(--thread-top-bar-color);
   border-bottom: 1px solid var(--border);
 }
 
 div.topBarThreadInfo {
   height: 24px;
   display: flex;
   align-items: center;
   column-gap: 8px;
   overflow: hidden;
 }
 
 .threadTitle {
   font-size: var(--m-font-16);
   font-weight: var(--bold);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
 .pinnedCountBanner {
   background-color: var(--pinned-count-banner-color);
   height: 40px;
   text-align: center;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
 a.pinnedCountText {
   color: var(--pinned-count-text-color);
   font-size: var(--xs-font-12);
   display: inline-flex;
   align-items: center;
 }
 
 a.pinnedCountText:hover {
   cursor: pointer;
   text-decoration: underline;
 }
 
 .chevronRight {
   vertical-align: middle;
 }
 
-.searchButton {
+.searchButtonIcon {
   color: var(--thread-top-bar-search-button-color);
-  margin-right: 30px;
 }
 
 .buttons {
   flex-direction: row;
   display: flex;
+  gap: 30px;
 }
diff --git a/web/chat/thread-top-bar.react.js b/web/chat/thread-top-bar.react.js
index d0f97c9ec..60bd08e19 100644
--- a/web/chat/thread-top-bar.react.js
+++ b/web/chat/thread-top-bar.react.js
@@ -1,104 +1,104 @@
 // @flow
 
 import * as React from 'react';
 import { ChevronRight } from 'react-feather';
 
 import { useModalContext } from 'lib/components/modal-provider.react.js';
 import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
 import { threadIsPending } from 'lib/shared/thread-utils.js';
 import type { ThreadInfo } from 'lib/types/thread-types.js';
 import { useResolvedThreadInfo } from 'lib/utils/entity-helpers.js';
 
 import ThreadMenu from './thread-menu.react.js';
 import css from './thread-top-bar.css';
 import ThreadAvatar from '../avatars/thread-avatar.react.js';
 import Button from '../components/button.react.js';
 import { InputStateContext } from '../input/input-state.js';
 import MessageResultsModal from '../modals/chat/message-results-modal.react.js';
 import MessageSearchModal from '../modals/search/message-search-modal.react.js';
 
 type ThreadTopBarProps = {
   +threadInfo: ThreadInfo,
 };
 function ThreadTopBar(props: ThreadTopBarProps): React.Node {
   const { threadInfo } = props;
   const { pushModal } = useModalContext();
 
   let threadMenu = null;
   if (!threadIsPending(threadInfo.id)) {
     threadMenu = <ThreadMenu threadInfo={threadInfo} />;
   }
 
   // To allow the pinned messages modal to be re-used by the message search
   // modal, it will be useful to make the modal accept a prop that defines it's
   // name, instead of setting it directly in the modal.
   const bannerText = React.useMemo(() => {
     if (!threadInfo.pinnedCount || threadInfo.pinnedCount === 0) {
       return '';
     }
 
     const messageNoun = threadInfo.pinnedCount === 1 ? 'message' : 'messages';
 
     return `${threadInfo.pinnedCount} pinned ${messageNoun}`;
   }, [threadInfo.pinnedCount]);
 
   const inputState = React.useContext(InputStateContext);
   const pushThreadPinsModal = React.useCallback(() => {
     pushModal(
       <InputStateContext.Provider value={inputState}>
         <MessageResultsModal threadInfo={threadInfo} modalName={bannerText} />
       </InputStateContext.Provider>,
     );
   }, [pushModal, inputState, threadInfo, bannerText]);
 
   const pinnedCountBanner = React.useMemo(() => {
     if (!bannerText) {
       return null;
     }
 
     return (
       <div className={css.pinnedCountBanner}>
         <a className={css.pinnedCountText} onClick={pushThreadPinsModal}>
           {bannerText}
           <ChevronRight size={14} className={css.chevronRight} />
         </a>
       </div>
     );
   }, [bannerText, pushThreadPinsModal]);
 
   const onClickSearch = React.useCallback(
     () =>
       pushModal(
         <InputStateContext.Provider value={inputState}>
           <MessageSearchModal threadInfo={threadInfo} />
         </InputStateContext.Provider>,
       ),
     [inputState, pushModal, threadInfo],
   );
 
   const { uiName } = useResolvedThreadInfo(threadInfo);
 
   return (
     <>
       <div className={css.topBarContainer}>
         <div className={css.topBarThreadInfo}>
           <ThreadAvatar size="small" threadInfo={threadInfo} />
           <div className={css.threadTitle}>{uiName}</div>
         </div>
         <div className={css.buttons}>
           <Button className={css.button} onClick={onClickSearch}>
             <SWMansionIcon
               size={24}
               icon="search"
-              className={css.searchButton}
+              className={css.searchButtonIcon}
             />
           </Button>
           {threadMenu}
         </div>
       </div>
       {pinnedCountBanner}
     </>
   );
 }
 
 export default ThreadTopBar;