From 3ffe7ffea0fd155235a10230a570a23d3b2284f1 Mon Sep 17 00:00:00 2001
From: Julia Rechkunova <julia.rechkunova@elastic.co>
Date: Thu, 5 Oct 2023 11:49:37 +0200
Subject: [PATCH] [Discover] Fix tabs border above the grid (#167967)

## Summary

Since we are not merging https://github.com/elastic/kibana/pull/167179
yet, I cherry-picked a fix for the issue with the tabs border above the
grid which was introduced in
https://github.com/elastic/kibana/pull/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>
(cherry picked from commit 6990b1a38c9b264d8c251a2cce83697a060600fa)
---
 .../main/components/layout/discover_layout.scss            | 4 ++++
 .../components/view_mode_toggle/view_mode_toggle.tsx       | 7 +++----
 2 files changed, 7 insertions(+), 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
index 88da97d6f5333..d3978fe1c1d82 100644
--- 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
index b5674b6833ada..63fcbcc40db37 100644
--- 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)}