[Discover] Fix tabs border above the grid (elastic#167967)

## Summary Since we are not merging elastic#167179 yet, I cherry-picked a fix for the issue with the tabs border above the grid which was introduced in elastic#165866 and can be backported to 8.11. Before: <img width="400" alt="Screenshot 2023-10-04 at 11 01 13" src="https://github.com/elastic/kibana/assets/1415710/68b85c1d-c1f5-4955-8a33-35d140157744"> <img width="400" alt="Screenshot 2023-10-04 at 11 01 52" src="https://github.com/elastic/kibana/assets/1415710/3a401fef-1f05-4a1e-8a4d-b84bd6f00be9"> After: <img width="400" alt="Screenshot 2023-10-04 at 11 02 55" src="https://github.com/elastic/kibana/assets/1415710/94907e5a-f9dc-476b-9c65-dc655ded8caa"> <img width="400" alt="Screenshot 2023-10-04 at 11 03 13" src="https://github.com/elastic/kibana/assets/1415710/a0bf0fa0-bffb-494f-ba20-aea9f566ac07"> --------- Co-authored-by: Michael Marcialis <michael.l.marcialis@gmail.com>
dej611 · Oct 17, 2023 · 4bb2aa7 · 4bb2aa7
1 parent a3ba0b8
commit 4bb2aa7
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 4 deletions.
diff --git a/src/plugins/discover/public/application/main/components/layout/discover_layout.scss b/src/plugins/discover/public/application/main/components/layout/discover_layout.scss
@@ -53,6 +53,10 @@ discover-app {
   position: relative;
   overflow: hidden;
   height: 100%;
+
+  .euiDataGrid__controls {
+    border-top: none;
+  }
 }
 
 .dscPageContent--centered {

diff --git a/src/plugins/discover/public/components/view_mode_toggle/view_mode_toggle.tsx b/src/plugins/discover/public/components/view_mode_toggle/view_mode_toggle.tsx
@@ -7,7 +7,7 @@
  */
 
 import React from 'react';
-import { EuiTab, EuiTabs, useEuiPaddingSize, useEuiTheme } from '@elastic/eui';
+import { EuiTab, EuiTabs, useEuiTheme } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { css } from '@emotion/react';
 import { SHOW_FIELD_STATISTICS } from '@kbn/discover-utils';
@@ -25,8 +25,7 @@ export const DocumentViewModeToggle = ({
   const { uiSettings } = useDiscoverServices();
 
   const tabsCss = css`
-    padding: 0 ${useEuiPaddingSize('s')};
-    border-bottom: ${viewMode === VIEW_MODE.AGGREGATED_LEVEL ? euiTheme.border.thin : 'none'};
+    padding: 0 ${euiTheme.size.s};
   `;
 
   const showViewModeToggle = uiSettings.get(SHOW_FIELD_STATISTICS) ?? false;
@@ -36,7 +35,7 @@ export const DocumentViewModeToggle = ({
   }
 
   return (
-    <EuiTabs size="s" css={tabsCss} data-test-subj="dscViewModeToggle" bottomBorder={false}>
+    <EuiTabs size="s" css={tabsCss} data-test-subj="dscViewModeToggle">
       <EuiTab
         isSelected={viewMode === VIEW_MODE.DOCUMENT_LEVEL}
         onClick={() => setDiscoverViewMode(VIEW_MODE.DOCUMENT_LEVEL)}