diff --git a/web/chat/chat-thread-composer.css b/web/chat/chat-thread-composer.css
--- a/web/chat/chat-thread-composer.css
+++ b/web/chat/chat-thread-composer.css
@@ -32,6 +32,7 @@
 
 div.searchField {
   flex-grow: 1;
+  padding: 1rem;
 }
 
 .closeSearch {
diff --git a/web/chat/chat-thread-list-search.react.js b/web/chat/chat-thread-list-search.react.js
--- a/web/chat/chat-thread-list-search.react.js
+++ b/web/chat/chat-thread-list-search.react.js
@@ -3,6 +3,7 @@
 import invariant from 'invariant';
 import * as React from 'react';
 
+import css from './chat-thread-list.css';
 import { ThreadListContext } from './thread-list-provider.js';
 import Search from '../components/search.react.js';
 
@@ -16,11 +17,13 @@
 
   return React.useMemo(
     () => (
-      <Search
-        onChangeText={setSearchText}
-        searchText={searchText}
-        placeholder="Search chats"
-      />
+      <div className={css.searchBarContainer}>
+        <Search
+          onChangeText={setSearchText}
+          searchText={searchText}
+          placeholder="Search chats"
+        />
+      </div>
     ),
     [searchText, setSearchText],
   );
diff --git a/web/chat/chat-thread-list.css b/web/chat/chat-thread-list.css
--- a/web/chat/chat-thread-list.css
+++ b/web/chat/chat-thread-list.css
@@ -291,3 +291,7 @@
   left: 28px;
   top: -10px;
 }
+
+.searchBarContainer {
+  padding: 1rem;
+}
diff --git a/web/components/search.css b/web/components/search.css
--- a/web/components/search.css
+++ b/web/components/search.css
@@ -2,7 +2,6 @@
   background-color: var(--inputField-background-secondary-default);
   display: flex;
   align-items: center;
-  margin: 1rem;
   border-radius: 8px;
   padding: 8px;
   flex: 1;
diff --git a/web/modals/search/message-search-modal.css b/web/modals/search/message-search-modal.css
--- a/web/modals/search/message-search-modal.css
+++ b/web/modals/search/message-search-modal.css
@@ -38,3 +38,8 @@
 .button {
   margin: 10px 10px 10px 0;
 }
+
+.searchBarContainer {
+  padding: 1rem;
+  flex-grow: 1;
+}
diff --git a/web/modals/search/message-search-modal.react.js b/web/modals/search/message-search-modal.react.js
--- a/web/modals/search/message-search-modal.react.js
+++ b/web/modals/search/message-search-modal.react.js
@@ -132,13 +132,15 @@
     <Modal name="Search messages" onClose={popModal} size="large">
       <div className={css.container}>
         <div className={css.header}>
-          <Search
-            onChangeText={setInput}
-            searchText={input}
-            placeholder={searchPlaceholder}
-            onClearText={clearQueryWrapper}
-            onKeyDown={onKeyDown}
-          />
+          <div className={css.searchBarContainer}>
+            <Search
+              onChangeText={setInput}
+              searchText={input}
+              placeholder={searchPlaceholder}
+              onClearText={clearQueryWrapper}
+              onKeyDown={onKeyDown}
+            />
+          </div>
           <Button
             onClick={onPressSearch}
             variant="filled"