(airflow) branch main updated: Fix #47708: Ensure all multiple dropdown selections are visible (#48185)

[jscheffl]

This is an automated email from the ASF dual-hosted git repository.

jscheffl 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 e87d672be19 Fix #47708: Ensure all multiple dropdown selections are 
visible (#48185)
e87d672be19 is described below

commit e87d672be191449c86a645d01699953566374aa6
Author: davidfgcorreia <davidfgcorr...@tecnico.ulisboa.pt>
AuthorDate: Mon Mar 24 20:52:18 2025 +0000

    Fix #47708: Ensure all multiple dropdown selections are visible (#48185)
    
    The dropdown filters were not visible to the user. I modified the
        functions responsible for this issue, implementing a dynamic version
        that adjusts based on the size of each filter. Now, all filters are
        fully visible.
---
 airflow-core/src/airflow/ui/src/pages/DagRuns.tsx  |  4 ++--
 .../pages/TaskInstances/TaskInstancesFilter.tsx    | 22 +++++++++++-----------
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/airflow-core/src/airflow/ui/src/pages/DagRuns.tsx 
b/airflow-core/src/airflow/ui/src/pages/DagRuns.tsx
index 32239cb08c3..16f9cfab1fb 100644
--- a/airflow-core/src/airflow/ui/src/pages/DagRuns.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/DagRuns.tsx
@@ -185,8 +185,8 @@ export const DagRuns = () => {
           onValueChange={handleStateChange}
           value={[filteredState ?? "all"]}
         >
-          <Select.Trigger colorPalette="blue" 
isActive={Boolean(filteredState)}>
-            <Select.ValueText width={20}>
+          <Select.Trigger colorPalette="blue" 
isActive={Boolean(filteredState)} minW="max-content">
+            <Select.ValueText width="auto">
               {() =>
                 filteredState === null ? (
                   "All States"
diff --git 
a/airflow-core/src/airflow/ui/src/pages/TaskInstances/TaskInstancesFilter.tsx 
b/airflow-core/src/airflow/ui/src/pages/TaskInstances/TaskInstancesFilter.tsx
index cd53bc8180f..72cef0c3c94 100644
--- 
a/airflow-core/src/airflow/ui/src/pages/TaskInstances/TaskInstancesFilter.tsx
+++ 
b/airflow-core/src/airflow/ui/src/pages/TaskInstances/TaskInstancesFilter.tsx
@@ -80,10 +80,18 @@ export const TaskInstancesFilter = ({
   };
 
   return (
-    <HStack>
+    <HStack paddingY="4px">
+      <SearchBar
+        buttonProps={{ disabled: true }}
+        defaultValue={taskDisplayNamePattern ?? ""}
+        hideAdvanced
+        hotkeyDisabled={Boolean(runId)}
+        onChange={handleSearchChange}
+        placeHolder="Search Tasks"
+      />
       <Select.Root
         collection={stateOptions}
-        maxW="250px"
+        maxW="450px"
         multiple
         onValueChange={handleStateChange}
         value={hasFilteredState ? filteredState : ["all"]}
@@ -96,7 +104,7 @@ export const TaskInstancesFilter = ({
           <Select.ValueText>
             {() =>
               hasFilteredState ? (
-                <HStack gap="10px">
+                <HStack flexWrap="wrap" fontSize="sm" gap="4px" paddingY="8px">
                   {filteredState.map((state) => (
                     <StateBadge key={state} state={state as TaskInstanceState}>
                       {state === "none" ? "No Status" : capitalize(state)}
@@ -121,14 +129,6 @@ export const TaskInstancesFilter = ({
           ))}
         </Select.Content>
       </Select.Root>
-      <SearchBar
-        buttonProps={{ disabled: true }}
-        defaultValue={taskDisplayNamePattern ?? ""}
-        hideAdvanced
-        hotkeyDisabled={Boolean(runId)}
-        onChange={handleSearchChange}
-        placeHolder="Search Tasks"
-      />
     </HStack>
   );
 };