Add an empty line for a term finder only when it is absolutely necessary

Reviewed By: mweststrate

Differential Revision: D51507094

fbshipit-source-id: cb5e18ab702f60ebbf2e5573180fd21299371139

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);

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

@@ -169,7 +169,7 @@ export const PowerSearchTerm: React.FC<PowerSearchTermProps> = ({
   }
 
   return (
-    <Space.Compact block size="small" style={{margin: theme.space.tiny / 2}}>
+    <Space.Compact size="small" style={{margin: theme.space.tiny / 2}}>
       <Button tabIndex={-1} style={{pointerEvents: 'none'}}>
         {searchTerm.field.label}
       </Button>

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

@@ -67,6 +67,7 @@ export const PowerSearchTermFinder = React.forwardRef<
           setSearchTermFinderValue(null);
         }}>
         <Input
+          size="small"
           bordered={false}
           onKeyUp={(event) => {
             if (event.key === 'Enter') {

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,7 +128,6 @@ export const PowerSearch: React.FC<PowerSearchProps> = ({
 
   return (
     <PowerSearchContainer>
-      <Space size={0} wrap>
       <SearchOutlined
         style={{
           margin: theme.space.tiny,
@@ -165,7 +163,6 @@ export const PowerSearch: React.FC<PowerSearchProps> = ({
           />
         );
       })}
-      </Space>
       <PowerSearchTermFinder
         ref={searchTermFinderRef}
         options={options}