From d6af74431c22ff837e018b71f47619f4d4c2480d Mon Sep 17 00:00:00 2001 From: Julia Rechkunova Date: Fri, 17 May 2024 16:09:09 +0200 Subject: [PATCH] [Discover][DocViewer] Adjust bottom margin in flyout (#183478) ## Summary This PR updates the bottom margin so the JSON view can be scrolled properly inside DocViewer flyout. It's a follow up for https://github.com/elastic/kibana/pull/183468 (fixes the scrolling to be limited to flyout height) and https://github.com/elastic/kibana/pull/166406 (taller footer was added with Close button in it). --- .../public/components/doc_viewer_source/get_height.test.tsx | 3 ++- .../public/components/doc_viewer_source/source.tsx | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/plugins/unified_doc_viewer/public/components/doc_viewer_source/get_height.test.tsx b/src/plugins/unified_doc_viewer/public/components/doc_viewer_source/get_height.test.tsx index 6c6ae2852e053..e28df4d89d5bc 100644 --- a/src/plugins/unified_doc_viewer/public/components/doc_viewer_source/get_height.test.tsx +++ b/src/plugins/unified_doc_viewer/public/components/doc_viewer_source/get_height.test.tsx @@ -8,6 +8,7 @@ import { monaco } from '@kbn/monaco'; import { getHeight } from './get_height'; +import { MARGIN_BOTTOM } from './source'; describe('getHeight', () => { Object.defineProperty(window, 'innerHeight', { writable: true, configurable: true, value: 500 }); @@ -32,7 +33,7 @@ describe('getHeight', () => { const monacoMock = getMonacoMock(500, 0); const height = getHeight(monacoMock, true); - expect(height).toBe(475); + expect(height).toBe(500 - MARGIN_BOTTOM); }); test('when using document explorer, returning the available height in the flyout has a minimun guarenteed height', () => { diff --git a/src/plugins/unified_doc_viewer/public/components/doc_viewer_source/source.tsx b/src/plugins/unified_doc_viewer/public/components/doc_viewer_source/source.tsx index 13f2ee065f504..740afc99a9c62 100644 --- a/src/plugins/unified_doc_viewer/public/components/doc_viewer_source/source.tsx +++ b/src/plugins/unified_doc_viewer/public/components/doc_viewer_source/source.tsx @@ -36,7 +36,7 @@ interface SourceViewerProps { // inline limitation was necessary to enable virtualized scrolling, which improves performance export const MAX_LINES_CLASSIC_TABLE = 500; // Displayed margin of the code editor to the window bottom when rendered in the document explorer flyout -export const MARGIN_BOTTOM = 25; +export const MARGIN_BOTTOM = 80; // DocViewer flyout has a footer // Minimum height for the source content to guarantee minimum space when the flyout is scrollable. export const MIN_HEIGHT = 400;