This is an automated email from the ASF dual-hosted git repository.
pierrejeambrun 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 889e6249058 Update responsive options handling in PanelButtons (#55868)
889e6249058 is described below
commit 889e62490585d1869f46e35c729b34f9242e70b0
Author: Guan Ming(Wesley) Chiu <[email protected]>
AuthorDate: Fri Sep 19 17:44:10 2025 +0800
Update responsive options handling in PanelButtons (#55868)
---
.../src/airflow/ui/src/layouts/Details/PanelButtons.tsx | 17 +++++++++++------
1 file changed, 11 insertions(+), 6 deletions(-)
diff --git a/airflow-core/src/airflow/ui/src/layouts/Details/PanelButtons.tsx
b/airflow-core/src/airflow/ui/src/layouts/Details/PanelButtons.tsx
index 1f4d50245bd..8bf65852c31 100644
--- a/airflow-core/src/airflow/ui/src/layouts/Details/PanelButtons.tsx
+++ b/airflow-core/src/airflow/ui/src/layouts/Details/PanelButtons.tsx
@@ -77,12 +77,12 @@ const getOptions = (translate: (key: string) => string) =>
],
});
-const getWidthBasedConfig = (width: number, showGantt: boolean) => {
- const breakpoints = showGantt
+const getWidthBasedConfig = (width: number, enableResponsiveOptions: boolean)
=> {
+ const breakpoints = enableResponsiveOptions
? [
{ limit: 100, min: 1600, options: ["5", "10", "25", "50"] }, // xl:
extra large screens
{ limit: 25, min: 1024, options: ["5", "10", "25"] }, // lg: large
screens
- { limit: 10, min: 768, options: ["5", "10"] }, // md: medium screens
+ { limit: 10, min: 384, options: ["5", "10"] }, // md: medium screens
{ limit: 5, min: 0, options: ["5"] }, // sm: small screens and below
]
: [{ limit: 5, min: 0, options: ["5", "10", "25", "50"] }];
@@ -131,13 +131,18 @@ export const PanelButtons = ({
setLimit(runLimit);
};
- const { displayRunOptions, limit: defaultLimit } =
getWidthBasedConfig(containerWidth, showGantt);
+ const enableResponsiveOptions = showGantt && Boolean(runId);
+
+ const { displayRunOptions, limit: defaultLimit } = getWidthBasedConfig(
+ containerWidth,
+ enableResponsiveOptions,
+ );
useEffect(() => {
- if (showGantt && limit > defaultLimit) {
+ if (enableResponsiveOptions && limit > defaultLimit) {
setLimit(defaultLimit);
}
- }, [showGantt, defaultLimit, setLimit, limit]);
+ }, [defaultLimit, enableResponsiveOptions, limit, setLimit]);
const handleDepsChange = (event: SelectValueChangeDetails<{ label: string;
value: Array<string> }>) => {
if (event.value[0] === undefined || event.value[0] === "tasks" ||
!deps.includes(event.value[0])) {
