Add vertical spacing in multiline mode

Reviewed By: mweststrate

Differential Revision: D51505906

fbshipit-source-id: 6cbf94173d404077de1f8d7c764d91799e25404c

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

@@ -20,7 +20,7 @@ const containerStyle = css`
   border-radius: ${theme.borderRadius};
   border: 1px solid ${theme.borderColor};
   transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
-  padding: 0 ${theme.space.tiny}px;
+  padding: ${theme.space.tiny / 2}px;
 
   &:focus-within,
   &:hover {

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

@@ -10,6 +10,7 @@
 import {CloseOutlined} from '@ant-design/icons';
 import {Button, Space} from 'antd';
 import * as React from 'react';
+import {theme} from '../theme';
 import {PowerSearchAbsoluteDateTerm} from './PowerSearchAbsoluteDateTerm';
 import {OperatorConfig} from './PowerSearchConfig';
 import {PowerSearchEnumSetTerm} from './PowerSearchEnumSetTerm';
@@ -168,7 +169,7 @@ export const PowerSearchTerm: React.FC<PowerSearchTermProps> = ({
   }
 
   return (
-    <Space.Compact block size="small">
+    <Space.Compact block size="small" style={{margin: theme.space.tiny / 2}}>
       <Button tabIndex={-1} style={{pointerEvents: 'none'}}>
         {searchTerm.field.label}
       </Button>

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

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