From d4236f49d527b60408cb862c821db8fb39b39206 Mon Sep 17 00:00:00 2001
From: "Guan Ming(Wesley) Chiu"
 <105915352+guan404ming@users.noreply.github.com>
Date: Thu, 12 Jun 2025 01:51:10 +0800
Subject: [PATCH] [v3-0-test] Refactor `structuredLog` structure and layout
 (#51567) (cherry picked from commit b6db7a757b44b36bce821195bf4a5123aa62723f)

Co-authored-by: Guan Ming(Wesley) Chiu <105915352+guan404ming@users.noreply.github.com>
---
 .../ui/src/components/renderStructuredLog.tsx | 54 +++++++++----------
 1 file changed, 27 insertions(+), 27 deletions(-)

diff --git a/airflow-core/src/airflow/ui/src/components/renderStructuredLog.tsx b/airflow-core/src/airflow/ui/src/components/renderStructuredLog.tsx
index 122c68d3a1fed..ec1bc622f590d 100644
--- a/airflow-core/src/airflow/ui/src/components/renderStructuredLog.tsx
+++ b/airflow-core/src/airflow/ui/src/components/renderStructuredLog.tsx
@@ -124,25 +124,6 @@ export const renderStructuredLog = ({
     return "";
   }
 
-  elements.push(
-    <RouterLink
-      id={index.toString()}
-      key={`line_${index}`}
-      style={{
-        display: "inline-block",
-        marginRight: "10px",
-        paddingRight: "5px",
-        textAlign: "right",
-        userSelect: "none",
-        WebkitUserSelect: "none",
-        width: "3em",
-      }}
-      to={`${logLink}#${index}`}
-    >
-      {index}
-    </RouterLink>,
-  );
-
   if (Boolean(timestamp)) {
     elements.push("[", <Time datetime={timestamp} key={0} />, "] ");
   }
@@ -175,20 +156,20 @@ export const renderStructuredLog = ({
       ));
 
       return (
-        <details key={error.exc_type} open={true} style={{ marginLeft: "20em" }}>
-          <summary data-testid={`summary-${error.exc_type}`}>
+        <chakra.details key={error.exc_type} ml="20em" open={true}>
+          <chakra.summary data-testid={`summary-${error.exc_type}`}>
             <chakra.span color="fg.info" cursor="pointer">
               {error.exc_type}: {error.exc_value}
             </chakra.span>
-          </summary>
+          </chakra.summary>
           {errorLines}
-        </details>
+        </chakra.details>
       );
     });
   }
 
   elements.push(
-    <chakra.span className="event" key={2} style={{ whiteSpace: "pre-wrap" }}>
+    <chakra.span className="event" key={2} whiteSpace="pre-wrap">
       {addLinks(event)}
     </chakra.span>,
   );
@@ -205,14 +186,33 @@ export const renderStructuredLog = ({
   }
 
   elements.push(
-    <chakra.span className="event" key={3} style={{ whiteSpace: "pre-wrap" }}>
+    <chakra.span className="event" key={3} whiteSpace="pre-wrap">
       {details}
     </chakra.span>,
   );
 
   return (
-    <chakra.div key={index} lineHeight={1.5}>
-      {elements}
+    <chakra.div display="flex" key={index} lineHeight={1.5}>
+      <RouterLink
+        id={index.toString()}
+        key={`line_${index}`}
+        style={{
+          display: "inline-block",
+          flexShrink: 0,
+          marginRight: "10px",
+          paddingRight: "5px",
+          textAlign: "right",
+          userSelect: "none",
+          WebkitUserSelect: "none",
+          width: "3em",
+        }}
+        to={`${logLink}#${index}`}
+      >
+        {index}
+      </RouterLink>
+      <chakra.span overflow="auto" whiteSpace="pre-wrap" width="100%">
+        {elements}
+      </chakra.span>
     </chakra.div>
   );
 };