From e1f992563c43382d4f03943f2f24d682602f75c1 Mon Sep 17 00:00:00 2001
From: "Guan-Ming (Wesley) Chiu"
 <105915352+guan404ming@users.noreply.github.com>
Date: Fri, 3 Jul 2026 11:48:42 +0800
Subject: [PATCH] Improve mobile responsiveness for dashboard asset cards

---
 .../src/airflow/ui/src/components/Assets/AssetEvent.tsx     | 6 +++---
 .../src/airflow/ui/src/components/Assets/TriggeredRuns.tsx  | 4 ++--
 .../src/airflow/ui/src/components/DataTable/CardList.tsx    | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/airflow-core/src/airflow/ui/src/components/Assets/AssetEvent.tsx b/airflow-core/src/airflow/ui/src/components/Assets/AssetEvent.tsx
index eef73e9c98371..b7d4b62d265e2 100644
--- a/airflow-core/src/airflow/ui/src/components/Assets/AssetEvent.tsx
+++ b/airflow-core/src/airflow/ui/src/components/Assets/AssetEvent.tsx
@@ -71,20 +71,20 @@ export const AssetEvent = ({
             showArrow
           >
             <Link to={`/assets/${event.asset_id}`}>
-              <Box color="fg.info" overflowWrap="anywhere" padding={0} wordWrap="break-word">
+              <Box color="fg.info" overflowWrap="anywhere" padding={0}>
                 {event.name ?? ""}
               </Box>
             </Link>
           </Tooltip>
         </HStack>
       )}
-      <HStack>
+      <HStack flexWrap="wrap">
         <Box>{translate("source")}: </Box>
         {source === "" ? (
           <Link
             to={`/dags/${event.source_dag_id}/runs/${event.source_run_id}/tasks/${event.source_task_id}${event.source_map_index > -1 ? `/mapped/${event.source_map_index}` : ""}`}
           >
-            <Box color="fg.info" overflowWrap="anywhere" padding={0} wordWrap="break-word">
+            <Box color="fg.info" overflowWrap="anywhere" padding={0}>
               {event.source_dag_id}
             </Box>
           </Link>
diff --git a/airflow-core/src/airflow/ui/src/components/Assets/TriggeredRuns.tsx b/airflow-core/src/airflow/ui/src/components/Assets/TriggeredRuns.tsx
index fd8866359a139..c5aab95ad570c 100644
--- a/airflow-core/src/airflow/ui/src/components/Assets/TriggeredRuns.tsx
+++ b/airflow-core/src/airflow/ui/src/components/Assets/TriggeredRuns.tsx
@@ -36,10 +36,10 @@ export const TriggeredRuns = ({ dagRuns }: Props) => {
   }
 
   return dagRuns.length === 1 ? (
-    <Flex gap={1}>
+    <Flex flexWrap="wrap" gap={1}>
       <Text flexShrink={0}>{`${translate("triggered")} ${translate("dagRun_one")}`}: </Text>
       <StateBadge state={dagRuns[0]?.state as DagRunState} />
-      <RouterLink to={`/dags/${dagRuns[0]?.dag_id}/runs/${dagRuns[0]?.run_id}`}>
+      <RouterLink overflowWrap="anywhere" to={`/dags/${dagRuns[0]?.dag_id}/runs/${dagRuns[0]?.run_id}`}>
         {dagRuns[0]?.dag_id}
       </RouterLink>
     </Flex>
diff --git a/airflow-core/src/airflow/ui/src/components/DataTable/CardList.tsx b/airflow-core/src/airflow/ui/src/components/DataTable/CardList.tsx
index b09704cfad054..04e6d400fbdbe 100644
--- a/airflow-core/src/airflow/ui/src/components/DataTable/CardList.tsx
+++ b/airflow-core/src/airflow/ui/src/components/DataTable/CardList.tsx
@@ -28,7 +28,7 @@ type DataTableProps<TData> = {
 };
 
 export const CardList = <TData,>({ cardDef, isLoading, rows }: DataTableProps<TData>) => (
-  <SimpleGrid data-testid="card-list" {...{ column: { base: 1 }, gap: 2, ...cardDef.gridProps }}>
+  <SimpleGrid data-testid="card-list" {...{ columns: { base: 1 }, gap: 2, ...cardDef.gridProps }}>
     {rows.map((row) => (
       <Box key={row.id}>
         {Boolean(isLoading) &&