diff --git a/src/plugins/discover/public/components/discover_grid/discover_grid.scss b/src/plugins/discover/public/components/discover_grid/discover_grid.scss
index a80f2cd6b5534..4de2d9e8dadee 100644
--- a/src/plugins/discover/public/components/discover_grid/discover_grid.scss
+++ b/src/plugins/discover/public/components/discover_grid/discover_grid.scss
@@ -40,6 +40,30 @@
 }
 
 .dscDiscoverGrid__cellPopover {
+  min-height: 140px;
+  max-width: 900px !important;
+
+  &.dscDiscoverGrid__cellPopover--withJson {
+    resize: horizontal;
+    min-width: 516px;
+    width: 516px;
+  }
+
+  &:not(.dscDiscoverGrid__cellPopover--withJson) {
+    resize: both;
+    min-width: 300px;
+    width: 400px;
+    max-height: 390px !important;
+  }
+
+  & > div {
+    height: 100%;
+  }
+}
+
+.dscDiscoverGrid__cellPopoverValueContainer {
+  height: 100%;
+
   // Fixes https://github.com/elastic/kibana/issues/145216 in Chrome
   .lines-content.monaco-editor-background {
     overflow: unset !important;
diff --git a/src/plugins/discover/public/components/discover_grid/discover_grid.tsx b/src/plugins/discover/public/components/discover_grid/discover_grid.tsx
index 2537bc6be16ee..2a9c29cf40b75 100644
--- a/src/plugins/discover/public/components/discover_grid/discover_grid.tsx
+++ b/src/plugins/discover/public/components/discover_grid/discover_grid.tsx
@@ -30,6 +30,7 @@ import { DataViewFieldEditorStart } from '@kbn/data-view-field-editor-plugin/pub
 import { DocViewFilterFn } from '../../services/doc_views/doc_views_types';
 import { getSchemaDetectors } from './discover_grid_schema';
 import { DiscoverGridFlyout } from './discover_grid_flyout';
+import { DiscoverGridCellPopover } from './discover_grid_cell_popover';
 import { DiscoverGridContext } from './discover_grid_context';
 import { getRenderCellValueFn } from './get_render_cell_value';
 import { DiscoverGridSettings } from './types';
@@ -599,6 +600,7 @@ export const DiscoverGrid = ({
             onColumnResize={onResize}
             pagination={paginationObj}
             renderCellValue={renderCellValue}
+            renderCellPopover={DiscoverGridCellPopover}
             ref={dataGridRef}
             rowCount={rowCount}
             schemaDetectors={schemaDetectors}
diff --git a/src/plugins/discover/public/components/discover_grid/discover_grid_cell_popover.test.tsx b/src/plugins/discover/public/components/discover_grid/discover_grid_cell_popover.test.tsx
new file mode 100644
index 0000000000000..94b44b257b0e5
--- /dev/null
+++ b/src/plugins/discover/public/components/discover_grid/discover_grid_cell_popover.test.tsx
@@ -0,0 +1,53 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import { mount } from 'enzyme';
+import { DiscoverGridCellPopover } from './discover_grid_cell_popover';
+
+describe('Discover grid cell popover rendering', function () {
+  const CellValue = ({ schema }: { schema: string }) => {
+    return <div>{schema}</div>;
+  };
+
+  it('renders correctly', () => {
+    const setMock = jest.fn();
+    const component = mount(
+      <DiscoverGridCellPopover
+        cellActions={<button>{'test'}</button>}
+        setCellPopoverProps={setMock}
+      >
+        <CellValue schema="string" />
+      </DiscoverGridCellPopover>
+    );
+    expect(component.html()).toMatchInlineSnapshot(
+      `"<div class=\\"euiFlexGroup css-4b375e\\"><div class=\\"euiFlexItem css-9sbomz-euiFlexItem-grow-1\\"><div>string</div></div><div class=\\"euiFlexItem css-kpsrin-euiFlexItem-growZero\\"><button>test</button></div></div>"`
+    );
+    expect(setMock).toHaveBeenCalledWith({
+      panelClassName: 'dscDiscoverGrid__cellPopover',
+    });
+  });
+
+  it('renders correctly for json view', () => {
+    const setMock = jest.fn();
+    const component = mount(
+      <DiscoverGridCellPopover
+        cellActions={<button>{'test'}</button>}
+        setCellPopoverProps={setMock}
+      >
+        <CellValue schema="kibana-json" />
+      </DiscoverGridCellPopover>
+    );
+    expect(component.html()).toMatchInlineSnapshot(
+      `"<div class=\\"euiFlexGroup css-4b375e\\"><div class=\\"euiFlexItem css-9sbomz-euiFlexItem-grow-1\\"><div>kibana-json</div></div><div class=\\"euiFlexItem css-kpsrin-euiFlexItem-growZero\\"><button>test</button></div></div>"`
+    );
+    expect(setMock).toHaveBeenCalledWith({
+      panelClassName: 'dscDiscoverGrid__cellPopover dscDiscoverGrid__cellPopover--withJson',
+    });
+  });
+});
diff --git a/src/plugins/discover/public/components/discover_grid/discover_grid_cell_popover.tsx b/src/plugins/discover/public/components/discover_grid/discover_grid_cell_popover.tsx
new file mode 100644
index 0000000000000..4d37cfe793715
--- /dev/null
+++ b/src/plugins/discover/public/components/discover_grid/discover_grid_cell_popover.tsx
@@ -0,0 +1,39 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React, { useEffect } from 'react';
+import { css } from '@emotion/react';
+import classnames from 'classnames';
+import { EuiDataGridCellPopoverElementProps, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+
+const containerStyles = css`
+  height: 100%;
+`;
+
+export const DiscoverGridCellPopover: React.FC<
+  Pick<EuiDataGridCellPopoverElementProps, 'cellActions' | 'setCellPopoverProps'>
+> = ({ cellActions, setCellPopoverProps, children }) => {
+  useEffect(() => {
+    setCellPopoverProps({
+      panelClassName: classnames('dscDiscoverGrid__cellPopover', {
+        'dscDiscoverGrid__cellPopover--withJson':
+          children &&
+          typeof children === 'object' &&
+          'props' in children &&
+          children.props?.schema === 'kibana-json',
+      }),
+    });
+  }, [setCellPopoverProps, children]);
+
+  return (
+    <EuiFlexGroup responsive={false} direction="column" gutterSize="none" css={containerStyles}>
+      <EuiFlexItem grow={true}>{children}</EuiFlexItem>
+      <EuiFlexItem grow={false}>{cellActions}</EuiFlexItem>
+    </EuiFlexGroup>
+  );
+};
diff --git a/src/plugins/discover/public/components/discover_grid/get_render_cell_value.test.tsx b/src/plugins/discover/public/components/discover_grid/get_render_cell_value.test.tsx
index 6307d221fa394..df58a4bda7331 100644
--- a/src/plugins/discover/public/components/discover_grid/get_render_cell_value.test.tsx
+++ b/src/plugins/discover/public/components/discover_grid/get_render_cell_value.test.tsx
@@ -120,7 +120,7 @@ describe('Discover grid cell rendering', function () {
       />
     );
     expect(component.html()).toMatchInlineSnapshot(
-      `"<div class=\\"euiFlexGroup css-1h68cm-euiFlexGroup-none-flexStart-stretch-row\\"><div class=\\"euiFlexItem css-9sbomz-euiFlexItem-grow-1\\"><span class=\\"dscDiscoverGrid__cellPopoverValue eui-textBreakWord\\">100</span></div><div class=\\"euiFlexItem css-kpsrin-euiFlexItem-growZero\\"><button class=\\"euiButtonIcon euiButtonIcon--xSmall css-1q7ycil-euiButtonIcon-empty-primary-hoverStyles\\" type=\\"button\\" aria-label=\\"Close popover\\" data-test-subj=\\"docTableClosePopover\\"><span data-euiicon-type=\\"cross\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\" color=\\"inherit\\"></span></button></div></div>"`
+      `"<div class=\\"euiFlexGroup css-1h68cm-euiFlexGroup-none-flexStart-stretch-row\\"><div class=\\"euiFlexItem css-9sbomz-euiFlexItem-grow-1\\"><div class=\\"euiText css-f0maoj-euiText-m\\"><span class=\\"dscDiscoverGrid__cellPopoverValue eui-textBreakWord\\">100</span></div></div><div class=\\"euiFlexItem css-kpsrin-euiFlexItem-growZero\\"><button class=\\"euiButtonIcon euiButtonIcon--xSmall css-1q7ycil-euiButtonIcon-empty-primary-hoverStyles\\" type=\\"button\\" aria-label=\\"Close popover\\" data-test-subj=\\"docTableClosePopover\\"><span data-euiicon-type=\\"cross\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\" color=\\"inherit\\"></span></button></div></div>"`
     );
   });
 
@@ -146,7 +146,7 @@ describe('Discover grid cell rendering', function () {
       />
     );
     expect(component.html()).toMatchInlineSnapshot(
-      `"<div class=\\"euiFlexGroup css-1h68cm-euiFlexGroup-none-flexStart-stretch-row\\"><div class=\\"euiFlexItem css-9sbomz-euiFlexItem-grow-1\\"><span class=\\"dscDiscoverGrid__cellPopoverValue eui-textBreakWord\\">100</span></div><div class=\\"euiFlexItem css-kpsrin-euiFlexItem-growZero\\"><button class=\\"euiButtonIcon euiButtonIcon--xSmall css-1q7ycil-euiButtonIcon-empty-primary-hoverStyles\\" type=\\"button\\" aria-label=\\"Close popover\\" data-test-subj=\\"docTableClosePopover\\"><span data-euiicon-type=\\"cross\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\" color=\\"inherit\\"></span></button></div></div>"`
+      `"<div class=\\"euiFlexGroup css-1h68cm-euiFlexGroup-none-flexStart-stretch-row\\"><div class=\\"euiFlexItem css-9sbomz-euiFlexItem-grow-1\\"><div class=\\"euiText css-f0maoj-euiText-m\\"><span class=\\"dscDiscoverGrid__cellPopoverValue eui-textBreakWord\\">100</span></div></div><div class=\\"euiFlexItem css-kpsrin-euiFlexItem-growZero\\"><button class=\\"euiButtonIcon euiButtonIcon--xSmall css-1q7ycil-euiButtonIcon-empty-primary-hoverStyles\\" type=\\"button\\" aria-label=\\"Close popover\\" data-test-subj=\\"docTableClosePopover\\"><span data-euiicon-type=\\"cross\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\" color=\\"inherit\\"></span></button></div></div>"`
     );
     findTestSubject(component, 'docTableClosePopover').simulate('click');
     expect(closePopoverMockFn).toHaveBeenCalledTimes(1);
@@ -248,7 +248,7 @@ describe('Discover grid cell rendering', function () {
     );
     expect(component).toMatchInlineSnapshot(`
       <EuiFlexGroup
-        className="dscDiscoverGrid__cellPopover"
+        className="dscDiscoverGrid__cellPopoverValueContainer"
         direction="column"
         gutterSize="none"
         justifyContent="flexEnd"
@@ -275,9 +275,21 @@ describe('Discover grid cell rendering', function () {
             </EuiFlexItem>
           </EuiFlexGroup>
         </EuiFlexItem>
-        <EuiFlexItem>
+        <EuiFlexItem
+          css={
+            Object {
+              "map": undefined,
+              "name": "1eiwchg",
+              "next": undefined,
+              "styles": "
+        min-width: 370;
+      ",
+              "toString": [Function],
+            }
+          }
+        >
           <JsonCodeEditor
-            height={200}
+            height={300}
             json={
               Object {
                 "_id": "1",
@@ -294,7 +306,6 @@ describe('Discover grid cell rendering', function () {
                 },
               }
             }
-            width={370}
           />
         </EuiFlexItem>
       </EuiFlexGroup>
@@ -480,7 +491,7 @@ describe('Discover grid cell rendering', function () {
     );
     expect(component).toMatchInlineSnapshot(`
       <EuiFlexGroup
-        className="dscDiscoverGrid__cellPopover"
+        className="dscDiscoverGrid__cellPopoverValueContainer"
         direction="column"
         gutterSize="none"
         justifyContent="flexEnd"
@@ -507,9 +518,21 @@ describe('Discover grid cell rendering', function () {
             </EuiFlexItem>
           </EuiFlexGroup>
         </EuiFlexItem>
-        <EuiFlexItem>
+        <EuiFlexItem
+          css={
+            Object {
+              "map": undefined,
+              "name": "1eiwchg",
+              "next": undefined,
+              "styles": "
+        min-width: 370;
+      ",
+              "toString": [Function],
+            }
+          }
+        >
           <JsonCodeEditor
-            height={200}
+            height={300}
             json={
               Object {
                 "_id": "1",
@@ -531,7 +554,6 @@ describe('Discover grid cell rendering', function () {
                 },
               }
             }
-            width={370}
           />
         </EuiFlexItem>
       </EuiFlexGroup>
@@ -644,7 +666,7 @@ describe('Discover grid cell rendering', function () {
     );
     expect(component).toMatchInlineSnapshot(`
       <EuiFlexGroup
-        className="dscDiscoverGrid__cellPopover"
+        className="dscDiscoverGrid__cellPopoverValueContainer"
         direction="column"
         gutterSize="none"
         justifyContent="flexEnd"
@@ -671,9 +693,21 @@ describe('Discover grid cell rendering', function () {
             </EuiFlexItem>
           </EuiFlexGroup>
         </EuiFlexItem>
-        <EuiFlexItem>
+        <EuiFlexItem
+          css={
+            Object {
+              "map": undefined,
+              "name": "1eiwchg",
+              "next": undefined,
+              "styles": "
+        min-width: 370;
+      ",
+              "toString": [Function],
+            }
+          }
+        >
           <JsonCodeEditor
-            height={200}
+            height={300}
             json={
               Object {
                 "object.value": Array [
@@ -681,7 +715,6 @@ describe('Discover grid cell rendering', function () {
                 ],
               }
             }
-            width={370}
           />
         </EuiFlexItem>
       </EuiFlexGroup>
@@ -865,16 +898,18 @@ describe('Discover grid cell rendering', function () {
         responsive={false}
       >
         <EuiFlexItem>
-          <span
-            className="dscDiscoverGrid__cellPopoverValue eui-textBreakWord"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": Array [
-                  ".gz",
-                ],
+          <EuiText>
+            <span
+              className="dscDiscoverGrid__cellPopoverValue eui-textBreakWord"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": Array [
+                    ".gz",
+                  ],
+                }
               }
-            }
-          />
+            />
+          </EuiText>
         </EuiFlexItem>
         <EuiFlexItem
           grow={false}
diff --git a/src/plugins/discover/public/components/discover_grid/get_render_cell_value.tsx b/src/plugins/discover/public/components/discover_grid/get_render_cell_value.tsx
index bfea84e45dd6b..f111fca9e089c 100644
--- a/src/plugins/discover/public/components/discover_grid/get_render_cell_value.tsx
+++ b/src/plugins/discover/public/components/discover_grid/get_render_cell_value.tsx
@@ -7,6 +7,7 @@
  */
 
 import React, { Fragment, useContext, useEffect, useMemo } from 'react';
+import { css } from '@emotion/react';
 import classnames from 'classnames';
 import { i18n } from '@kbn/i18n';
 import { euiLightVars as themeLight, euiDarkVars as themeDark } from '@kbn/ui-theme';
@@ -19,20 +20,25 @@ import {
   EuiButtonIcon,
   EuiFlexGroup,
   EuiFlexItem,
+  EuiText,
 } from '@elastic/eui';
 import { FieldFormatsStart } from '@kbn/field-formats-plugin/public';
 import { DiscoverGridContext } from './discover_grid_context';
 import { JsonCodeEditor } from '../json_code_editor/json_code_editor';
-import { defaultMonacoEditorWidth } from './constants';
 import { formatFieldValue } from '../../utils/format_value';
 import { formatHit } from '../../utils/format_hit';
 import { DataTableRecord, EsHitRecord } from '../../types';
 import { useDiscoverServices } from '../../hooks/use_discover_services';
 import { MAX_DOC_FIELDS_DISPLAYED } from '../../../common';
+import { defaultMonacoEditorWidth } from './constants';
 import { type ShouldShowFieldInTableHandler } from '../../utils/get_should_show_field_handler';
 
 const CELL_CLASS = 'dscDiscoverGrid__cellValue';
 
+const jsonContainerStyles = css`
+  min-width: ${defaultMonacoEditorWidth};
+`;
+
 export const getRenderCellValueFn =
   (
     dataView: DataView,
@@ -193,19 +199,15 @@ function renderPopoverContent({
         gutterSize="none"
         direction="column"
         justifyContent="flexEnd"
-        className="dscDiscoverGrid__cellPopover"
+        className="dscDiscoverGrid__cellPopoverValueContainer"
       >
         <EuiFlexItem grow={false}>
           <EuiFlexGroup justifyContent="flexEnd" gutterSize="none" responsive={false}>
             <EuiFlexItem grow={false}>{closeButton}</EuiFlexItem>
           </EuiFlexGroup>
         </EuiFlexItem>
-        <EuiFlexItem>
-          <JsonCodeEditor
-            json={getJSON(columnId, row, useTopLevelObjectColumns)}
-            width={defaultMonacoEditorWidth}
-            height={200}
-          />
+        <EuiFlexItem css={jsonContainerStyles}>
+          <JsonCodeEditor json={getJSON(columnId, row, useTopLevelObjectColumns)} height={300} />
         </EuiFlexItem>
       </EuiFlexGroup>
     );
@@ -214,20 +216,22 @@ function renderPopoverContent({
   return (
     <EuiFlexGroup gutterSize="none" direction="row" responsive={false}>
       <EuiFlexItem>
-        <span
-          className="dscDiscoverGrid__cellPopoverValue eui-textBreakWord"
-          // formatFieldValue guarantees sanitized values
-          // eslint-disable-next-line react/no-danger
-          dangerouslySetInnerHTML={{
-            __html: formatFieldValue(
-              row.flattened[columnId],
-              row.raw,
-              fieldFormats,
-              dataView,
-              field
-            ),
-          }}
-        />
+        <EuiText>
+          <span
+            className="dscDiscoverGrid__cellPopoverValue eui-textBreakWord"
+            // formatFieldValue guarantees sanitized values
+            // eslint-disable-next-line react/no-danger
+            dangerouslySetInnerHTML={{
+              __html: formatFieldValue(
+                row.flattened[columnId],
+                row.raw,
+                fieldFormats,
+                dataView,
+                field
+              ),
+            }}
+          />
+        </EuiText>
       </EuiFlexItem>
       <EuiFlexItem grow={false}>{closeButton}</EuiFlexItem>
     </EuiFlexGroup>