Refactor structuredLog structure and layout (#51567)

Author: guan404ming

airflow-core/src/airflow/ui/src/components/renderStructuredLog.tsx

@@ -127,25 +127,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} />, "] ");
   }
@@ -179,20 +160,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>,
   );
@@ -209,14 +190,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>
   );
 };