diff --git a/desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchContainer.tsx b/desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchContainer.tsx index 42f0528fe..ce1a1b45b 100644 --- a/desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchContainer.tsx +++ b/desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchContainer.tsx @@ -17,6 +17,7 @@ const containerStyle = css` display: flex; flex-direction: row; flex-wrap: wrap; + align-items: baseline; 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/PowerSearchTerm.tsx b/desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchTerm.tsx index 34561c0c0..3268ca107 100644 --- a/desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchTerm.tsx +++ b/desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchTerm.tsx @@ -169,7 +169,7 @@ export const PowerSearchTerm: React.FC = ({ } return ( - + diff --git a/desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchTermFinder.tsx b/desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchTermFinder.tsx index 208e80fbc..8c3e0ad15 100644 --- a/desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchTermFinder.tsx +++ b/desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchTermFinder.tsx @@ -67,6 +67,7 @@ export const PowerSearchTermFinder = React.forwardRef< setSearchTermFinderValue(null); }}> { if (event.key === 'Enter') { diff --git a/desktop/flipper-plugin/src/ui/PowerSearch/index.tsx b/desktop/flipper-plugin/src/ui/PowerSearch/index.tsx index 525660fc5..052c8a58d 100644 --- a/desktop/flipper-plugin/src/ui/PowerSearch/index.tsx +++ b/desktop/flipper-plugin/src/ui/PowerSearch/index.tsx @@ -8,7 +8,6 @@ */ import * as React from 'react'; -import {Space} from 'antd'; import { PowerSearchConfig, FieldConfig, @@ -129,43 +128,41 @@ export const PowerSearch: React.FC = ({ return ( - - - {searchExpression.map((searchTerm, i) => { - return ( - { - setSearchExpression((prevSearchExpression) => { - if (prevSearchExpression[i]) { - return [ - ...prevSearchExpression.slice(0, i), - ...prevSearchExpression.slice(i + 1), - ]; - } - return prevSearchExpression; - }); - }} - onFinalize={(finalSearchTerm) => { - setSearchExpression((prevSearchExpression) => { + + {searchExpression.map((searchTerm, i) => { + return ( + { + setSearchExpression((prevSearchExpression) => { + if (prevSearchExpression[i]) { return [ ...prevSearchExpression.slice(0, i), - finalSearchTerm, ...prevSearchExpression.slice(i + 1), ]; - }); - searchTermFinderRef.current?.focus(); - }} - /> - ); - })} - + } + return prevSearchExpression; + }); + }} + onFinalize={(finalSearchTerm) => { + setSearchExpression((prevSearchExpression) => { + return [ + ...prevSearchExpression.slice(0, i), + finalSearchTerm, + ...prevSearchExpression.slice(i + 1), + ]; + }); + searchTermFinderRef.current?.focus(); + }} + /> + ); + })}