From c529535e252d82774533704cde5699379c4a9b5a Mon Sep 17 00:00:00 2001
From: Brent Bovenzi <brent.bovenzi@gmail.com>
Date: Tue, 6 Feb 2024 13:56:30 -0500
Subject: [PATCH] Fix collapsed grid width, line up selected bar with gantt

---
 airflow/www/static/js/dag/Main.tsx                |  2 +-
 airflow/www/static/js/dag/details/Header.tsx      |  2 +-
 airflow/www/static/js/dag/details/index.tsx       |  2 +-
 airflow/www/static/js/dag/grid/dagRuns/index.tsx  | 12 +++++++++++-
 airflow/www/static/js/dag/grid/index.tsx          |  3 +--
 airflow/www/static/js/dag/grid/renderTaskRows.tsx |  2 ++
 6 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/airflow/www/static/js/dag/Main.tsx b/airflow/www/static/js/dag/Main.tsx
index 86955792ec5316..28dffedf28c7c1 100644
--- a/airflow/www/static/js/dag/Main.tsx
+++ b/airflow/www/static/js/dag/Main.tsx
@@ -38,7 +38,7 @@ import keyboardShortcutIdentifier from "./keyboardShortcutIdentifier";
 
 const detailsPanelKey = "hideDetailsPanel";
 const minPanelWidth = 300;
-const collapsedWidth = "28px";
+const collapsedWidth = "32px";
 
 const gridWidthKey = "grid-width";
 const saveWidth = debounce(
diff --git a/airflow/www/static/js/dag/details/Header.tsx b/airflow/www/static/js/dag/details/Header.tsx
index d17f04618ae5c3..5f0ded364c8eea 100644
--- a/airflow/www/static/js/dag/details/Header.tsx
+++ b/airflow/www/static/js/dag/details/Header.tsx
@@ -87,7 +87,7 @@ const Header = () => {
   const isMappedTaskDetails = runId && taskId && mapIndex !== undefined;
 
   return (
-    <Breadcrumb separator={<Text color="gray.300">/</Text>}>
+    <Breadcrumb ml={3} separator={<Text color="gray.300">/</Text>}>
       <BreadcrumbItem isCurrentPage={isDagDetails} mt={4}>
         <BreadcrumbLink
           onClick={clearSelection}
diff --git a/airflow/www/static/js/dag/details/index.tsx b/airflow/www/static/js/dag/details/index.tsx
index ad2662d61e6fde..918fa7c8048b25 100644
--- a/airflow/www/static/js/dag/details/index.tsx
+++ b/airflow/www/static/js/dag/details/index.tsx
@@ -197,7 +197,7 @@ const Details = ({
       : group?.instances.find((ti) => ti.runId === runId);
 
   return (
-    <Flex flexDirection="column" pl={3} height="100%">
+    <Flex flexDirection="column" height="100%">
       <Flex
         alignItems="center"
         justifyContent="space-between"
diff --git a/airflow/www/static/js/dag/grid/dagRuns/index.tsx b/airflow/www/static/js/dag/grid/dagRuns/index.tsx
index ae9c204d1b9f03..358b10fb387b8e 100644
--- a/airflow/www/static/js/dag/grid/dagRuns/index.tsx
+++ b/airflow/www/static/js/dag/grid/dagRuns/index.tsx
@@ -147,11 +147,21 @@ const DagRuns = ({
           </Flex>
         </Th>
       )}
-      <Th align="right" verticalAlign="bottom">
+      <Th
+        align="right"
+        verticalAlign="bottom"
+        borderRightWidth="16px"
+        borderRightColor="white"
+      >
         <Flex
           justifyContent="flex-end"
           borderBottomWidth={3}
           position="relative"
+          borderRightWidth="16px"
+          borderRightColor="white"
+          marginRight="-16px"
+          borderTopWidth="50px"
+          borderTopColor="white"
         >
           {runs.map((run: RunWithDuration, index) => (
             <DagRunBar
diff --git a/airflow/www/static/js/dag/grid/index.tsx b/airflow/www/static/js/dag/grid/index.tsx
index 57f749a0484184..b7299e5ba32bda 100644
--- a/airflow/www/static/js/dag/grid/index.tsx
+++ b/airflow/www/static/js/dag/grid/index.tsx
@@ -165,11 +165,10 @@ const Grid = ({
         ref={gridScrollRef}
         overflow="auto"
         position="relative"
-        pr={4}
         mt={8}
         overscrollBehavior="auto"
       >
-        <Table pr="10px" borderRightWidth="14px" borderColor="transparent">
+        <Table borderRightWidth="16px" borderColor="transparent">
           <Thead>
             <DagRuns
               groups={groups}
diff --git a/airflow/www/static/js/dag/grid/renderTaskRows.tsx b/airflow/www/static/js/dag/grid/renderTaskRows.tsx
index 181186b172db90..ab33c0c14575b3 100644
--- a/airflow/www/static/js/dag/grid/renderTaskRows.tsx
+++ b/airflow/www/static/js/dag/grid/renderTaskRows.tsx
@@ -146,6 +146,8 @@ const Row = (props: RowProps) => {
         bg={isSelected ? "blue.100" : "inherit"}
         borderBottomWidth={1}
         borderBottomColor={isGroup && isOpen ? "gray.400" : "gray.200"}
+        borderRightWidth="16px"
+        borderRightColor={isSelected ? "blue.100" : "transparent"}
         role="group"
         _hover={!isSelected ? { bg: hoverBlue } : undefined}
         transition="background-color 0.2s"