From db53e1be0ef38da2a4965e53847df8e7f44a721d Mon Sep 17 00:00:00 2001
From: pierrejeambrun <pierrejbrun@gmail.com>
Date: Thu, 2 Jul 2026 11:39:47 +0200
Subject: [PATCH] Fix collapse button overlapping details panel content
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The details-panel collapse handle was rendered inside the details panel — which
clips overflow — and anchored to the panel's inner edge, so it sat over the
panel content and covered the leftmost column (the XCom / Task State Store key
reported in the issue). The resize separator is where a collapse handle belongs,
clear of either panel's content.

closes: #68754
---
 .../ui/src/layouts/Details/DetailsLayout.tsx  | 36 +++++++++++--------
 1 file changed, 21 insertions(+), 15 deletions(-)

diff --git a/airflow-core/src/airflow/ui/src/layouts/Details/DetailsLayout.tsx b/airflow-core/src/airflow/ui/src/layouts/Details/DetailsLayout.tsx
index 736f81828eb1d..84b8e1642b36e 100644
--- a/airflow-core/src/airflow/ui/src/layouts/Details/DetailsLayout.tsx
+++ b/airflow-core/src/airflow/ui/src/layouts/Details/DetailsLayout.tsx
@@ -355,33 +355,39 @@ export const DetailsLayout = ({ children, error, isLoading, outletContext, tabs
                       justifyContent="center"
                       position="relative"
                       w={0.5}
-                    />
-                  </PanelResizeHandle>
-
-                  {/* Collapse button positioned next to the resize handle */}
-
-                  <Panel
-                    defaultSize={dagView === "graph" ? 30 : 80}
-                    id="details-panel"
-                    minSize={20}
-                    order={2}
-                  >
-                    <Box display="flex" flexDirection="column" h="100%" position="relative">
+                    >
                       <IconButton
                         bg="fg.subtle"
-                        borderRadius={direction === "ltr" ? "0 100% 100% 0" : "100% 0 0 100%"}
+                        borderRadius="full"
                         boxShadow="md"
+                        cursor="pointer"
+                        insetInlineStart="50%"
                         label={translate("common:collapseDetailsPanel")}
-                        left={direction === "ltr" ? "0" : undefined}
                         onClick={() => setIsRightPanelCollapsed(true)}
                         position="absolute"
-                        right={direction === "rtl" ? "0" : undefined}
                         size="2xs"
                         top="50%"
+                        transform={direction === "ltr" ? "translate(-50%, -50%)" : "translate(50%, -50%)"}
                         zIndex={2}
                       >
                         {direction === "ltr" ? <FaChevronRight /> : <FaChevronLeft />}
                       </IconButton>
+                    </Box>
+                  </PanelResizeHandle>
+
+                  <Panel
+                    defaultSize={dagView === "graph" ? 30 : 80}
+                    id="details-panel"
+                    minSize={20}
+                    order={2}
+                  >
+                    <Box
+                      display="flex"
+                      flexDirection="column"
+                      h="100%"
+                      paddingInlineStart={4}
+                      position="relative"
+                    >
                       {children}
                       {Boolean(error) || (warningData?.dag_warnings.length ?? 0) > 0 ? (
                         <>