(airflow) branch main updated: Improve css for selecting a node in the graph (#48415)

[bbovenzi]

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

bbovenzi 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 f1591b5c7a1 Improve css for selecting a node in the graph (#48415)
f1591b5c7a1 is described below

commit f1591b5c7a187bdff0d294f6bd93cf824de0895e
Author: Brent Bovenzi <br...@astronomer.io>
AuthorDate: Wed Mar 26 16:08:44 2025 -0400

    Improve css for selecting a node in the graph (#48415)
---
 .../src/airflow/ui/src/components/Graph/TaskNode.tsx       | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/airflow-core/src/airflow/ui/src/components/Graph/TaskNode.tsx 
b/airflow-core/src/airflow/ui/src/components/Graph/TaskNode.tsx
index ac36a5e5992..f411555b96f 100644
--- a/airflow-core/src/airflow/ui/src/components/Graph/TaskNode.tsx
+++ b/airflow-core/src/airflow/ui/src/components/Graph/TaskNode.tsx
@@ -33,7 +33,7 @@ export const TaskNode = ({
   data: {
     childCount,
     depth,
-    height,
+    height = 0,
     isGroup,
     isMapped,
     isOpen,
@@ -42,7 +42,7 @@ export const TaskNode = ({
     operator,
     setupTeardownType,
     taskInstance,
-    width,
+    width = 0,
   },
   id,
 }: NodeProps<NodeType<CustomNodeProps, "task">>) => {
@@ -71,11 +71,11 @@ export const TaskNode = ({
             }
             borderRadius={5}
             borderWidth={isSelected ? 6 : 2}
-            height={`${height}px`}
+            height={`${height + (isSelected ? 4 : 0)}px`}
             justifyContent="space-between"
-            px={3}
+            px={isSelected ? 1 : 2}
             py={isSelected ? 0 : 1}
-            width={`${width}px`}
+            width={`${width + (isSelected ? 4 : 0)}px`}
           >
             <Box>
               <TaskLink
@@ -127,7 +127,7 @@ export const TaskNode = ({
               borderLeftWidth={1}
               borderRightWidth={1}
               height={1}
-              width={`${(width ?? 0) - 10}px`}
+              width={`${width - 10}px`}
             />
             <Box
               bg="bg.subtle"
@@ -138,7 +138,7 @@ export const TaskNode = ({
               borderLeftWidth={1}
               borderRightWidth={1}
               height={1}
-              width={`${(width ?? 0) - 20}px`}
+              width={`${width - 20}px`}
             />
           </>
         ) : undefined}