diff --git a/web/components/search.css b/web/components/search.css
index 5b3ca8f68..40f1d355e 100644
--- a/web/components/search.css
+++ b/web/components/search.css
@@ -1,41 +1,42 @@
 div.searchContainer {
   background-color: var(--text-input-bg);
   display: flex;
   align-items: center;
   margin: 1rem;
   border-radius: 8px;
   padding: 8px;
+  flex: 1;
 }
 
 div.searchIcon {
   display: flex;
   color: var(--search-icon-color);
 }
 
 input.searchInput,
 #searchInputID {
   background-color: transparent;
   font-size: var(--m-font-16);
   line-height: 1.5;
   padding: 4px 12px;
   flex: 1;
   border: none;
   color: var(--search-input-color);
   outline: none;
 }
 
 input.searchInput::placeholder {
   color: var(--search-input-placeholder);
 }
 
 button.clearSearch {
   color: var(--search-clear-color);
   transition: ease-in-out 0.15s;
   background: var(--search-clear-bg);
   border-radius: 50%;
   padding: 6px;
 }
 
 button.clearSearchDisabled {
   opacity: 0;
 }
diff --git a/web/components/search.react.js b/web/components/search.react.js
index 317cff2f6..6428cb6a2 100644
--- a/web/components/search.react.js
+++ b/web/components/search.react.js
@@ -1,56 +1,58 @@
 // @flow
 
 import * as React from 'react';
 
 import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
 
 import ClearSearchButton from './clear-search-button.react.js';
 import css from './search.css';
 
 type Props = {
   ...React.ElementConfig<'input'>,
   +searchText: string,
   +onChangeText: (searchText: string) => mixed,
   +placeholder?: string,
+  +onClearText?: () => mixed,
 };
 
 function Search(props: Props, ref): React.Node {
-  const { searchText, onChangeText, placeholder, ...rest } = props;
+  const { searchText, onChangeText, placeholder, onClearText, ...rest } = props;
 
   const showClearButton = !!searchText;
 
   const onClear = React.useCallback(() => {
     onChangeText('');
-  }, [onChangeText]);
+    onClearText?.();
+  }, [onChangeText, onClearText]);
 
   const onChange = React.useCallback(
     event => {
       onChangeText(event.target.value);
     },
     [onChangeText],
   );
 
   return (
     <div className={css.searchContainer}>
       <div className={css.searchIcon}>
         <SWMansionIcon size={24} icon="search" />
       </div>
       <input
         {...rest}
         id={css.searchInputID}
         className={css.searchInput}
         onChange={onChange}
         value={searchText}
         type="text"
         placeholder={placeholder}
         ref={ref}
       />
       <ClearSearchButton onClick={onClear} active={showClearButton} />
     </div>
   );
 }
 
 const ForwardedSearch: React.AbstractComponent<Props, HTMLInputElement> =
   React.forwardRef<Props, HTMLInputElement>(Search);
 
 export default ForwardedSearch;