(airflow) branch main updated: Fix asset name overflow in DAG list view (#57108)

[pierrejeambrun]

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

pierrejeambrun 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 9fa4462fc02 Fix asset name overflow in DAG list view (#57108)
9fa4462fc02 is described below

commit 9fa4462fc024e5e48fc4a60b887a22dfe7611ccc
Author: Tyrell H <73722828+tyrellhayw...@users.noreply.github.com>
AuthorDate: Mon Oct 27 13:22:43 2025 -0400

    Fix asset name overflow in DAG list view (#57108)
    
    * Fix asset name overflow in DAG list view
    
    - Add maxWidth constraint to HStack containers in AssetSchedule component
    - Prevents asset names from overlapping with Latest Run column
    
    * Fix asset name overflow with word-break and line clamping
    
    * Use TruncatedText component instead
    
    ---------
    
    Co-authored-by: pierrejeambrun <pierrejb...@gmail.com>
---
 .../src/airflow/ui/src/pages/DagsList/AssetSchedule.tsx       | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/airflow-core/src/airflow/ui/src/pages/DagsList/AssetSchedule.tsx 
b/airflow-core/src/airflow/ui/src/pages/DagsList/AssetSchedule.tsx
index 26b963da26b..44cf11054bb 100644
--- a/airflow-core/src/airflow/ui/src/pages/DagsList/AssetSchedule.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/DagsList/AssetSchedule.tsx
@@ -25,6 +25,7 @@ import { Link as RouterLink } from "react-router-dom";
 import { useAssetServiceNextRunAssets } from "openapi/queries";
 import { AssetExpression, type ExpressionType } from 
"src/components/AssetExpression";
 import type { NextRunEvent } from "src/components/AssetExpression/types";
+import { TruncatedText } from "src/components/TruncatedText";
 import { Button, Popover } from "src/components/ui";
 
 type Props = {
@@ -51,7 +52,7 @@ export const AssetSchedule = ({ assetExpression, dagId, 
latestRunAfter, timetabl
   if (!nextRunEvents.length) {
     return (
       <HStack>
-        <FiDatabase style={{ display: "inline" }} />
+        <FiDatabase style={{ display: "inline", flexShrink: 0 }} />
         <Text>{timetableSummary}</Text>
       </HStack>
     );
@@ -62,9 +63,11 @@ export const AssetSchedule = ({ assetExpression, dagId, 
latestRunAfter, timetabl
   if (nextRunEvents.length === 1 && asset !== undefined) {
     return (
       <HStack>
-        <FiDatabase style={{ display: "inline" }} />
-        <Link asChild color="fg.info" display="block" fontSize="sm" 
maxWidth="200px" truncate>
-          <RouterLink to={`/assets/${asset.id}`}>{asset.name ?? 
asset.uri}</RouterLink>
+        <FiDatabase style={{ display: "inline", flexShrink: 0 }} />
+        <Link asChild color="fg.info" display="block" fontSize="sm">
+          <RouterLink to={`/assets/${asset.id}`}>
+            <TruncatedText minWidth={0} text={asset.name ?? asset.uri} />
+          </RouterLink>
         </Link>
       </HStack>
     );