[airflow] 19/20: Fix grid details header text overlap (#23728)

[ephraimanierobi]

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

ephraimanierobi pushed a commit to branch v2-3-test
in repository https://gitbox.apache.org/repos/asf/airflow.git

commit c0b9d26b9e9d6910bb9d140ef3d905a8a1bfeb06
Author: Brent Bovenzi <brent.bove...@gmail.com>
AuthorDate: Mon May 16 15:21:54 2022 -0400

    Fix grid details header text overlap (#23728)
    
    Move top margin to each breadcrumb component to make sure that there is no 
overlap when the header wraps with long names.
    
    (cherry picked from commit f77a6917264c0a2261e9d78fcfdc31a6e5f9760f)
---
 airflow/www/static/js/grid/details/Header.jsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/airflow/www/static/js/grid/details/Header.jsx 
b/airflow/www/static/js/grid/details/Header.jsx
index e2041b3665..bcbac15f02 100644
--- a/airflow/www/static/js/grid/details/Header.jsx
+++ b/airflow/www/static/js/grid/details/Header.jsx
@@ -75,21 +75,21 @@ const Header = () => {
   const isTaskDetails = runId && taskId;
 
   return (
-    <Breadcrumb mt={4} separator={<Text color="gray.300">/</Text>}>
-      <BreadcrumbItem isCurrentPage={isDagDetails}>
+    <Breadcrumb separator={<Text color="gray.300">/</Text>}>
+      <BreadcrumbItem isCurrentPage={isDagDetails} mt={4}>
         <BreadcrumbLink onClick={clearSelection} _hover={isDagDetails ? { 
cursor: 'default' } : undefined}>
           <LabelValue label="DAG" value={dagId} />
         </BreadcrumbLink>
       </BreadcrumbItem>
       {runId && (
-        <BreadcrumbItem isCurrentPage={isRunDetails}>
+        <BreadcrumbItem isCurrentPage={isRunDetails} mt={4}>
           <BreadcrumbLink onClick={() => onSelect({ runId })} 
_hover={isRunDetails ? { cursor: 'default' } : undefined}>
             <LabelValue label="Run" value={runLabel} />
           </BreadcrumbLink>
         </BreadcrumbItem>
       )}
       {taskId && (
-        <BreadcrumbItem isCurrentPage>
+        <BreadcrumbItem isCurrentPage mt={4}>
           <BreadcrumbLink _hover={isTaskDetails ? { cursor: 'default' } : 
undefined}>
             <LabelValue label="Task" value={`${taskName}${isMapped ? ' []' : 
''}`} />
           </BreadcrumbLink>