(airflow) branch main updated: Allow truncatedtext to wrap to two lines (#47415)

[bbovenzi]

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

bbovenzi 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 3a300c97090 Allow truncatedtext to wrap to two lines (#47415)
3a300c97090 is described below

commit 3a300c970905c7d808447a482f273fbbb5cd1627
Author: Brent Bovenzi <br...@astronomer.io>
AuthorDate: Wed Mar 5 15:56:46 2025 -0500

    Allow truncatedtext to wrap to two lines (#47415)
---
 airflow/ui/src/components/TruncatedText.tsx | 25 ++++++++++++++++---------
 1 file changed, 16 insertions(+), 9 deletions(-)

diff --git a/airflow/ui/src/components/TruncatedText.tsx 
b/airflow/ui/src/components/TruncatedText.tsx
index 7fe16dcdcc2..5b64f5163d5 100644
--- a/airflow/ui/src/components/TruncatedText.tsx
+++ b/airflow/ui/src/components/TruncatedText.tsx
@@ -22,12 +22,19 @@ type Props = {
   readonly text: string;
 } & TextProps;
 
-export const TruncatedText = ({ text, ...rest }: Props) => {
-  const truncatedText = text.length <= 25 ? text : `…${text.slice(-22)}`;
-
-  return (
-    <Text title={text} {...rest}>
-      {truncatedText}
-    </Text>
-  );
-};
+export const TruncatedText = ({ text, ...rest }: Props) => (
+  <Text
+    display="-webkit-box"
+    overflow="hidden"
+    style={{
+      WebkitBoxOrient: "vertical",
+      WebkitLineClamp: 2,
+    }}
+    title={text}
+    width="200px"
+    wordBreak="break-word"
+    {...rest}
+  >
+    {text}
+  </Text>
+);