(airflow) branch main updated: Fix RenderedJsonField not displaying in table cells (#63245)

[choo121600]

This is an automated email from the ASF dual-hosted git repository.

choo121600 pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/airflow.git


The following commit(s) were added to refs/heads/main by this push:
     new 396f8186dc7 Fix RenderedJsonField not displaying in table cells 
(#63245)
396f8186dc7 is described below

commit 396f8186dc7e46cf4b615350574e8dc77542a50f
Author: yuseok89 <yuseo...@gmail.com>
AuthorDate: Tue Mar 10 20:52:56 2026 +0900

    Fix RenderedJsonField not displaying in table cells (#63245)
---
 .../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 634fecd6007..5a9095172ef 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} />