diff --git a/web/components/search.css b/web/components/search.css
--- a/web/components/search.css
+++ b/web/components/search.css
@@ -5,6 +5,7 @@
   margin: 1rem;
   border-radius: 8px;
   padding: 8px;
+  flex: 1;
 }
 
 div.searchIcon {
diff --git a/web/components/search.react.js b/web/components/search.react.js
--- a/web/components/search.react.js
+++ b/web/components/search.react.js
@@ -12,16 +12,18 @@
   +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 => {