From a7ab2fccbd746d28ea9f17408930ace524c48415 Mon Sep 17 00:00:00 2001
From: Yuseok Jo <yuseok89@gmail.com>
Date: Tue, 10 Mar 2026 16:17:39 +0900
Subject: [PATCH] Fix RenderedJsonField not displaying in table cells

---
 .../ui/src/components/RenderedJsonField.tsx   | 54 ++++++++++---------
 1 file changed, 29 insertions(+), 25 deletions(-)

diff --git a/airflow-core/src/airflow/ui/src/components/RenderedJsonField.tsx b/airflow-core/src/airflow/ui/src/components/RenderedJsonField.tsx
index 634fecd600725..5a9095172efeb 100644
--- a/airflow-core/src/airflow/ui/src/components/RenderedJsonField.tsx
+++ b/airflow-core/src/airflow/ui/src/components/RenderedJsonField.tsx
@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Flex, type FlexProps } from "@chakra-ui/react";
+import { Box, Flex, type FlexProps } from "@chakra-ui/react";
 import Editor, { type OnMount } from "@monaco-editor/react";
 import { useCallback } from "react";
 
@@ -46,30 +46,34 @@ const RenderedJsonField = ({ collapsed = false, content, enableClipboard = true,
   );
 
   return (
-    <Flex {...rest}>
-      <Editor
-        height={height}
-        language="json"
-        onMount={handleMount}
-        options={{
-          automaticLayout: true,
-          contextmenu: false,
-          folding: true,
-          fontSize: 13,
-          glyphMargin: false,
-          lineDecorationsWidth: 0,
-          lineNumbers: "off",
-          minimap: { enabled: false },
-          overviewRulerLanes: 0,
-          readOnly: true,
-          renderLineHighlight: "none",
-          scrollbar: { vertical: "hidden", verticalScrollbarSize: 0 },
-          scrollBeyondLastLine: false,
-          wordWrap: "on",
-        }}
-        theme={theme}
-        value={contentFormatted}
-      />
+    <Flex flex={1} minW={200} {...rest}>
+      <Box h={height} minW={0} position="relative" w="100%">
+        <Box bottom={0} left={0} position="absolute" right={0} top={0}>
+          <Editor
+            height={height}
+            language="json"
+            onMount={handleMount}
+            options={{
+              automaticLayout: true,
+              contextmenu: false,
+              folding: true,
+              fontSize: 13,
+              glyphMargin: false,
+              lineDecorationsWidth: 0,
+              lineNumbers: "off",
+              minimap: { enabled: false },
+              overviewRulerLanes: 0,
+              readOnly: true,
+              renderLineHighlight: "none",
+              scrollbar: { vertical: "hidden", verticalScrollbarSize: 0 },
+              scrollBeyondLastLine: false,
+              wordWrap: "on",
+            }}
+            theme={theme}
+            value={contentFormatted}
+          />
+        </Box>
+      </Box>
       {enableClipboard ? (
         <ClipboardRoot value={contentFormatted}>
           <ClipboardIconButton h={7} minW={7} />