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 8acae525fbf04..2ac242f297f12 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 560102ced34e2..bd60f278edc43 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}