From cb5c471e7b927522b0853c476d12c6e71a6f987d Mon Sep 17 00:00:00 2001
From: Ricky Ang <rickyangwyn@gmail.com>
Date: Mon, 28 Mar 2022 14:03:35 -0700
Subject: [PATCH] PR Comments + Search bar UI bug fix

---
 .../components/detail_panel_list_item/styles.ts  |  1 -
 .../components/session_view_search_bar/index.tsx |  8 ++++----
 .../components/session_view_search_bar/styles.ts | 16 ++++++++++++++--
 3 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/x-pack/plugins/session_view/public/components/detail_panel_list_item/styles.ts b/x-pack/plugins/session_view/public/components/detail_panel_list_item/styles.ts
index 3fb83579901c24..e2ee0fbe4b416c 100644
--- a/x-pack/plugins/session_view/public/components/detail_panel_list_item/styles.ts
+++ b/x-pack/plugins/session_view/public/components/detail_panel_list_item/styles.ts
@@ -22,7 +22,6 @@ export const useStyles = ({ display }: StylesDeps) => {
       alignItems: 'center',
       padding: `0px ${euiTheme.size.s} `,
       width: '100%',
-      fontSize: '14px',
       fontWeight: 'inherit',
       height: '32px',
       lineHeight: euiTheme.size.l,
diff --git a/x-pack/plugins/session_view/public/components/session_view_search_bar/index.tsx b/x-pack/plugins/session_view/public/components/session_view_search_bar/index.tsx
index 0c40659f56c721..05154fca40769b 100644
--- a/x-pack/plugins/session_view/public/components/session_view_search_bar/index.tsx
+++ b/x-pack/plugins/session_view/public/components/session_view_search_bar/index.tsx
@@ -33,7 +33,9 @@ export const SessionViewSearchBar = ({
   onProcessSelected,
   searchResults,
 }: SessionViewSearchBarDeps) => {
-  const styles = useStyles();
+  const showPagination = !!searchResults?.length;
+
+  const styles = useStyles({ hasSearchResults: showPagination });
 
   const [selectedResult, setSelectedResult] = useState(0);
 
@@ -57,10 +59,8 @@ export const SessionViewSearchBar = ({
     }
   }, [searchResults, onProcessSelected, selectedResult]);
 
-  const showPagination = !!searchResults?.length;
-
   return (
-    <div data-test-subj="sessionView:searchInput" css={{ position: 'relative' }}>
+    <div data-test-subj="sessionView:searchInput" css={styles.searchBarWithResult}>
       <EuiSearchBar query={searchQuery} onChange={onSearch} box={translatePlaceholder} />
       {showPagination && (
         <EuiPagination
diff --git a/x-pack/plugins/session_view/public/components/session_view_search_bar/styles.ts b/x-pack/plugins/session_view/public/components/session_view_search_bar/styles.ts
index 97a49ca2aa8c1d..1c4d1b8312b1aa 100644
--- a/x-pack/plugins/session_view/public/components/session_view_search_bar/styles.ts
+++ b/x-pack/plugins/session_view/public/components/session_view_search_bar/styles.ts
@@ -9,7 +9,11 @@ import { useMemo } from 'react';
 import { useEuiTheme } from '@elastic/eui';
 import { CSSObject } from '@emotion/react';
 
-export const useStyles = () => {
+interface StylesDeps {
+  hasSearchResults: boolean;
+}
+
+export const useStyles = ({ hasSearchResults }: StylesDeps) => {
   const { euiTheme } = useEuiTheme();
 
   const cached = useMemo(() => {
@@ -19,10 +23,18 @@ export const useStyles = () => {
       right: euiTheme.size.xxl,
     };
 
+    const searchBarWithResult: CSSObject = {
+      position: 'relative',
+      'input.euiFieldSearch.euiFieldSearch-isClearable': {
+        paddingRight: hasSearchResults ? '200px' : '40px',
+      },
+    };
+
     return {
       pagination,
+      searchBarWithResult,
     };
-  }, [euiTheme]);
+  }, [euiTheme, hasSearchResults]);
 
   return cached;
 };