This is an automated email from the ASF dual-hosted git repository.
vatsrahul1001 pushed a commit to branch backport-44b7049-v3-3-test
in repository https://gitbox.apache.org/repos/asf/airflow.git
The following commit(s) were added to refs/heads/backport-44b7049-v3-3-test by
this push:
new c5ca8e4b3f9 Fix collapse button overlapping details panel content
(#69240)
c5ca8e4b3f9 is described below
commit c5ca8e4b3f9f1a5557be469a4b3d0b0b6b40947f
Author: Pierre Jeambrun <[email protected]>
AuthorDate: Thu Jul 2 15:43:07 2026 +0200
Fix collapse button overlapping details panel content (#69240)
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 d5f0431f81a..979bfe22485 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 ? (
<>
