This is an automated email from the ASF dual-hosted git repository.
choo121600 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 44b7049542c Fix collapse button overlapping details panel content
(#69240)
44b7049542c is described below
commit 44b7049542c49f9a242458f3d928bfededfd469c
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
---
.../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 736f81828eb..84b8e1642b3 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 ? (
<>
