(airflow) branch v3-0-test updated: [v3-0-test] Refactor `structuredLog` structure and layout (#51567) (#51626)

[bbovenzi]

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

bbovenzi pushed a commit to branch v3-0-test
in repository https://gitbox.apache.org/repos/asf/airflow.git


The following commit(s) were added to refs/heads/v3-0-test by this push:
     new 414b75215d0 [v3-0-test] Refactor `structuredLog` structure and layout 
(#51567) (#51626)
414b75215d0 is described below

commit 414b75215d03d02e51f47c55a66cdf5bedd3f165
Author: github-actions[bot] 
<41898282+github-actions[bot]@users.noreply.github.com>
AuthorDate: Wed Jun 11 16:33:40 2025 -0400

    [v3-0-test] Refactor `structuredLog` structure and layout (#51567) (#51626)
    
    (cherry picked from commit b6db7a757b44b36bce821195bf4a5123aa62723f)
    
    Co-authored-by: Guan Ming(Wesley) Chiu 
<105915352+guan404m...@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 122c68d3a1f..ec1bc622f59 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>
   );
 };