PR Comments + Search bar UI bug fix

elastic · Mar 28, 2022 · cb5c471 · cb5c471
1 parent ab4a89b
commit cb5c471
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 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
@@ -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
@@ -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
@@ -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;
 };