From c5ca8e4b3f9f1a5557be469a4b3d0b0b6b40947f Mon Sep 17 00:00:00 2001
From: Pierre Jeambrun <pierrejbrun@gmail.com>
Date: Thu, 2 Jul 2026 15:43:07 +0200
Subject: [PATCH] Fix collapse button overlapping details panel content
 (#69240)
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
(cherry picked from commit 44b7049542c49f9a242458f3d928bfededfd469c)
---
 .../ui/src/layouts/Details/DetailsLayout.tsx  | 26 ++++++++++++-------
 1 file changed, 16 insertions(+), 10 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 d5f0431f81a11..979bfe2248520 100644
--- a/airflow-core/src/airflow/ui/src/layouts/Details/DetailsLayout.tsx
+++ b/airflow-core/src/airflow/ui/src/layouts/Details/DetailsLayout.tsx
@@ -361,28 +361,34 @@ 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 ? (
                       <>