@multiplatform.one/frappe-ui 7.34.4 → 7.36.0

package/src/list/FacetList.tsx

@@ -0,0 +1,172 @@
+import { Text, XStack, isWeb } from "@multiplatform.one/components";
+import {
+  ensureKeyboardModalityTracking,
+  keyboardFocusRingProps,
+  transitionProps,
+  useResolvedKnobs,
+  wasKeyboardFocus,
+} from "@multiplatform.one/theme";
+import { useRef, useState } from "react";
+import type { FacetRailOption } from "./FacetRail";
+
+export interface FacetListProps {
+  /** Names the radiogroup. */
+  label: string;
+  /** Active value, or "" for none. */
+  value: string;
+  options: readonly FacetRailOption[];
+  onChange: (value: string) => void;
+  /** Values per row; the clearing option ("") always takes a full row. */
+  columns?: 1 | 2;
+  testID?: string;
+}
+
+const pipSize = "$0.75";
+
+/**
+ * A single-select facet as a vertical list: a row per value with its hue
+ * pip and record count, the active row filled from its ramp. One tap
+ * narrows, a second tap on the active row clears. One tab stop: arrows,
+ * Home and End move and select like a radiogroup.
+ */
+export function FacetList({
+  label,
+  value,
+  options,
+  onChange,
+  columns = 1,
+  testID,
+}: FacetListProps) {
+  const { knobProps } = useResolvedKnobs();
+  const refs = useRef<Record<string, { focus?: () => void } | null>>({});
+  const [focusValue, setFocusValue] = useState<string | null>(null);
+  const [kbFocus, setKbFocus] = useState<string | null>(null);
+  if (isWeb) ensureKeyboardModalityTracking();
+  const anchor =
+    focusValue !== null && options.some((option) => option.value === focusValue)
+      ? focusValue
+      : value;
+
+  const select = (next: string) => {
+    setFocusValue(next);
+    onChange(next);
+    if (isWeb) requestAnimationFrame(() => refs.current[next]?.focus?.());
+  };
+  const move = (from: string, key: string) => {
+    if (options.length === 0) return false;
+    const index = Math.max(
+      0,
+      options.findIndex((option) => option.value === from),
+    );
+    const target =
+      key === "Home"
+        ? 0
+        : key === "End"
+          ? options.length - 1
+          : key === "ArrowDown"
+            ? (index + 1) % options.length
+            : key === "ArrowUp"
+              ? (index - 1 + options.length) % options.length
+              : -1;
+    if (target < 0) return false;
+    select(options[target].value);
+    return true;
+  };
+
+  return (
+    <XStack
+      role="radiogroup"
+      aria-label={label}
+      aria-orientation="vertical"
+      flexWrap="wrap"
+      rowGap="$0.5"
+      testID={testID}
+    >
+      {options.map((option) => {
+        const selected = option.value === value;
+        const hue = option.tint;
+        const fill = selected ? (hue ? `$${hue}4` : "$color4") : "transparent";
+        const hoverFill = selected ? fill : hue ? `$${hue}2` : "$color2";
+        const ink = selected ? "$color12" : "$color11";
+        return (
+          <XStack
+            key={option.value || "__all"}
+            ref={(node: unknown) => {
+              refs.current[option.value] = node as { focus?: () => void } | null;
+            }}
+            role="radio"
+            aria-checked={selected}
+            width={columns === 2 && option.value !== "" ? "50%" : "100%"}
+            {...(isWeb ? { tabIndex: option.value === anchor ? 0 : -1 } : undefined)}
+            {...knobProps.borderRadius}
+            borderWidth={0}
+            backgroundColor={fill as never}
+            hoverStyle={{ backgroundColor: hoverFill as never }}
+            pressStyle={{ backgroundColor: (hue ? `$${hue}4` : "$color4") as never }}
+            {...transitionProps(knobProps.transition)}
+            minHeight="$2.5"
+            paddingHorizontal="$2"
+            gap="$2"
+            alignItems="center"
+            cursor="pointer"
+            outlineWidth={0}
+            focusVisibleStyle={{ outlineWidth: 0 }}
+            {...(kbFocus === option.value ? keyboardFocusRingProps : undefined)}
+            onPress={() => onChange(selected && option.value !== "" ? "" : option.value)}
+            {...(isWeb
+              ? {
+                  onFocus: () => {
+                    setFocusValue(option.value);
+                    if (wasKeyboardFocus()) setKbFocus(option.value);
+                  },
+                  onBlur: () => setKbFocus((prev) => (prev === option.value ? null : prev)),
+                  onKeyDown: (event: { key?: string; preventDefault?: () => void }) => {
+                    if (event.key && move(option.value, event.key)) {
+                      event.preventDefault?.();
+                      return;
+                    }
+                    if (event.key === "Enter" || event.key === " ") {
+                      event.preventDefault?.();
+                      onChange(selected && option.value !== "" ? "" : option.value);
+                    }
+                  },
+                }
+              : undefined)}
+            testID={testID ? `${testID}-${option.value || "all"}` : undefined}
+          >
+            <XStack
+              width={pipSize}
+              height={pipSize}
+              borderRadius={1000}
+              backgroundColor={(hue ? `$${hue}9` : "transparent") as never}
+              flexShrink={0}
+              aria-hidden
+            />
+            <Text
+              {...knobProps.label}
+              flex={1}
+              numberOfLines={1}
+              fontWeight={selected ? "700" : "500"}
+              color={ink}
+              textTransform="capitalize"
+              userSelect="none"
+            >
+              {option.label}
+            </Text>
+            {typeof option.count === "number" ? (
+              <Text
+                {...knobProps.label}
+                fontWeight="600"
+                color={selected ? "$color11" : "$color10"}
+                userSelect="none"
+                data-facet-count=""
+              >
+                {option.count}
+              </Text>
+            ) : null}
+          </XStack>
+        );
+      })}
+    </XStack>
+  );
+}

package/src/list/FacetRail.spec.tsx

@@ -0,0 +1,61 @@
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import {
+  applyThemeScale,
+  createDefaultThemeConfig,
+  DEFAULT_SCALE_ID,
+  densePreset,
+  Surface,
+  sizeRecipeForToken,
+  sizeKeyBelow,
+} from "@multiplatform.one/theme";
+import { cleanup, fireEvent } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { FacetRail } from "./FacetRail";
+
+const config = createDefaultThemeConfig({ presets: { dense: densePreset } });
+afterEach(() => {
+  cleanup();
+  applyThemeScale(config.scales![DEFAULT_SCALE_ID]);
+});
+const options = [
+  { value: "", label: "All", count: 6 },
+  { value: "fire", label: "Fire", count: 2 },
+];
+
+describe("FacetRail chip recipes", () => {
+  for (const scaleId of [DEFAULT_SCALE_ID, "dense"]) {
+    for (const size of ["$true", "$3", "$5"] as const) {
+      it(`${scaleId} at ${size} paints one full step below its controls`, () => {
+        applyThemeScale(config.scales![scaleId]);
+        const token = sizeKeyBelow(size);
+        const recipe = sizeRecipeForToken(token, { family: "chip" });
+        const count = sizeRecipeForToken(sizeKeyBelow(token), { family: "chip" });
+        const result = renderWithProviders(
+          <Surface size={size}>
+            <FacetRail label="Type" value="" options={options} onChange={() => {}} />
+          </Surface>,
+        );
+        const frame = result.getByRole("radio", { name: "Fire 2" });
+        const style = getComputedStyle(frame);
+        expect(style.height).toBe(`${recipe.height}px`);
+        expect(style.paddingLeft).toBe(`${recipe.paddingHorizontal}px`);
+        expect(style.gap).toBe(`${recipe.gap}px`);
+        expect(getComputedStyle(result.getByText("Fire")).fontSize).toBe(`${recipe.fontSize}px`);
+        expect(getComputedStyle(result.getByText("2")).fontSize).toBe(`${count.fontSize}px`);
+      });
+    }
+  }
+
+  it("keeps selection, clearing and arrow-key navigation", () => {
+    const onChange = vi.fn();
+    const result = renderWithProviders(
+      <FacetRail label="Type" value="fire" options={options} onChange={onChange} />,
+    );
+    const fire = result.getByRole("radio", { name: "Fire 2" });
+    expect(fire.getAttribute("aria-checked")).toBe("true");
+    fireEvent.click(fire);
+    expect(onChange).toHaveBeenLastCalledWith("");
+    fireEvent.keyDown(fire, { key: "ArrowLeft" });
+    expect(onChange).toHaveBeenLastCalledWith("");
+  });
+});

package/src/list/FacetRail.tsx

@@ -3,6 +3,8 @@ import {
   ensureKeyboardModalityTracking,
   keyboardFocusRingProps,
   pressTargetHitSlop,
+  sizeKeyBelow,
+  sizeRecipeForToken,
   transitionProps,
   useResolvedKnobs,
   wasKeyboardFocus,
@@ -40,10 +42,8 @@ interface RailChipProps {
   register: (node: { focus?: () => void } | null) => void;
 }
 
-// Chips paint a notch under the ~40px toolbar controls; hitSlop restores the
+// Chips paint one full step under the toolbar controls; hitSlop restores the
 // 44px press target (DG-LAY-04, ViewSwitcher precedent).
-const chipVisualHeight = 38;
-const chipHitSlop = pressTargetHitSlop(chipVisualHeight);
 const pipSize = "$1";
 
 /**
@@ -63,6 +63,9 @@ function RailChip({
   register,
 }: RailChipProps) {
   const { knobProps } = useResolvedKnobs();
+  const chipToken = sizeKeyBelow(knobProps.sizeToken);
+  const chip = sizeRecipeForToken(chipToken, { family: "chip" });
+  const count = sizeRecipeForToken(sizeKeyBelow(chipToken), { family: "chip" });
   const [kbFocus, setKbFocus] = useState(false);
   if (isWeb) ensureKeyboardModalityTracking();
   const hue = option.tint;
@@ -82,16 +85,16 @@ function RailChip({
       {...knobProps.borderRadius}
       backgroundColor={fill as never}
       borderWidth={0}
-      paddingHorizontal="$3"
-      minHeight={chipVisualHeight}
-      hitSlop={chipHitSlop}
+      paddingHorizontal={chip.paddingHorizontal}
+      height={chip.height}
+      hitSlop={pressTargetHitSlop(chip.height)}
       alignItems="center"
-      gap="$1.5"
+      gap={chip.gap}
       cursor="pointer"
       role="radio"
       aria-checked={selected}
       {...(isWeb ? { tabIndex: tabStop ? 0 : -1 } : undefined)}
-      {...transitionProps(knobProps.transition)}
+      {...transitionProps(knobProps.motion.control)}
       hoverStyle={{ backgroundColor: hoverFill as never }}
       pressStyle={{ backgroundColor: fill as never }}
       outlineWidth={0}
@@ -136,6 +139,7 @@ function RailChip({
       ) : null}
       <Text
         {...knobProps.label}
+        fontSize={chip.fontSize}
         fontWeight={selected ? "700" : "500"}
         color={textColor as never}
         textTransform="capitalize"
@@ -146,7 +150,7 @@ function RailChip({
       {typeof option.count === "number" ? (
         <Text
           {...knobProps.label}
-          fontSize="$1"
+          fontSize={count.fontSize}
           fontWeight="700"
           color={textColor as never}
           opacity={0.7}

package/src/list/ImageWell.tsx

@@ -6,7 +6,7 @@ import {
   isWeb,
   type YStackProps,
 } from "@multiplatform.one/components";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { transitionProps, useResolvedKnobs } from "@multiplatform.one/theme";
 import { useEffect, useState } from "react";
 
 export interface ImageWellProps extends Omit<YStackProps, "children"> {
@@ -91,7 +91,7 @@ export function ImageWell({
           height={imageSize as never}
           objectFit="contain"
           opacity={revealed ? 1 : 0}
-          transition={knobProps.transition}
+          {...transitionProps(knobProps.motion.reveal)}
           zIndex={1}
           {...((isWeb ? { loading: lazy ? "lazy" : "eager", decoding: "async" } : undefined) as
             | Record<string, unknown>

package/src/list/ListControls.spec.tsx

@@ -0,0 +1,107 @@
+// ListControls rows (§ ListControls rows): the band pivots on the house
+// compact class (< 640, useLayoutSizeClass), not Tamagui's $max-sm (800).
+// Compact is two rows — search plus a badge-counted Filters button, then the
+// first facet as the one chip row; sort, favorites, shuffle and ranges move
+// into the ListToolsSheet. Medium and up keep everything on one row.
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { cleanup, fireEvent, screen, within } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { ListControls } from "./ListControls";
+import { fixtureControls, fixtureList } from "./listControls.fixture";
+
+const initialWidth = window.innerWidth;
+
+afterEach(() => {
+  cleanup();
+  window.innerWidth = initialWidth;
+});
+
+function renderAt(width: number, state = {}, update = vi.fn()) {
+  window.innerWidth = width;
+  return renderWithProviders(
+    <ListControls
+      controls={fixtureControls}
+      list={fixtureList(state, update)}
+      searchId="roster-search"
+      showSearch
+      showFavorites
+      shuffle={{ open: false, toggle: () => {}, panelId: "roster-shuffle" }}
+      separator={false}
+      compactAccessory={<span data-testid="accessory" />}
+      testID="roster"
+    />,
+  );
+}
+
+const band = () => screen.getByTestId("roster-controls");
+const row = () => screen.getByTestId("roster-controls-row");
+
+describe("ListControls on the compact class (639)", () => {
+  it("is one control row (search + Filters) and one chip row", () => {
+    renderAt(639);
+    expect(band().getAttribute("data-controls-layout")).toBe("compact");
+    // The band's direct children: the control row and the first facet rail.
+    expect(band().children).toHaveLength(2);
+    expect(row().querySelector("#roster-search input")).not.toBeNull();
+    expect(screen.getByTestId("roster-tools")).toBeTruthy();
+    expect(row().contains(screen.getByTestId("roster-tools"))).toBe(true);
+    expect(row().contains(screen.getByTestId("accessory"))).toBe(true);
+    expect(screen.getAllByRole("radiogroup")).toHaveLength(1);
+    expect(screen.getByRole("radiogroup", { name: "Type" })).toBeTruthy();
+  });
+
+  it("moves sort, favorites, shuffle and ranges off the band", () => {
+    renderAt(390);
+    expect(screen.queryByRole("combobox", { name: "Sort by" })).toBeNull();
+    expect(screen.queryByTestId("roster-favorites-filter")).toBeNull();
+    expect(screen.queryByTestId("roster-shuffle-toggle")).toBeNull();
+    expect(screen.queryByText("Min XP")).toBeNull();
+    expect(screen.queryByRole("radiogroup", { name: "Generation" })).toBeNull();
+    expect(screen.queryByRole("radiogroup", { name: "Region" })).toBeNull();
+  });
+
+  it("badges the Filters button with the active narrowings", () => {
+    renderAt(390, {
+      facets: { type: "fire" },
+      bands: { generation: "1" },
+      ranges: { xp: 50 },
+      favoritesOnly: true,
+    });
+    // The badge carries the count; untranslated specs see the raw key.
+    const badge = document.querySelector('[data-badge="count"]');
+    // Badge isolates the number in bidi marks.
+    expect(badge?.textContent).toContain("4");
+    expect(screen.getByTestId("roster-tools").getAttribute("aria-label")).toMatch(/^Filters \(/);
+  });
+});
+
+describe("ListControls above the compact class (700)", () => {
+  it("does not stack: search, sort, favorites and shuffle share one row", () => {
+    renderAt(700);
+    expect(band().getAttribute("data-controls-layout")).toBe("wide");
+    expect(screen.queryByTestId("roster-tools")).toBeNull();
+    expect(screen.queryByTestId("accessory")).toBeNull();
+    const r = row();
+    expect(getComputedStyle(r).flexWrap).toBe("nowrap");
+    expect(r.querySelector("#roster-search input")).not.toBeNull();
+    expect(r.contains(screen.getByTestId("roster-favorites-filter"))).toBe(true);
+    expect(r.contains(screen.getByTestId("roster-shuffle-toggle"))).toBe(true);
+    // Every facet keeps its own rail on the band.
+    expect(screen.getAllByRole("radiogroup")).toHaveLength(3);
+  });
+});
+
+describe("ListControls bands", () => {
+  it("shows counts and updates or clears a selected band above compact", () => {
+    const update = vi.fn();
+    renderAt(700, { bands: { generation: "1" } }, update);
+    const group = screen.getByRole("radiogroup", { name: "Generation" });
+    const first = within(group).getByRole("radio", { name: /Generation I\b/ });
+    expect(first.getAttribute("aria-checked")).toBe("true");
+    expect(first.textContent).toContain("8");
+    fireEvent.click(within(group).getByRole("radio", { name: /Generation II\b/ }));
+    expect(update).toHaveBeenCalledWith({ bands: { generation: "2" } });
+    fireEvent.click(within(group).getByRole("radio", { name: /All generations/ }));
+    expect(update).toHaveBeenCalledWith({ bands: { generation: "" } });
+  });
+});

package/src/list/ListControls.tsx

@@ -1,11 +1,13 @@
 import { Badge, Separator, Tooltip, XStack, YStack } from "@multiplatform.one/components";
 import { Button, SearchInput, Select } from "@multiplatform.one/forms";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { useLayoutSizeClass, useResolvedKnobs } from "@multiplatform.one/theme";
 import { DiceFiveIcon, HeartIcon } from "@phosphor-icons/react";
 import type React from "react";
 import { useTranslation } from "react-i18next";
+import { BandFilter } from "./BandFilters";
 import { FacetRail } from "./FacetRail";
 import { isListNarrowed, type FrappeListControls } from "./listState";
+import { ListToolsSheet } from "./ListToolsSheet";
 import { RangeFilter, rangeCeiling } from "./RangeFilter";
 import type { ListControlsResult } from "./useListControls";
 
@@ -23,6 +25,11 @@ export interface ListControlsProps {
   shufflePanel?: React.ReactNode;
   /** A hairline under the band, when the list below paints no surface. */
   separator: boolean;
+  /**
+   * Rides the compact control row after the search (the icon-only view
+   * switcher). Wider bands leave it where the page header put it.
+   */
+  compactAccessory?: React.ReactNode;
   testID: string;
 }
 
@@ -33,8 +40,12 @@ const rangeMaxWidth = 340;
 
 /**
  * The band above a list: search growing on the left, sort, favorites and
- * shuffle anchored right; then one chip rail per facet; then the range
- * sliders with Clear filters. Under sm the search takes its own row.
+ * shuffle after it; then one chip rail per facet; then the range sliders
+ * with Clear filters. On the house compact class (< 640) the band is two
+ * rows: search plus a badge-counted Filters button (and the accessory), then
+ * the first facet as the one horizontally scrolling chip row — everything
+ * else opens in the ListToolsSheet. Medium and up never stack (§ ListControls
+ * rows).
  */
 export function ListControls({
   controls,
@@ -46,6 +57,7 @@ export function ListControls({
   shuffle,
   shufflePanel,
   separator,
+  compactAccessory,
   testID,
 }: ListControlsProps) {
   const { t } = useTranslation();
@@ -54,15 +66,99 @@ export function ListControls({
   const sorts = controls.sorts ?? [];
   const narrowed = isListNarrowed(state);
   const favoritesLabel = t("Favorites");
+  const compact = useLayoutSizeClass() === "compact";
+  const facets = controls.facets ?? [];
+
+  const facetRail = (facet: (typeof facets)[number]) => {
+    const reading = list.facets[facet.param];
+    return (
+      <FacetRail
+        key={facet.param}
+        label={facet.label}
+        value={state.facets[facet.param] ?? ""}
+        onChange={(value) => update({ facets: { [facet.param]: value } })}
+        testID={`${testID}-${facet.param}`}
+        options={[
+          {
+            value: "",
+            label: facet.allLabel ?? t("All"),
+            count: list.total,
+          },
+          ...facet.options.map((value) => ({
+            value,
+            label: facet.optionLabel?.(value) ?? value,
+            tint: facet.tint?.(value),
+            count: reading?.counts[value],
+          })),
+        ]}
+      />
+    );
+  };
+
+  const searchBox = (
+    <YStack flexGrow={1} flexShrink={1} minWidth={0}>
+      <SearchInput
+        value={list.searchText}
+        onChange={list.setSearchText}
+        onSearch={(text) => update({ search: text })}
+        placeholder={searchPlaceholder ?? t("Search...")}
+        aria-label={searchPlaceholder ?? t("Search...")}
+        debounceMs={200}
+        clearable
+      />
+    </YStack>
+  );
+
+  if (compact) {
+    const [chipFacet, ...sheetFacets] = facets;
+    return (
+      <>
+        <YStack
+          {...knobProps.gap}
+          testID={`${testID}-controls`}
+          {...({ "data-controls-layout": "compact" } as Record<string, unknown>)}
+        >
+          <XStack
+            {...knobProps.gap}
+            alignItems="center"
+            flexWrap="nowrap"
+            testID={`${testID}-controls-row`}
+          >
+            {showSearch ? (
+              <XStack id={searchId} flex={1} minWidth={0} alignItems="center">
+                {searchBox}
+              </XStack>
+            ) : null}
+            {compactAccessory}
+            <ListToolsSheet
+              controls={controls}
+              list={list}
+              showFavorites={showFavorites}
+              shuffle={shuffle}
+              facets={sheetFacets}
+              testID={testID}
+            />
+          </XStack>
+          {shufflePanel}
+          {chipFacet ? facetRail(chipFacet) : null}
+        </YStack>
+        {separator ? <Separator /> : null}
+      </>
+    );
+  }
 
   return (
     <>
-      <YStack {...knobProps.gap} testID={`${testID}-controls`}>
+      <YStack
+        {...knobProps.gap}
+        testID={`${testID}-controls`}
+        {...({ "data-controls-layout": "wide" } as Record<string, unknown>)}
+      >
         <XStack
           {...knobProps.gap}
           alignItems="center"
-          flexWrap="wrap"
-          justifyContent="space-between"
+          flexWrap="nowrap"
+          testID={`${testID}-controls-row`}
         >
           {showSearch ? (
             <XStack
@@ -72,28 +168,11 @@ export function ListControls({
               flexBasis={searchBasis}
               minWidth={searchMinWidth}
               alignItems="center"
-              $max-sm={{ flexBasis: "100%", maxWidth: "100%" }}
             >
-              <YStack flexGrow={1} flexShrink={1} minWidth={0}>
-                <SearchInput
-                  value={list.searchText}
-                  onChange={list.setSearchText}
-                  onSearch={(text) => update({ search: text })}
-                  placeholder={searchPlaceholder ?? t("Search...")}
-                  aria-label={searchPlaceholder ?? t("Search...")}
-                  debounceMs={200}
-                  compact
-                  clearable
-                />
-              </YStack>
+              {searchBox}
             </XStack>
           ) : null}
-          <XStack
-            {...knobProps.gap}
-            alignItems="center"
-            flexWrap="wrap"
-            $max-sm={{ width: "100%" }}
-          >
+          <XStack {...knobProps.gap} alignItems="center" flexWrap="nowrap" flexShrink={1}>
             {sorts.length > 0 ? (
               <XStack minWidth={sortMinWidth} flexGrow={1} flexShrink={1}>
                 <Select
@@ -144,45 +223,14 @@ export function ListControls({
           </XStack>
         </XStack>
         {shufflePanel}
-        {(controls.facets ?? []).map((facet) => {
-          const reading = list.facets[facet.param];
-          return (
-            <FacetRail
-              key={facet.param}
-              label={facet.label}
-              value={state.facets[facet.param] ?? ""}
-              onChange={(value) => update({ facets: { [facet.param]: value } })}
-              testID={`${testID}-${facet.param}`}
-              options={[
-                {
-                  value: "",
-                  label: facet.allLabel ?? t("All"),
-                  count: list.total,
-                },
-                ...facet.options.map((value) => ({
-                  value,
-                  label: facet.optionLabel?.(value) ?? value,
-                  tint: facet.tint?.(value),
-                  count: reading?.counts[value],
-                })),
-              ]}
-            />
-          );
-        })}
+        {facets.map(facetRail)}
+        {(controls.bands ?? []).map((band) => (
+          <BandFilter key={band.param} band={band} list={list} testID={`${testID}-${band.param}`} />
+        ))}
         {(controls.ranges?.length ?? 0) > 0 || narrowed ? (
-          <XStack
-            {...knobProps.gap}
-            alignItems="center"
-            flexWrap="wrap"
-            justifyContent="space-between"
-          >
+          <XStack {...knobProps.gap} alignItems="center" flexWrap="wrap">
             {(controls.ranges ?? []).map((range) => (
-              <XStack
-                key={range.param}
-                maxWidth={rangeMaxWidth}
-                flexGrow={1}
-                $max-sm={{ maxWidth: "100%", width: "100%" }}
-              >
+              <XStack key={range.param} maxWidth={rangeMaxWidth} flexGrow={1}>
                 <RangeFilter
                   label={range.label}
                   value={state.ranges[range.param] ?? 0}