Skip to content

Commit

Permalink
[Discover] Fix tabs border above the grid (elastic#167967)
Browse files Browse the repository at this point in the history
## 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>
(cherry picked from commit 6990b1a)
  • Loading branch information
jughosta committed Oct 5, 2023
1 parent b23b77b commit 3ffe7ff
Show file tree
Hide file tree
Showing 2 changed files with 7 additions and 4 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,10 @@ discover-app {
position: relative;
overflow: hidden;
height: 100%;

.euiDataGrid__controls {
border-top: none;
}
}

.dscPageContent--centered {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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;
Expand All @@ -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)}
Expand Down

0 comments on commit 3ffe7ff

Please sign in to comment.