This is an automated email from the ASF dual-hosted git repository.
vatsrahul1001 pushed a commit to branch v3-3-test
in repository https://gitbox.apache.org/repos/asf/airflow.git
The following commit(s) were added to refs/heads/v3-3-test by this push:
new 8fe8a23256d Fix clipping of Last run state badge (#72459) (#72841)
8fe8a23256d is described below
commit 8fe8a23256d96396bd87e7b25b8e63a2bee526b2
Author: Rahul Vats <[email protected]>
AuthorDate: Thu Sep 10 08:09:48 2026 +0530
Fix clipping of Last run state badge (#72459) (#72841)
Chakra's default select value clamping hides the lower edge of rich labels
such as state badges.
(cherry picked from commit 4ddb6b4621052c26b5d7b79b6556f2815f8be619)
Co-authored-by: jasperjonkhans <[email protected]>
---
.../ui/src/components/FilterBar/filters/SelectFilter.tsx | 11 +++++++++--
1 file changed, 9 insertions(+), 2 deletions(-)
diff --git
a/airflow-core/src/airflow/ui/src/components/FilterBar/filters/SelectFilter.tsx
b/airflow-core/src/airflow/ui/src/components/FilterBar/filters/SelectFilter.tsx
index 9308e6b0589..dc5aa4a917f 100644
---
a/airflow-core/src/airflow/ui/src/components/FilterBar/filters/SelectFilter.tsx
+++
b/airflow-core/src/airflow/ui/src/components/FilterBar/filters/SelectFilter.tsx
@@ -17,6 +17,7 @@
* under the License.
*/
import { createListCollection, Box, Text } from "@chakra-ui/react";
+import type { ReactNode } from "react";
import { Select } from "src/components/ui";
@@ -24,7 +25,7 @@ import { FilterPill } from "../FilterPill";
import type { FilterPluginProps, FilterConfig } from "../types";
type SelectOption = {
- label: string;
+ label: ReactNode;
value: string;
};
@@ -52,6 +53,8 @@ export const SelectFilter = ({ filter, onChange, onRemove }:
FilterPluginProps)
const displayValue = config.options.find(
(option) => option.value === (typeof filter.value === "string" ?
filter.value : ""),
)?.label;
+ // Chakra line-clamps value text by default, which clips padded elements
such as state badges.
+ const hasRichDisplayValue = displayValue !== undefined && typeof
displayValue !== "string";
return (
<FilterPill
@@ -95,7 +98,11 @@ export const SelectFilter = ({ filter, onChange, onRemove }:
FilterPluginProps)
value={hasValue && typeof filter.value === "string" ?
[filter.value] : []}
>
<Select.Trigger dataTestId="select-filter-trigger" triggerProps={{
border: "none" }}>
- <Select.ValueText placeholder={filter.config.placeholder} />
+ <Select.ValueText
+ lineClamp={hasRichDisplayValue ? "none" : undefined}
+ overflow={hasRichDisplayValue ? "visible" : undefined}
+ placeholder={filter.config.placeholder}
+ />
</Select.Trigger>
<Select.Content>
{config.options.map((option) => (
