From 877253191d3cd7498298510bdad62e7790cc5035 Mon Sep 17 00:00:00 2001
From: Andrey Goncharov <aigoncharov@meta.com>
Date: Tue, 21 Nov 2023 07:56:19 -0800
Subject: [PATCH] Support multi-line wrapping for long queries / small screens

Reviewed By: antonk52

Differential Revision: D51497340

fbshipit-source-id: 23bcc9a69c3e59e17ee9505c954c955f2a1c9e5f
---
 .../flipper-plugin/src/ui/PowerSearch/PowerSearchContainer.tsx | 3 ++-
 desktop/flipper-plugin/src/ui/PowerSearch/index.tsx            | 2 +-
 .../src/ui/data-table/DataTableWithPowerSearch.tsx             | 2 +-
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchContainer.tsx b/desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchContainer.tsx
index 3d67666bb..cb63d4c75 100644
--- a/desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchContainer.tsx
+++ b/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);
diff --git a/desktop/flipper-plugin/src/ui/PowerSearch/index.tsx b/desktop/flipper-plugin/src/ui/PowerSearch/index.tsx
index 79521d914..906b74521 100644
--- a/desktop/flipper-plugin/src/ui/PowerSearch/index.tsx
+++ b/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,
diff --git a/desktop/flipper-plugin/src/ui/data-table/DataTableWithPowerSearch.tsx b/desktop/flipper-plugin/src/ui/data-table/DataTableWithPowerSearch.tsx
index bcb55359e..03844f789 100644
--- a/desktop/flipper-plugin/src/ui/data-table/DataTableWithPowerSearch.tsx
+++ b/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}