(airflow) branch main updated: Fix(UI): Improve mobile responsiveness of Dashboard sections (#58811)

[guanmingchiu]

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

guanmingchiu 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 f1032188570 Fix(UI): Improve mobile responsiveness of Dashboard 
sections (#58811)
f1032188570 is described below

commit f1032188570c13704ef33dd8baca709cf8a9cebc
Author: Anshu Singh <anshu.si...@ksolves.com>
AuthorDate: Sat Nov 29 23:58:13 2025 +0530

    Fix(UI): Improve mobile responsiveness of Dashboard sections (#58811)
    
    * fix(UI):Improve mobile responsiveness of Dashboard sections
    
    * Address reviewer comments: improve responsiveness layout
---
 airflow-core/src/airflow/ui/src/components/Assets/AssetEvents.tsx   | 2 +-
 .../ui/src/pages/Dashboard/HistoricalMetrics/HistoricalMetrics.tsx  | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/airflow-core/src/airflow/ui/src/components/Assets/AssetEvents.tsx 
b/airflow-core/src/airflow/ui/src/components/Assets/AssetEvents.tsx
index 8acae525fbf..2ac242f297f 100644
--- a/airflow-core/src/airflow/ui/src/components/Assets/AssetEvents.tsx
+++ b/airflow-core/src/airflow/ui/src/components/Assets/AssetEvents.tsx
@@ -70,7 +70,7 @@ export const AssetEvents = ({
 
   return (
     <Box borderBottomWidth={0} borderRadius={8} borderWidth={1} p={4} py={2} 
{...rest}>
-      <Flex alignItems="center" justify="space-between">
+      <Flex alignItems="center" flexWrap="wrap" justify="space-between">
         <HStack>
           <StateBadge colorPalette="brand" fontSize="md" variant="solid">
             <FiDatabase />
diff --git 
a/airflow-core/src/airflow/ui/src/pages/Dashboard/HistoricalMetrics/HistoricalMetrics.tsx
 
b/airflow-core/src/airflow/ui/src/pages/Dashboard/HistoricalMetrics/HistoricalMetrics.tsx
index 560102ced34..bd60f278edc 100644
--- 
a/airflow-core/src/airflow/ui/src/pages/Dashboard/HistoricalMetrics/HistoricalMetrics.tsx
+++ 
b/airflow-core/src/airflow/ui/src/pages/Dashboard/HistoricalMetrics/HistoricalMetrics.tsx
@@ -85,8 +85,8 @@ export const HistoricalMetrics = () => {
           setStartDate={setStartDate}
           startDate={startDate}
         />
-        <SimpleGrid columns={{ base: 10 }} gap={2}>
-          <GridItem colSpan={{ base: 7 }}>
+        <SimpleGrid columns={{ base: 1, lg: 10 }} gap={2}>
+          <GridItem colSpan={{ base: 1, lg: 7 }}>
             {isLoading ? <MetricSectionSkeleton /> : undefined}
             {!isLoading && data !== undefined && (
               <Box>
@@ -99,7 +99,7 @@ export const HistoricalMetrics = () => {
               </Box>
             )}
           </GridItem>
-          <GridItem colSpan={{ base: 3 }}>
+          <GridItem colSpan={{ base: 1, lg: 3 }}>
             <AssetEvents
               data={assetEventsData}
               isLoading={isLoadingAssetEvents}