fix(listview): fix search input clipping and match antd option height

Remove overflow:hidden from PanelContainer so the Input focus ring
is not clipped at the panel boundary.

Set OptionItem line-height to theme.lineHeight and derive the vertical
padding from antd's exact formula (controlHeight - fontSize * lineHeight) / 2,
matching the height of antd Select dropdown options in Explore.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

superset-frontend/src/components/ListView/Filters/CompactFilterTrigger.test.tsx

@@ -0,0 +1,125 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { render, screen } from 'spec/helpers/testing-library';
+import userEvent from '@testing-library/user-event';
+import CompactFilterTrigger from './CompactFilterTrigger';
+
+const defaultProps = {
+  label: 'Owner',
+  hasValue: false,
+  onClear: jest.fn(),
+  children: <div data-testid="filter-content">Filter content</div>,
+};
+
+beforeEach(() => {
+  jest.clearAllMocks();
+});
+
+test('renders the label', () => {
+  render(<CompactFilterTrigger {...defaultProps} />);
+  expect(screen.getByText('Owner')).toBeInTheDocument();
+});
+
+test('renders as inactive pill with down chevron when hasValue is false', () => {
+  render(<CompactFilterTrigger {...defaultProps} />);
+  const pill = screen.getByTestId('compact-filter-pill');
+  expect(pill).toBeInTheDocument();
+});
+
+test('renders active state with close icon when hasValue is true', () => {
+  render(<CompactFilterTrigger {...defaultProps} hasValue />);
+  expect(screen.getByRole('button', { name: /close/i })).toBeInTheDocument();
+});
+
+test('toggles aria-expanded when pill is clicked', async () => {
+  render(<CompactFilterTrigger {...defaultProps} />);
+  const pill = screen.getByTestId('compact-filter-pill');
+  expect(pill).toHaveAttribute('aria-expanded', 'false');
+  await userEvent.click(pill);
+  expect(pill).toHaveAttribute('aria-expanded', 'true');
+});
+
+test('calls onClear when clear icon is clicked', async () => {
+  const onClear = jest.fn();
+  render(<CompactFilterTrigger {...defaultProps} hasValue onClear={onClear} />);
+  const closeIcon = screen.getByRole('button', { name: /close/i });
+  await userEvent.click(closeIcon);
+  expect(onClear).toHaveBeenCalledTimes(1);
+});
+
+test('does not render tooltip wrapper when tooltipTitle is absent', () => {
+  const { container } = render(<CompactFilterTrigger {...defaultProps} />);
+  // No ant-tooltip-open class expected when no tooltip
+  expect(container.querySelector('.ant-tooltip')).not.toBeInTheDocument();
+});
+
+test('shows active state indicators when hasValue and tooltipTitle are set', () => {
+  render(
+    <CompactFilterTrigger
+      {...defaultProps}
+      hasValue
+      tooltipTitle="Some Owner"
+    />,
+  );
+  // Active pill: close icon visible, aria-expanded starts closed
+  expect(screen.getByRole('button', { name: /close/i })).toBeInTheDocument();
+  expect(screen.getByTestId('compact-filter-pill')).toHaveAttribute(
+    'aria-expanded',
+    'false',
+  );
+});
+
+test('injects isOpen and onClose props into child element when dropdown opens', async () => {
+  const RecordingChild = jest.fn(() => (
+    <div data-testid="recording-child">content</div>
+  ));
+  render(
+    <CompactFilterTrigger {...defaultProps}>
+      <RecordingChild />
+    </CompactFilterTrigger>,
+  );
+  const pill = screen.getByTestId('compact-filter-pill');
+  await userEvent.click(pill);
+  // After opening, the child should receive isOpen=true and an onClose function
+  expect(RecordingChild).toHaveBeenLastCalledWith(
+    expect.objectContaining({ isOpen: true, onClose: expect.any(Function) }),
+    expect.anything(),
+  );
+});
+
+test('sets aria-haspopup to listbox by default', () => {
+  render(<CompactFilterTrigger {...defaultProps} />);
+  const pill = screen.getByTestId('compact-filter-pill');
+  expect(pill).toHaveAttribute('aria-haspopup', 'listbox');
+});
+
+test('sets aria-haspopup to dialog when popupType is dialog', () => {
+  render(<CompactFilterTrigger {...defaultProps} popupType="dialog" />);
+  const pill = screen.getByTestId('compact-filter-pill');
+  expect(pill).toHaveAttribute('aria-haspopup', 'dialog');
+});
+
+test('closing dropdown resets aria-expanded to false', async () => {
+  render(<CompactFilterTrigger {...defaultProps} />);
+  const pill = screen.getByTestId('compact-filter-pill');
+  await userEvent.click(pill);
+  expect(pill).toHaveAttribute('aria-expanded', 'true');
+  await userEvent.click(pill);
+  expect(pill).toHaveAttribute('aria-expanded', 'false');
+});

superset-frontend/src/components/ListView/Filters/CompactFilterTrigger.tsx

@@ -0,0 +1,163 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React, { useEffect, useState, type ReactNode, type MouseEvent } from 'react';
+import { useTheme, styled, css } from '@apache-superset/core/theme';
+import { Dropdown, Tooltip, Icons } from '@superset-ui/core/components';
+
+type FilterPanelInjectedProps = {
+  onClose?: () => void;
+  isOpen?: boolean;
+};
+
+interface CompactFilterTriggerProps {
+  label: ReactNode;
+  hasValue: boolean;
+  onClear: () => void;
+  children: ReactNode;
+  /** Shown as a hover tooltip when a value is selected (e.g. the selected label). */
+  tooltipTitle?: string;
+  /** ARIA popup role for the trigger button. Use 'listbox' for option panels,
+   *  'dialog' for form panels (date range, numerical range). */
+  popupType?: 'listbox' | 'dialog';
+}
+
+const FilterPill = styled.button<{ $active: boolean }>`
+  ${({ theme, $active }) => css`
+    display: inline-flex;
+    align-items: center;
+    gap: ${theme.sizeUnit}px;
+    height: ${theme.controlHeight}px;
+    padding: 0 ${theme.sizeUnit * 3}px;
+    border-radius: ${theme.borderRadius}px;
+    border: 1px solid ${$active ? theme.colorPrimary : theme.colorBorder};
+    background: ${$active ? theme.colorPrimaryBg : theme.colorBgContainer};
+    color: ${$active ? theme.colorPrimary : theme.colorText};
+    font-size: ${theme.fontSizeSM}px;
+    font-weight: ${$active ? 600 : 400};
+    cursor: pointer;
+    white-space: nowrap;
+    transition:
+      border-color 0.2s,
+      background 0.2s,
+      color 0.2s;
+
+    &:hover {
+      border-color: ${theme.colorPrimary};
+      background: ${$active ? theme.colorPrimaryBgHover : theme.colorFillAlter};
+    }
+
+    &:focus-visible {
+      outline: 2px solid ${theme.colorPrimary};
+      outline-offset: 2px;
+    }
+  `}
+`;
+
+const ActiveDot = styled.span`
+  ${({ theme }) => css`
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: ${theme.colorPrimary};
+    flex-shrink: 0;
+  `}
+`;
+
+export default function CompactFilterTrigger({
+  label,
+  hasValue,
+  onClear,
+  children,
+  tooltipTitle,
+  popupType = 'listbox',
+}: CompactFilterTriggerProps) {
+  const [open, setOpen] = useState(false);
+  const theme = useTheme();
+
+  // Close dropdown on window resize — AntD Dropdown doesn't reposition
+  // itself on resize so the panel ends up detached from the pill.
+  useEffect(() => {
+    if (!open) return;
+    const handleResize = () => setOpen(false);
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, [open]);
+
+  const handleClear = (e: MouseEvent) => {
+    e.stopPropagation();
+    onClear();
+    setOpen(false);
+  };
+
+  const pill = (
+    <Tooltip
+      title={hasValue && !open ? tooltipTitle : undefined}
+      mouseEnterDelay={0.5}
+    >
+      <FilterPill
+        $active={hasValue}
+        type="button"
+        data-test="compact-filter-pill"
+        aria-haspopup={popupType}
+        aria-expanded={open}
+        aria-label={typeof label === 'string' ? label : undefined}
+      >
+        {hasValue && <ActiveDot />}
+        <span>{label}</span>
+        {hasValue ? (
+          <Icons.CloseOutlined
+            iconSize="xs"
+            iconColor={theme.colorPrimary}
+            onClick={handleClear}
+          />
+        ) : (
+          <Icons.DownOutlined
+            iconSize="xs"
+            iconColor={theme.colorTextSecondary}
+          />
+        )}
+      </FilterPill>
+    </Tooltip>
+  );
+
+  return (
+    // destroyPopupOnHide intentionally omitted: keeping the popup mounted
+    // preserves filter component refs so external clearFilters() calls can
+    // reach the panel instance after it has been opened at least once.
+    <Dropdown
+      open={open}
+      onOpenChange={setOpen}
+      trigger={['click']}
+      popupRender={() =>
+        React.isValidElement(children)
+          ? React.cloneElement(
+              children as React.ReactElement<FilterPanelInjectedProps>,
+              {
+                onClose: () => setOpen(false),
+                isOpen: open,
+              },
+            )
+          : (children as React.ReactElement)
+      }
+      placement="bottomLeft"
+    >
+      {pill}
+    </Dropdown>
+  );
+}

superset-frontend/src/components/ListView/Filters/CompactSelectPanel.test.tsx

@@ -0,0 +1,329 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { createRef, act } from 'react';
+import { render, screen, waitFor } from 'spec/helpers/testing-library';
+import userEvent from '@testing-library/user-event';
+import CompactSelectPanel from './CompactSelectPanel';
+import type { FilterHandler } from './types';
+
+const SMALL_SELECTS = [
+  { label: 'Alice', value: 1 },
+  { label: 'Bob', value: 2 },
+  { label: 'Charlie', value: 3 },
+];
+
+const LARGE_SELECTS = [
+  { label: 'Alice', value: 1 },
+  { label: 'Bob', value: 2 },
+  { label: 'Charlie', value: 3 },
+  { label: 'David', value: 4 },
+  { label: 'Eve', value: 5 },
+  { label: 'Frank', value: 6 },
+  { label: 'Grace', value: 7 },
+];
+
+beforeEach(() => {
+  jest.clearAllMocks();
+});
+
+test('renders options from selects prop', () => {
+  render(
+    <CompactSelectPanel
+      selects={SMALL_SELECTS}
+      value={undefined}
+      onSelect={jest.fn()}
+    />,
+  );
+  expect(screen.getByText('Alice')).toBeInTheDocument();
+  expect(screen.getByText('Bob')).toBeInTheDocument();
+  expect(screen.getByText('Charlie')).toBeInTheDocument();
+});
+
+test('hides search input when selects.length is 6 or fewer', () => {
+  render(
+    <CompactSelectPanel
+      selects={SMALL_SELECTS}
+      value={undefined}
+      onSelect={jest.fn()}
+    />,
+  );
+  expect(screen.queryByPlaceholderText('Search')).not.toBeInTheDocument();
+});
+
+test('shows search input when selects.length exceeds 6', () => {
+  render(
+    <CompactSelectPanel
+      selects={LARGE_SELECTS}
+      value={undefined}
+      onSelect={jest.fn()}
+    />,
+  );
+  expect(screen.getByPlaceholderText('Search')).toBeInTheDocument();
+});
+
+test('shows search input when fetchSelects is provided', () => {
+  const fetchSelects = jest.fn().mockResolvedValue({ data: [], totalCount: 0 });
+  render(
+    <CompactSelectPanel
+      fetchSelects={fetchSelects}
+      value={undefined}
+      onSelect={jest.fn()}
+    />,
+  );
+  expect(screen.getByPlaceholderText('Search')).toBeInTheDocument();
+});
+
+test('filters static options by search term', async () => {
+  render(
+    <CompactSelectPanel
+      selects={LARGE_SELECTS}
+      value={undefined}
+      onSelect={jest.fn()}
+    />,
+  );
+  await userEvent.type(screen.getByPlaceholderText('Search'), 'ali');
+  expect(screen.getByText('Alice')).toBeInTheDocument();
+  expect(screen.queryByText('Bob')).not.toBeInTheDocument();
+});
+
+test('calls onSelect with normalized option when an option is clicked', async () => {
+  const onSelect = jest.fn();
+  render(
+    <CompactSelectPanel
+      selects={SMALL_SELECTS}
+      value={undefined}
+      onSelect={onSelect}
+    />,
+  );
+  await userEvent.click(screen.getByText('Alice'));
+  expect(onSelect).toHaveBeenCalledWith({ label: 'Alice', value: 1 }, false);
+});
+
+test('calls onSelect with undefined when same option is clicked twice (deselect)', async () => {
+  const onSelect = jest.fn();
+  render(
+    <CompactSelectPanel
+      selects={SMALL_SELECTS}
+      value={{ label: 'Alice', value: 1 }}
+      onSelect={onSelect}
+    />,
+  );
+  await userEvent.click(screen.getByText('Alice'));
+  expect(onSelect).toHaveBeenCalledWith(undefined, true);
+});
+
+test('shows checkmark icon on selected option', () => {
+  render(
+    <CompactSelectPanel
+      selects={SMALL_SELECTS}
+      value={{ label: 'Alice', value: 1 }}
+      onSelect={jest.fn()}
+    />,
+  );
+  const aliceOption = screen
+    .getByText('Alice')
+    .closest('[role="option"]') as HTMLElement;
+  expect(aliceOption).toHaveAttribute('aria-selected', 'true');
+});
+
+test('unselected options have aria-selected false', () => {
+  render(
+    <CompactSelectPanel
+      selects={SMALL_SELECTS}
+      value={{ label: 'Alice', value: 1 }}
+      onSelect={jest.fn()}
+    />,
+  );
+  const bobOption = screen
+    .getByText('Bob')
+    .closest('[role="option"]') as HTMLElement;
+  expect(bobOption).toHaveAttribute('aria-selected', 'false');
+});
+
+test('calls onClose after a selection is made', async () => {
+  const onClose = jest.fn();
+  render(
+    <CompactSelectPanel
+      selects={SMALL_SELECTS}
+      value={undefined}
+      onSelect={jest.fn()}
+      onClose={onClose}
+    />,
+  );
+  await userEvent.click(screen.getByText('Alice'));
+  expect(onClose).toHaveBeenCalledTimes(1);
+});
+
+test('clearFilter via ref resets selection and calls onSelect(undefined, true)', () => {
+  const onSelect = jest.fn();
+  const ref = createRef<FilterHandler>();
+  render(
+    <CompactSelectPanel
+      ref={ref}
+      selects={SMALL_SELECTS}
+      value={{ label: 'Alice', value: 1 }}
+      onSelect={onSelect}
+    />,
+  );
+  expect(screen.getByText('Alice').closest('[role="option"]')).toHaveAttribute(
+    'aria-selected',
+    'true',
+  );
+
+  act(() => {
+    ref.current?.clearFilter();
+  });
+
+  expect(onSelect).toHaveBeenCalledWith(undefined, true);
+  expect(screen.getByText('Alice').closest('[role="option"]')).toHaveAttribute(
+    'aria-selected',
+    'false',
+  );
+});
+
+test('shows Loading text when loading prop is true', () => {
+  render(
+    <CompactSelectPanel
+      selects={SMALL_SELECTS}
+      value={undefined}
+      onSelect={jest.fn()}
+      loading
+    />,
+  );
+  expect(screen.getByText('Loading...')).toBeInTheDocument();
+});
+
+test('shows No results when displayOptions is empty', () => {
+  render(
+    <CompactSelectPanel selects={[]} value={undefined} onSelect={jest.fn()} />,
+  );
+  expect(screen.getByText('No results')).toBeInTheDocument();
+});
+
+test('renders options list with listbox role and accessible label', () => {
+  render(
+    <CompactSelectPanel
+      selects={SMALL_SELECTS}
+      value={undefined}
+      onSelect={jest.fn()}
+    />,
+  );
+  const listbox = screen.getByRole('listbox');
+  expect(listbox).toBeInTheDocument();
+  expect(listbox).toHaveAttribute('aria-label', 'Filter options');
+});
+
+test('option items have option role', () => {
+  render(
+    <CompactSelectPanel
+      selects={SMALL_SELECTS}
+      value={undefined}
+      onSelect={jest.fn()}
+    />,
+  );
+  const options = screen.getAllByRole('option');
+  expect(options).toHaveLength(3);
+});
+
+test('fetches and displays remote options via fetchSelects on mount', async () => {
+  const fetchSelects = jest.fn().mockResolvedValue({
+    data: [{ label: 'Remote User', value: 99 }],
+    totalCount: 1,
+  });
+  render(
+    <CompactSelectPanel
+      fetchSelects={fetchSelects}
+      value={undefined}
+      onSelect={jest.fn()}
+    />,
+  );
+  expect(screen.getByText('Loading...')).toBeInTheDocument();
+  await waitFor(() => {
+    expect(screen.getByText('Remote User')).toBeInTheDocument();
+  });
+  expect(fetchSelects).toHaveBeenCalledWith('', 0, 50);
+});
+
+test('shows No results when fetchSelects returns empty data', async () => {
+  const fetchSelects = jest.fn().mockResolvedValue({ data: [], totalCount: 0 });
+  render(
+    <CompactSelectPanel
+      fetchSelects={fetchSelects}
+      value={undefined}
+      onSelect={jest.fn()}
+    />,
+  );
+  await waitFor(() => {
+    expect(screen.getByText('No results')).toBeInTheDocument();
+  });
+});
+
+test('shows No results when fetchSelects rejects', async () => {
+  const fetchSelects = jest.fn().mockRejectedValue(new Error('network error'));
+  render(
+    <CompactSelectPanel
+      fetchSelects={fetchSelects}
+      value={undefined}
+      onSelect={jest.fn()}
+    />,
+  );
+  await waitFor(() => {
+    expect(screen.getByText('No results')).toBeInTheDocument();
+  });
+});
+
+test('selects option via keyboard Enter key', async () => {
+  const onSelect = jest.fn();
+  render(
+    <CompactSelectPanel
+      selects={SMALL_SELECTS}
+      value={undefined}
+      onSelect={onSelect}
+    />,
+  );
+  const aliceOption = screen.getByText('Alice').closest('[role="option"]')!;
+  await userEvent.type(aliceOption, '{Enter}');
+  expect(onSelect).toHaveBeenCalledWith({ label: 'Alice', value: 1 }, false);
+});
+
+test('syncs selected state when external value prop changes', () => {
+  const { rerender } = render(
+    <CompactSelectPanel
+      selects={SMALL_SELECTS}
+      value={{ label: 'Alice', value: 1 }}
+      onSelect={jest.fn()}
+    />,
+  );
+  expect(screen.getByText('Alice').closest('[role="option"]')).toHaveAttribute(
+    'aria-selected',
+    'true',
+  );
+
+  rerender(
+    <CompactSelectPanel
+      selects={SMALL_SELECTS}
+      value={undefined}
+      onSelect={jest.fn()}
+    />,
+  );
+  expect(screen.getByText('Alice').closest('[role="option"]')).toHaveAttribute(
+    'aria-selected',
+    'false',
+  );
+});

superset-frontend/src/components/ListView/Filters/CompactSelectPanel.tsx

@@ -0,0 +1,312 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import {
+  forwardRef,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+  useEffect,
+  type RefObject,
+} from 'react';
+import { debounce } from 'lodash';
+import { t } from '@apache-superset/core/translation';
+import { useTheme, styled, css } from '@apache-superset/core/theme';
+import {
+  Icons,
+  Input,
+  Constants,
+  type InputRef,
+} from '@superset-ui/core/components';
+import type { SelectOption, ListViewFilter as Filter } from '../types';
+import type { FilterHandler } from './types';
+
+interface CompactSelectPanelProps {
+  selects?: Filter['selects'];
+  fetchSelects?: Filter['fetchSelects'];
+  value?: SelectOption;
+  onSelect: (option: SelectOption | undefined, isClear?: boolean) => void;
+  onClose?: () => void;
+  /** Injected by CompactFilterTrigger via cloneElement — true when dropdown is open */
+  isOpen?: boolean;
+  /** External loading state from filter config */
+  loading?: boolean;
+}
+
+const PanelContainer = styled.div`
+  ${({ theme }) => css`
+    min-width: 220px;
+    max-width: 320px;
+    max-height: 320px;
+    display: flex;
+    flex-direction: column;
+    border-radius: ${theme.borderRadiusLG}px;
+    background: ${theme.colorBgElevated};
+    box-shadow: ${theme.boxShadowSecondary};
+    padding: 0 0 ${theme.paddingXXS}px;
+  `}
+`;
+
+const SearchRow = styled.div`
+  ${({ theme }) => css`
+    padding: ${theme.sizeUnit * 2}px ${theme.sizeUnit * 2}px
+      ${theme.paddingXXS}px;
+  `}
+`;
+
+const OptionList = styled.ul`
+  ${({ theme }) => css`
+    margin: 0;
+    padding: ${theme.paddingXXS}px 0;
+    overflow-y: auto;
+    flex: 1;
+    list-style: none;
+  `}
+`;
+
+const OptionItem = styled.li<{ $active: boolean }>`
+  ${({ theme, $active }) => css`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: ${(theme.controlHeight - theme.fontSize * theme.lineHeight) /
+      2}px ${theme.controlPaddingHorizontal}px;
+    line-height: ${theme.lineHeight};
+    cursor: pointer;
+    font-size: ${theme.fontSize}px;
+    color: ${theme.colorText};
+    border-radius: ${theme.borderRadiusSM}px;
+    background: ${$active ? theme.colorPrimaryBg : 'transparent'};
+    transition: background 0.15s;
+
+    &:hover {
+      background: ${$active
+        ? theme.colorPrimaryBgHover
+        : theme.colorFillTertiary};
+      outline: 2px solid ${theme.colorPrimary};
+      outline-offset: -2px;
+    }
+  `}
+`;
+
+const OptionLabel = styled.span`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 240px;
+`;
+
+const StatusText = styled.div`
+  ${({ theme }) => css`
+    padding: ${theme.sizeUnit * 2}px ${theme.sizeUnit * 3}px;
+    text-align: center;
+    color: ${theme.colorTextDisabled};
+    font-size: ${theme.fontSizeSM}px;
+  `}
+`;
+
+function CompactSelectPanel(
+  {
+    selects = [],
+    fetchSelects,
+    value,
+    onSelect,
+    onClose,
+    isOpen,
+    loading: externalLoading,
+  }: CompactSelectPanelProps,
+  ref: RefObject<FilterHandler>,
+) {
+  const theme = useTheme();
+  const inputRef = useRef<InputRef>(null);
+  const [search, setSearch] = useState('');
+  const [debouncedSearch, setDebouncedSearch] = useState('');
+  const [remoteOptions, setRemoteOptions] = useState<SelectOption[]>([]);
+  const [internalLoading, setInternalLoading] = useState(false);
+  const [selectedOption, setSelectedOption] = useState<
+    SelectOption | undefined
+  >(value);
+
+  const isLoading = externalLoading || internalLoading;
+
+  const debouncedSetSearch = useMemo(
+    () => debounce(setDebouncedSearch, Constants.FAST_DEBOUNCE),
+    [],
+  );
+
+  useEffect(
+    () => () => {
+      debouncedSetSearch.cancel();
+    },
+    [debouncedSetSearch],
+  );
+
+  // Sync selected state when external value changes (e.g. clearFilters called from parent)
+  useEffect(() => {
+    setSelectedOption(value);
+  }, [value]);
+
+  // Focus search input when dropdown opens; reset search when it closes
+  useEffect(() => {
+    let timeoutId: ReturnType<typeof setTimeout>;
+    if (isOpen) {
+      timeoutId = setTimeout(() => {
+        inputRef.current?.input?.focus({ preventScroll: true });
+      }, 100);
+    } else {
+      setSearch('');
+      setDebouncedSearch('');
+    }
+    return () => {
+      if (timeoutId) clearTimeout(timeoutId);
+    };
+  }, [isOpen]);
+
+  // Fetch remote options when debounced search changes
+  useEffect(() => {
+    if (!fetchSelects) return;
+    let cancelled = false;
+    setInternalLoading(true);
+    fetchSelects(debouncedSearch, 0, 50)
+      .then(result => {
+        if (!cancelled) setRemoteOptions(result?.data ?? []);
+      })
+      .catch(() => {
+        if (!cancelled) setRemoteOptions([]);
+      })
+      .finally(() => {
+        if (!cancelled) setInternalLoading(false);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [debouncedSearch, fetchSelects]);
+
+  useImperativeHandle(ref, () => ({
+    clearFilter: () => {
+      setSelectedOption(undefined);
+      setSearch('');
+      setDebouncedSearch('');
+      onSelect(undefined, true);
+    },
+  }));
+
+  const displayOptions = (
+    fetchSelects
+      ? remoteOptions
+      : selects.filter(o => {
+          const label = typeof o.label === 'string' ? o.label : String(o.value);
+          return label.toLowerCase().includes(search.toLowerCase());
+        })
+  ).filter(o => o != null);
+
+  // Show search for async selects or large static lists
+  const showSearch = !!fetchSelects || selects.length > 6;
+
+  // displayText is the actual rendered text of the clicked list item, captured
+  // from the DOM via e.currentTarget.textContent. This is more reliable than
+  // reading opt.label, which may be a styled ReactNode (e.g. for owner options)
+  // rather than a plain string — causing tooltip to show the raw value instead.
+  const handleSelect = (opt: SelectOption, displayText?: string) => {
+    const isDeselect = selectedOption?.value === opt.value;
+    // Normalize to a plain object so the value can be safely serialized to
+    // URL query params without circular-reference errors from emotion metadata
+    // on styled ReactNode labels.
+    const next = isDeselect
+      ? undefined
+      : {
+          label:
+            displayText ||
+            (typeof opt.label === 'string'
+              ? opt.label
+              : String(opt.value ?? '')),
+          value: opt.value,
+        };
+    setSelectedOption(next);
+    onSelect(next, isDeselect);
+    onClose?.();
+  };
+
+  return (
+    <PanelContainer>
+      {showSearch && (
+        <SearchRow>
+          <Input
+            ref={inputRef}
+            prefix={
+              <Icons.SearchOutlined iconSize="l" iconColor={theme.colorIcon} />
+            }
+            placeholder={t('Search')}
+            value={search}
+            onChange={e => {
+              setSearch(e.target.value);
+              debouncedSetSearch(e.target.value);
+            }}
+            allowClear
+            css={css`
+              width: 100%;
+              box-shadow: none;
+            `}
+          />
+        </SearchRow>
+      )}
+      <OptionList role="listbox" aria-label={t('Filter options')}>
+        {isLoading ? (
+          <StatusText>{t('Loading...')}</StatusText>
+        ) : displayOptions.length === 0 ? (
+          <StatusText>{t('No results')}</StatusText>
+        ) : (
+          displayOptions.map(opt => {
+            const isActive = selectedOption?.value === opt.value;
+            const getDisplayText = (el: HTMLElement) =>
+              el.textContent?.trim() || undefined;
+            return (
+              <OptionItem
+                key={opt.value}
+                $active={isActive}
+                role="option"
+                aria-selected={isActive}
+                tabIndex={0}
+                onClick={e =>
+                  handleSelect(opt, getDisplayText(e.currentTarget))
+                }
+                onKeyDown={e => {
+                  if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    handleSelect(opt, getDisplayText(e.currentTarget));
+                  }
+                }}
+              >
+                <OptionLabel>{opt.label}</OptionLabel>
+                {isActive && (
+                  <Icons.CheckOutlined
+                    iconSize="s"
+                    iconColor={theme.colorPrimary}
+                  />
+                )}
+              </OptionItem>
+            );
+          })
+        )}
+      </OptionList>
+    </PanelContainer>
+  );
+}
+
+export default forwardRef(CompactSelectPanel);

superset-frontend/src/components/ListView/Filters/FilterPopoverContent.test.tsx

@@ -0,0 +1,80 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { render, screen } from 'spec/helpers/testing-library';
+import userEvent from '@testing-library/user-event';
+import FilterPopoverContent from './FilterPopoverContent';
+
+beforeEach(() => {
+  jest.clearAllMocks();
+});
+
+test('renders children inside the wrapper', () => {
+  render(
+    <FilterPopoverContent>
+      <div data-test="inner-content">Inner content</div>
+    </FilterPopoverContent>,
+  );
+  expect(screen.getByTestId('inner-content')).toBeInTheDocument();
+});
+
+test('renders the Apply button', () => {
+  render(
+    <FilterPopoverContent>
+      <div>content</div>
+    </FilterPopoverContent>,
+  );
+  expect(screen.getByRole('button', { name: /apply/i })).toBeInTheDocument();
+});
+
+test('calls onClose when Apply button is clicked', async () => {
+  const onClose = jest.fn();
+  render(
+    <FilterPopoverContent onClose={onClose}>
+      <div>content</div>
+    </FilterPopoverContent>,
+  );
+  await userEvent.click(screen.getByRole('button', { name: /apply/i }));
+  expect(onClose).toHaveBeenCalledTimes(1);
+});
+
+test('renders without onClose and clicking Apply does not throw', async () => {
+  render(
+    <FilterPopoverContent>
+      <div>content</div>
+    </FilterPopoverContent>,
+  );
+  // No onClose prop — click should not throw
+  await userEvent.click(screen.getByRole('button', { name: /apply/i }));
+  expect(screen.getByRole('button', { name: /apply/i })).toBeInTheDocument();
+});
+
+test('visually hides label elements so pills remain accessible', () => {
+  render(
+    <FilterPopoverContent>
+      <label htmlFor="input">Date range</label>
+      <input id="input" />
+    </FilterPopoverContent>,
+  );
+  const label = screen.getByText('Date range');
+  // The label must be in the DOM for screen readers but visually hidden via CSS
+  expect(label).toBeInTheDocument();
+  const computedStyle = window.getComputedStyle(label);
+  // clip / overflow hidden pattern applied; position absolute is the key indicator
+  expect(computedStyle.position).toBe('absolute');
+});

superset-frontend/src/components/ListView/Filters/FilterPopoverContent.tsx

@@ -0,0 +1,74 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import type { ReactNode } from 'react';
+import { t } from '@apache-superset/core/translation';
+import { styled, css } from '@apache-superset/core/theme';
+import { Button } from '@superset-ui/core/components';
+
+interface FilterPopoverContentProps {
+  children: ReactNode;
+  /** Injected by CompactFilterTrigger via cloneElement */
+  onClose?: () => void;
+  /** Injected by CompactFilterTrigger via cloneElement — unused but accepted to avoid React unknown-prop warnings */
+  isOpen?: boolean;
+}
+
+const Wrapper = styled.div`
+  ${({ theme }) => css`
+    padding: ${theme.sizeUnit * 2}px;
+    display: flex;
+    flex-direction: column;
+    gap: ${theme.sizeUnit * 2}px;
+
+    /* Visually hide the redundant label — the pill already shows it, but keep it
+       accessible to screen readers so filter inputs have a named context. */
+    label {
+      position: absolute !important;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border: 0;
+    }
+  `}
+`;
+
+const Footer = styled.div`
+  display: flex;
+  justify-content: flex-end;
+`;
+
+export default function FilterPopoverContent({
+  children,
+  onClose,
+}: FilterPopoverContentProps) {
+  return (
+    <Wrapper>
+      {children}
+      <Footer>
+        <Button size="small" buttonStyle="primary" onClick={onClose}>
+          {t('Apply')}
+        </Button>
+      </Footer>
+    </Wrapper>
+  );
+}

superset-frontend/src/components/ListView/Filters/index.test.tsx

@@ -97,6 +97,169 @@ test('search filter passes autoComplete prop correctly', () => {
   expect(input.autocomplete).toBe('new-password');
 });
 
+test('renders a compact pill trigger for select filters', () => {
+  const filters = [
+    {
+      Header: 'Owner',
+      key: 'owner',
+      id: 'owner',
+      input: 'select' as const,
+      operator: ListViewFilterOperator.RelationOneMany,
+      selects: [
+        { label: 'Alice', value: 1 },
+        { label: 'Bob', value: 2 },
+      ],
+    },
+  ];
+
+  render(
+    <UIFilters
+      filters={filters}
+      internalFilters={[]}
+      updateFilterValue={mockUpdateFilterValue}
+    />,
+  );
+
+  expect(screen.getByTestId('compact-filter-pill')).toBeInTheDocument();
+  expect(screen.getByText('Owner')).toBeInTheDocument();
+});
+
+test('select pill shows active state when a value is selected', () => {
+  const filters = [
+    {
+      Header: 'Owner',
+      key: 'owner',
+      id: 'owner',
+      input: 'select' as const,
+      operator: ListViewFilterOperator.RelationOneMany,
+      selects: [{ label: 'Alice', value: 1 }],
+    },
+  ];
+
+  render(
+    <UIFilters
+      filters={filters}
+      internalFilters={[
+        {
+          id: 'owner',
+          operator: ListViewFilterOperator.RelationOneMany,
+          value: { label: 'Alice', value: 1 },
+        },
+      ]}
+      updateFilterValue={mockUpdateFilterValue}
+    />,
+  );
+
+  // When a value is present, the clear (close) icon should be shown
+  expect(screen.getByRole('button', { name: /close/i })).toBeInTheDocument();
+});
+
+test('datetime_range filter renders as CompactFilterTrigger with dialog aria-haspopup', () => {
+  const filters = [
+    {
+      Header: 'Time range',
+      key: 'time_range',
+      id: 'time_range',
+      input: 'datetime_range' as const,
+      operator: ListViewFilterOperator.Between,
+    },
+  ];
+
+  render(
+    <UIFilters
+      filters={filters}
+      internalFilters={[]}
+      updateFilterValue={mockUpdateFilterValue}
+    />,
+  );
+
+  const pill = screen.getByTestId('compact-filter-pill');
+  expect(pill).toBeInTheDocument();
+  expect(pill).toHaveAttribute('aria-haspopup', 'dialog');
+  expect(screen.getByText('Time range')).toBeInTheDocument();
+});
+
+test('datetime_range pill shows active state when value is set', () => {
+  const filters = [
+    {
+      Header: 'Time range',
+      key: 'time_range',
+      id: 'time_range',
+      input: 'datetime_range' as const,
+      operator: ListViewFilterOperator.Between,
+    },
+  ];
+
+  render(
+    <UIFilters
+      filters={filters}
+      internalFilters={[
+        {
+          id: 'time_range',
+          operator: ListViewFilterOperator.Between,
+          value: ['2024-01-01', '2024-12-31'],
+        },
+      ]}
+      updateFilterValue={mockUpdateFilterValue}
+    />,
+  );
+
+  expect(screen.getByRole('button', { name: /close/i })).toBeInTheDocument();
+});
+
+test('numerical_range filter renders as CompactFilterTrigger with dialog aria-haspopup', () => {
+  const filters = [
+    {
+      Header: 'Age range',
+      key: 'age_range',
+      id: 'age_range',
+      input: 'numerical_range' as const,
+      operator: ListViewFilterOperator.Between,
+    },
+  ];
+
+  render(
+    <UIFilters
+      filters={filters}
+      internalFilters={[]}
+      updateFilterValue={mockUpdateFilterValue}
+    />,
+  );
+
+  const pill = screen.getByTestId('compact-filter-pill');
+  expect(pill).toBeInTheDocument();
+  expect(pill).toHaveAttribute('aria-haspopup', 'dialog');
+  expect(screen.getByText('Age range')).toBeInTheDocument();
+});
+
+test('numerical_range pill shows active state when value is set', () => {
+  const filters = [
+    {
+      Header: 'Age range',
+      key: 'age_range',
+      id: 'age_range',
+      input: 'numerical_range' as const,
+      operator: ListViewFilterOperator.Between,
+    },
+  ];
+
+  render(
+    <UIFilters
+      filters={filters}
+      internalFilters={[
+        {
+          id: 'age_range',
+          operator: ListViewFilterOperator.Between,
+          value: [18, 65],
+        },
+      ]}
+      updateFilterValue={mockUpdateFilterValue}
+    />,
+  );
+
+  expect(screen.getByRole('button', { name: /close/i })).toBeInTheDocument();
+});
+
 test('renders multiple search filters with different inputName values', () => {
   const filters = [
     {

superset-frontend/src/components/ListView/Filters/index.tsx

@@ -21,6 +21,7 @@ import {
   forwardRef,
   useImperativeHandle,
   useMemo,
+  useState,
   RefObject,
 } from 'react';
 
@@ -34,9 +35,11 @@ import type {
 } from '../types';
 import type { FilterHandler } from './types';
 import SearchFilter from './Search';
-import SelectFilter from './Select';
 import DateRangeFilter from './DateRange';
 import NumericalRangeFilter from './NumericalRange';
+import CompactFilterTrigger from './CompactFilterTrigger';
+import CompactSelectPanel from './CompactSelectPanel';
+import FilterPopoverContent from './FilterPopoverContent';
 
 interface UIFiltersProps {
   filters: Filters;
@@ -46,7 +49,10 @@ interface UIFiltersProps {
 
 function UIFilters(
   { filters, internalFilters = [], updateFilterValue }: UIFiltersProps,
-  ref: RefObject<{ clearFilters: () => void }>,
+  ref: RefObject<{
+    clearFilters: () => void;
+    clearFilterById: (id: string) => void;
+  }>,
 ) {
   const filterRefs = useMemo(
     () =>
@@ -54,16 +60,32 @@ function UIFilters(
     [filters.length],
   );
 
+  // Cache display labels for select filters so tooltip works after URL round-trip
+  // (URL serialization strips the label, leaving only the value).
+  const [tooltipLabels, setTooltipLabels] = useState<Record<number, string>>(
+    {},
+  );
+
   useImperativeHandle(ref, () => ({
     clearFilters: () => {
-      filterRefs.forEach((filter: any) => {
+      filterRefs.forEach((filter, index) => {
         filter.current?.clearFilter?.();
+        // Direct reset as safety net — ensures URL updates even if the ref
+        // is stale (e.g. filter value was hydrated from URL after page refresh).
+        updateFilterValue(index, undefined);
       });
+      setTooltipLabels({});
     },
     clearFilterById: (id: string) => {
       const index = filters.findIndex(f => f.id === id);
       if (index >= 0) {
         filterRefs[index]?.current?.clearFilter?.();
+        updateFilterValue(index, undefined);
+        setTooltipLabels(prev => {
+          const next = { ...prev };
+          delete next[index];
+          return next;
+        });
       }
     },
   }));
@@ -78,8 +100,6 @@ function UIFilters(
             key,
             id,
             input,
-            optionFilterProps,
-            paginate,
             selects,
             toolTipDescription,
             onFilterUpdate,
@@ -87,7 +107,6 @@ function UIFilters(
             dateFilterValueType,
             min,
             max,
-            popupStyle,
             autoComplete,
             inputName,
           },
@@ -95,33 +114,54 @@ function UIFilters(
         ) => {
           const initialValue = internalFilters?.[index]?.value;
           if (input === 'select') {
+            const selectValue = initialValue as SelectOption | undefined;
+            // Use cached label — URL round-trip strips the label from internalFilters,
+            // leaving only the value (e.g. {value: 1} with no label field).
+            const tooltipTitle = !!selectValue
+              ? tooltipLabels[index]
+              : undefined;
             return (
-              <SelectFilter
-                ref={filterRefs[index]}
-                Header={Header}
-                fetchSelects={fetchSelects}
-                initialValue={initialValue}
+              <CompactFilterTrigger
                 key={key}
-                name={id}
-                onSelect={(
-                  option: SelectOption | undefined,
-                  isClear?: boolean,
-                ) => {
-                  if (onFilterUpdate) {
-                    // Filter change triggers both onChange AND onClear, only want to track onChange
-                    if (!isClear) {
+                label={Header}
+                hasValue={!!selectValue}
+                tooltipTitle={tooltipTitle}
+                onClear={() => {
+                  filterRefs[index]?.current?.clearFilter?.();
+                  updateFilterValue(index, undefined);
+                  setTooltipLabels(prev => {
+                    const next = { ...prev };
+                    delete next[index];
+                    return next;
+                  });
+                }}
+              >
+                <CompactSelectPanel
+                  ref={filterRefs[index]}
+                  selects={selects}
+                  fetchSelects={fetchSelects}
+                  value={initialValue as SelectOption | undefined}
+                  loading={loading ?? false}
+                  onSelect={(
+                    option: SelectOption | undefined,
+                    isClear?: boolean,
+                  ) => {
+                    if (option && !isClear) {
+                      setTooltipLabels(prev => ({
+                        ...prev,
+                        [index]:
+                          typeof option.label === 'string'
+                            ? option.label
+                            : String(option.value ?? ''),
+                      }));
+                    }
+                    if (onFilterUpdate && !isClear) {
                       onFilterUpdate(option);
                     }
-                  }
-
-                  updateFilterValue(index, option);
-                }}
-                optionFilterProps={optionFilterProps}
-                paginate={paginate}
-                selects={selects}
-                loading={loading ?? false}
-                dropdownStyle={popupStyle}
-              />
+                    updateFilterValue(index, option);
+                  }}
+                />
+              </CompactFilterTrigger>
             );
           }
           if (input === 'search' && typeof Header === 'string') {
@@ -145,30 +185,71 @@ function UIFilters(
             );
           }
           if (input === 'datetime_range') {
+            const hasDateValue =
+              Array.isArray(initialValue) && initialValue.some(Boolean);
+            const dateTooltip = hasDateValue
+              ? (initialValue as (string | number)[])
+                  .filter(Boolean)
+                  .join(' – ')
+              : undefined;
             return (
-              <DateRangeFilter
-                ref={filterRefs[index]}
-                Header={Header}
-                initialValue={initialValue}
+              <CompactFilterTrigger
                 key={key}
-                name={id}
-                onSubmit={value => updateFilterValue(index, value)}
-                dateFilterValueType={dateFilterValueType || 'unix'}
-              />
+                label={Header}
+                hasValue={hasDateValue}
+                tooltipTitle={dateTooltip}
+                popupType="dialog"
+                onClear={() => {
+                  filterRefs[index]?.current?.clearFilter?.();
+                  updateFilterValue(index, undefined);
+                }}
+              >
+                <FilterPopoverContent>
+                  <DateRangeFilter
+                    ref={filterRefs[index]}
+                    Header={Header}
+                    initialValue={initialValue}
+                    name={id}
+                    onSubmit={value => updateFilterValue(index, value)}
+                    dateFilterValueType={dateFilterValueType || 'unix'}
+                  />
+                </FilterPopoverContent>
+              </CompactFilterTrigger>
             );
           }
           if (input === 'numerical_range') {
+            const hasRangeValue =
+              Array.isArray(initialValue) &&
+              initialValue.some(v => v !== null && v !== undefined);
+            const rangeTooltip = hasRangeValue
+              ? (initialValue as (number | null | undefined)[])
+                  .filter(v => v !== null && v !== undefined)
+                  .join(' – ')
+              : undefined;
             return (
-              <NumericalRangeFilter
-                ref={filterRefs[index]}
-                Header={Header}
-                initialValue={initialValue}
-                min={min}
-                max={max}
+              <CompactFilterTrigger
                 key={key}
-                name={id}
-                onSubmit={value => updateFilterValue(index, value)}
-              />
+                label={Header}
+                hasValue={hasRangeValue}
+                tooltipTitle={rangeTooltip}
+                popupType="dialog"
+                onClear={() => {
+                  filterRefs[index]?.current?.clearFilter?.();
+                  updateFilterValue(index, undefined);
+                }}
+              >
+                <FilterPopoverContent>
+                  <NumericalRangeFilter
+                    ref={filterRefs[index]}
+                    Header={Header}
+                    initialValue={initialValue}
+                    min={min}
+                    max={max}
+                    name={id}
+                    onSubmit={value => updateFilterValue(index, value)}
+                  />
+                </FilterPopoverContent>
+              </CompactFilterTrigger>
             );
           }
           return null;

superset-frontend/src/components/ListView/ListView.test.tsx

@@ -301,15 +301,19 @@ describe('ListView', () => {
   });
 
   test('renders UI filters', () => {
-    const filterControls = screen.getAllByRole('combobox');
-    expect(filterControls).toHaveLength(2);
+    // select and datetime_range filters render as compact pill buttons;
+    // search filter renders as a text input
+    const filterPills = screen.getAllByTestId('compact-filter-pill');
+    expect(filterPills).toHaveLength(3); // ID, Age, Time
   });
 
   test('calls fetchData on filter', async () => {
-    // Handle select filter
-    const selectFilter = screen.getAllByRole('combobox')[0];
-    await userEvent.click(selectFilter);
-    const option = screen.getByText('foo');
+    // Click the ID compact pill to open its option panel
+    const idPill = screen.getByRole('button', { name: 'ID' });
+    await userEvent.click(idPill);
+
+    // Wait for and click the 'foo' option in the dropdown panel
+    const option = await screen.findByRole('option', { name: 'foo' });
     await userEvent.click(option);
 
     // Handle search filter

superset-frontend/src/components/ListView/ListView.tsx

@@ -65,13 +65,31 @@ const ListViewStyles = styled.div`
 
       .header {
         display: flex;
+        align-items: center;
         padding-bottom: ${theme.sizeUnit * 4}px;
 
         & .controls {
           display: flex;
           flex-wrap: wrap;
-          column-gap: ${theme.sizeUnit * 7}px;
-          row-gap: ${theme.sizeUnit * 4}px;
+          align-items: center;
+          column-gap: ${theme.sizeUnit * 2}px;
+          row-gap: ${theme.sizeUnit * 2}px;
+
+          [data-test='search-filter-container'] {
+            flex: 1;
+            min-width: ${theme.sizeUnit * 40}px;
+            width: auto;
+            height: ${theme.controlHeight}px;
+            justify-content: center;
+
+            label {
+              display: none;
+            }
+
+            .ant-input-affix-wrapper {
+              width: 100%;
+            }
+          }
         }
       }
 
@@ -167,7 +185,6 @@ const bulkSelectColumnConfig = {
 const ViewModeContainer = styled.div`
   ${({ theme }) => `
     padding-right: ${theme.sizeUnit * 4}px;
-    margin-top: ${theme.sizeUnit * 5 + 1}px;
     white-space: nowrap;
     display: inline-block;
 
@@ -192,6 +209,29 @@ const ViewModeContainer = styled.div`
   `}
 `;
 
+const ClearAllButton = styled.button`
+  ${({ theme }) => `
+    background: none;
+    border: none;
+    padding: 0 ${theme.sizeUnit}px;
+    color: ${theme.colorPrimary};
+    font-size: ${theme.fontSizeSM}px;
+    cursor: pointer;
+    white-space: nowrap;
+    line-height: ${theme.controlHeight}px;
+
+    &:hover:not(:disabled) {
+      color: ${theme.colorPrimaryHover};
+      text-decoration: underline;
+    }
+
+    &:disabled {
+      color: ${theme.colorTextDisabled};
+      cursor: not-allowed;
+    }
+  `}
+`;
+
 const EmptyWrapper = styled.div`
   ${({ theme }) => `
     padding: ${theme.sizeUnit * 40}px 0;
@@ -356,6 +396,14 @@ export function ListView<T extends object = any>({
     clearFilterById: (id: string) => void;
   }>(null);
 
+  const hasActiveFilters = internalFilters.some(f => {
+    if (f.value === null || f.value === undefined || f.value === '')
+      return false;
+    if (Array.isArray(f.value))
+      return f.value.some(v => v !== null && v !== undefined && v !== '');
+    return true;
+  });
+
   // Wire the optional external filtersRef to our internal filterControlsRef.
   // useLayoutEffect fires synchronously after DOM mutations, guaranteeing the
   // ref is populated before the first paint and after every update.
@@ -414,6 +462,23 @@ export function ListView<T extends object = any>({
                 updateFilterValue={applyFilterValue}
               />
             )}
+            {filterable && (
+              <Tooltip
+                title={
+                  !hasActiveFilters ? t('No filters applied') : undefined
+                }
+              >
+                <span>
+                  <ClearAllButton
+                    type="button"
+                    disabled={!hasActiveFilters}
+                    onClick={() => filterControlsRef.current?.clearFilters()}
+                  >
+                    {t('Clear all')}
+                  </ClearAllButton>
+                </span>
+              </Tooltip>
+            )}
             {viewMode === 'card' && cardSortSelectOptions && (
               <CardSortSelect
                 initialSort={sortBy}