This is an automated email from the ASF dual-hosted git repository. vatsrahul1001 pushed a commit to branch backport-4ddb6b4621-v3-3-test in repository https://gitbox.apache.org/repos/asf/airflow.git
commit 0401827e89906c6ebc7480f7eb26b0d924210af4 Author: jasperjonkhans <[email protected]> AuthorDate: Wed Sep 9 19:52:31 2026 +0200 Fix clipping of Last run state badge (#72459) Chakra's default select value clamping hides the lower edge of rich labels such as state badges. (cherry picked from commit 4ddb6b4621052c26b5d7b79b6556f2815f8be619) --- .../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) => (
