Support multi-line wrapping for long queries / small screens

Reviewed By: antonk52

Differential Revision: D51497340

fbshipit-source-id: 23bcc9a69c3e59e17ee9505c954c955f2a1c9e5f

desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchContainer.tsx

@@ -12,10 +12,11 @@ import {css} from '@emotion/css';
 import {theme} from '../theme';
 
 const containerStyle = css`
-  flex: 1 0 auto;
+  flex: 1 1 auto;
   background-color: ${theme.backgroundDefault};
   display: flex;
   flex-direction: row;
+  flex-wrap: wrap;
   border-radius: ${theme.borderRadius};
   border: 1px solid ${theme.borderColor};
   transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);

desktop/flipper-plugin/src/ui/PowerSearch/index.tsx

@@ -129,7 +129,7 @@ export const PowerSearch: React.FC<PowerSearchProps> = ({
 
   return (
     <PowerSearchContainer>
-      <Space size={[theme.space.tiny, 0]}>
+      <Space size={[theme.space.tiny, 0]} wrap>
         <SearchOutlined
           style={{
             marginLeft: theme.space.tiny,

desktop/flipper-plugin/src/ui/data-table/DataTableWithPowerSearch.tsx

@@ -891,7 +891,7 @@ export function DataTable<T extends object>(
     <Layout.Container>
       {props.actionsTop ? <Searchbar gap>{props.actionsTop}</Searchbar> : null}
       {props.enableSearchbar && (
-        <Searchbar gap>
+        <Searchbar grow shrink gap>
           <PowerSearch
             config={powerSearchConfig}
             searchExpression={searchExpression}