addressing PR comments

elastic · Jan 21, 2021 · a14db14 · a14db14
1 parent 9068131
commit a14db14
Showing 1 changed file with 4 additions and 3 deletions.
diff --git a/x-pack/plugins/apm/public/components/shared/search_bar.tsx b/x-pack/plugins/apm/public/components/shared/search_bar.tsx
@@ -7,7 +7,7 @@
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import React from 'react';
 import styled from 'styled-components';
-import { px } from '../../style/variables';
+import { px, unit } from '../../style/variables';
 import { DatePicker } from './DatePicker';
 import { KueryBar } from './KueryBar';
 import { TimeComparison } from './time_comparison';
@@ -29,6 +29,7 @@ function getRowDirection(showColumn: boolean) {
 
 export function SearchBar({ prepend, showTimeComparison = false }: Props) {
   const { isMedium, isLarge } = useBreakPoints();
+  const itemsStyle = { marginBottom: isLarge ? px(unit) : 0 };
   return (
     <SearchBarFlexGroup gutterSize="s" direction={getRowDirection(isLarge)}>
       <EuiFlexItem>
@@ -41,11 +42,11 @@ export function SearchBar({ prepend, showTimeComparison = false }: Props) {
           direction={getRowDirection(isMedium)}
         >
           {showTimeComparison && (
-            <EuiFlexItem style={{ minWidth: px(300) }}>
+            <EuiFlexItem style={{ ...itemsStyle, minWidth: px(300) }}>
               <TimeComparison />
             </EuiFlexItem>
           )}
-          <EuiFlexItem>
+          <EuiFlexItem style={itemsStyle}>
             <DatePicker />
           </EuiFlexItem>
         </EuiFlexGroup>