@multiplatform.one/table 7.7.4 → 7.8.0

package/src/components/DataTableDateFilter/index.tsx

@@ -326,7 +326,6 @@ export function DataTableDateFilter({
       <Popover.Trigger asChild>
         <Button
           size={knobProps.sizeToken}
-          variant="outlined"
           disabled={disabled}
           icon={<CalendarIcon size={iconPx} />}
           justifyContent="flex-start"
@@ -370,7 +369,6 @@ export function DataTableDateFilter({
               {value && (
                 <Button
                   size={knobProps.sizeToken}
-                  variant="outlined"
                   onPress={handleClear}
                   icon={<XIcon size={iconPx} />}
                 >
@@ -391,7 +389,6 @@ export function DataTableDateFilter({
                       <Button
                         key={preset.id}
                         size={knobProps.sizeToken}
-                        variant="outlined"
                         justifyContent="flex-start"
                         onPress={() => handlePresetSelect(preset)}
                         {...(activePresetId === preset.id
@@ -418,7 +415,6 @@ export function DataTableDateFilter({
                 <Button
                   flex={1}
                   size={knobProps.sizeToken}
-                  variant="outlined"
                   onPress={() => handleCustomDateSelect(new Date().toISOString(), "is")}
                 >
                   {t("Today")}
@@ -426,7 +422,6 @@ export function DataTableDateFilter({
                 <Button
                   flex={1}
                   size={knobProps.sizeToken}
-                  variant="outlined"
                   onPress={() =>
                     handleCustomDateSelect(
                       new Date(Date.now() - 24 * 60 * 60 * 1000).toISOString(),
@@ -447,7 +442,6 @@ export function DataTableDateFilter({
                   <Button
                     flex={1}
                     size={knobProps.sizeToken}
-                    variant="outlined"
                     onPress={() =>
                       handleDateRangeSelect(
                         new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toISOString(),
@@ -460,7 +454,6 @@ export function DataTableDateFilter({
                   <Button
                     flex={1}
                     size={knobProps.sizeToken}
-                    variant="outlined"
                     onPress={() =>
                       handleDateRangeSelect(
                         new Date(Date.now() - 30 * 24 * 60 * 60 * 1000).toISOString(),

package/src/components/DataTableFilterButton/index.tsx

@@ -348,7 +348,7 @@ export function DataTableFilterButton() {
 
             {editingExisting && (
               <XStack justifyContent="flex-end">
-                <Button size="$2" variant="outlined" onPress={handleRemoveCurrent}>
+                <Button size="$2" onPress={handleRemoveCurrent}>
                   {t("Remove filter")}
                 </Button>
               </XStack>

package/src/components/DataTableFilterChips/FilterChip.spec.tsx

@@ -18,6 +18,12 @@ describe("FilterChip", () => {
     renderWithProviders(<FilterChip label="Email: contains corp" onRemove={vi.fn()} />);
     expect(screen.getByText("Email: contains corp")).toBeTruthy();
     expect(screen.getByRole("button", { name: "Remove" })).toBeTruthy();
+    const fill = screen
+      .getByRole("button", { name: "Remove" })
+      .querySelector("svg")
+      ?.getAttribute("fill");
+    expect(fill).toBeTruthy();
+    expect(fill?.startsWith("$")).toBe(false);
   });
 
   it("with onPress the pill is an edit button; both focusables are tab stops (LC-71)", () => {

package/src/components/DataTableFilterChips/FilterChip.tsx

@@ -16,7 +16,7 @@ import {
   pressTargetStyle,
   useResolvedKnobs,
 } from "@multiplatform.one/theme";
-import { View, styled } from "tamagui";
+import { View, styled, useTheme } from "tamagui";
 import { t } from "../../shared/t";
 
 export interface FilterChipProps {
@@ -49,6 +49,7 @@ const DismissRing = styled(View, {
 
 export function FilterChip({ label, onRemove, onPress }: FilterChipProps) {
   const { knobProps } = useResolvedKnobs();
+  const theme = useTheme();
   if (typeof document !== "undefined") ensureCompositeFocusRing();
 
   const resolvedSize = (knobProps.sizeToken as ChipSize) || "$3";
@@ -114,7 +115,7 @@ export function FilterChip({ label, onRemove, onPress }: FilterChipProps) {
         }
       >
         <DismissRing className="mp-chip-dismiss-ring" borderRadius={knobProps.pointy ? 0 : 1000}>
-          <XIcon size={iconSize} color="$color12" />
+          <XIcon size={iconSize} color={theme.color12?.val ?? "currentColor"} />
         </DismissRing>
       </DismissButton>
     </ChipFrame>

package/src/components/DataTableFilters/index.tsx

@@ -255,7 +255,7 @@ function FilterBuilder({
       ) : null}
 
       <XStack gap="$2" justifyContent="flex-end">
-        <Button size="$3" compact variant="outlined" onPress={onCancel}>
+        <Button size="$3" compact onPress={onCancel}>
           {t("Cancel")}
         </Button>
         <Button

package/src/components/DataTableGrouping/DataTableGrouping.stories.tsx

@@ -366,7 +366,6 @@ export const WithGroupingControls = () => {
       <XStack gap="$3" flexWrap="wrap">
         <Button
           size="$3"
-          variant="outlined"
           onPress={() =>
             setGroupingConfig({
               columns: ["region"],
@@ -378,7 +377,6 @@ export const WithGroupingControls = () => {
         </Button>
         <Button
           size="$3"
-          variant="outlined"
           onPress={() =>
             setGroupingConfig({
               columns: ["category"],
@@ -390,7 +388,6 @@ export const WithGroupingControls = () => {
         </Button>
         <Button
           size="$3"
-          variant="outlined"
           onPress={() =>
             setGroupingConfig({
               columns: ["region", "category"],
@@ -405,7 +402,6 @@ export const WithGroupingControls = () => {
         </Button>
         <Button
           size="$3"
-          variant="outlined"
           onPress={() =>
             setGroupingConfig({
               columns: [],

package/src/components/DataTableGrouping/index.tsx

@@ -637,7 +637,6 @@ export function DataTableGroupingConfig<T = any>(props: DataTableGroupingConfigP
       <Popover.Trigger asChild>
         <Button
           size={knobProps.sizeToken}
-          variant="outlined"
           icon={<GearIcon size={iconSize} />}
           disabled={disabled}
           aria-label="Grouping configuration"
@@ -716,7 +715,6 @@ export function DataTableGroupingConfig<T = any>(props: DataTableGroupingConfigP
                         </Text>
                         <Button
                           size={knobProps.sizeToken}
-                          variant="outlined"
                           icon={<ArrowUpIcon size={iconSize} />}
                           disabled={disabled || index === 0}
                           onPress={() => handleMoveGroupBy(index, -1)}
@@ -724,7 +722,6 @@ export function DataTableGroupingConfig<T = any>(props: DataTableGroupingConfigP
                         />
                         <Button
                           size={knobProps.sizeToken}
-                          variant="outlined"
                           icon={<ArrowDownIcon size={iconSize} />}
                           disabled={disabled || index === currentConfig.columns.length - 1}
                           onPress={() => handleMoveGroupBy(index, 1)}
@@ -732,7 +729,6 @@ export function DataTableGroupingConfig<T = any>(props: DataTableGroupingConfigP
                         />
                         <Button
                           size={knobProps.sizeToken}
-                          variant="outlined"
                           icon={<MinusIcon size={iconSize} />}
                           disabled={disabled}
                           onPress={() => handleRemoveGroupBy(columnKey)}
@@ -756,7 +752,6 @@ export function DataTableGroupingConfig<T = any>(props: DataTableGroupingConfigP
                       <Button
                         key={key}
                         size={knobProps.sizeToken}
-                        variant="outlined"
                         onPress={() => handleAddGroupBy(key)}
                       >
                         {column.header || key}
@@ -803,7 +798,6 @@ export function DataTableGroupingConfig<T = any>(props: DataTableGroupingConfigP
                         </Text>
                         <Button
                           size={knobProps.sizeToken}
-                          variant="outlined"
                           icon={<MinusIcon size={iconSize} />}
                           disabled={disabled}
                           onPress={() => handleRemoveAggregation(index)}
@@ -828,7 +822,6 @@ export function DataTableGroupingConfig<T = any>(props: DataTableGroupingConfigP
                 <Separator />
                 <Button
                   size={knobProps.sizeToken}
-                  variant="outlined"
                   error
                   onPress={() => onConfigChange({ columns: [], aggregations: [] })}
                   aria-label="Clear all grouping and aggregation"
@@ -946,12 +939,7 @@ function AggregationSelector<T = any>({ columns, onAddAggregation }: Aggregation
           />
         </View>
 
-        <Button
-          size={knobProps.sizeToken}
-          variant="outlined"
-          disabled={!selectedColumn}
-          onPress={handleAdd}
-        >
+        <Button size={knobProps.sizeToken} disabled={!selectedColumn} onPress={handleAdd}>
           Add
         </Button>
       </XStack>

package/src/components/DataTablePagination/DataTablePagination.spec.tsx

@@ -1,16 +1,23 @@
-import { useState } from "react";
+import { createElement, forwardRef, useEffect, useState } from "react";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { fireEvent, screen } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
 
 // The happy-dom env resolves useMedia to { sm: false } (mobile), which hides
-// the desktop-only meta clusters (rows-per-page, jump, range info). Pin sm on
+// the desktop-only meta clusters. Model a measured wide container and pin sm on
 // so the range-label contract below is testable (same pattern as
 // components/Debug and markdown/mdx specs).
 vi.mock("tamagui", async (importOriginal) => {
   const actual = await importOriginal<typeof import("tamagui")>();
   return {
     ...actual,
+    XStack: forwardRef((props: any, ref) => {
+      const onLayout = props["aria-label"] === "Table pagination" ? props.onLayout : undefined;
+      useEffect(() => {
+        onLayout?.({ nativeEvent: { layout: { width: 1200, height: 44, x: 0, y: 0 } } });
+      }, [onLayout]);
+      return createElement(actual.XStack, { ...props, ref });
+    }),
     useMedia: (...args: any[]) => ({ ...(actual.useMedia as any)(...args), sm: true }),
   };
 });

package/src/components/DataTablePagination/DataTablePagination.stories.tsx

@@ -1,5 +1,6 @@
 import { action } from "@multiplatform.one/storybook";
 import type { GuardrailSpecimenParameter } from "@multiplatform.one/theme";
+import { Preset } from "@multiplatform.one/theme";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import React from "react";
 // Catalog Button + Input (LC-56 STORY-HONESTY — no raw interactive primitives).
@@ -780,3 +781,34 @@ export const InfiniteVirtualized: Story = {
     />
   ),
 };
+
+export const NarrowPanel: Story = {
+  render: (args) => {
+    const [pagination, setPagination] = React.useState({ pageIndex: 0, pageSize: 25 });
+    return (
+      <YStack width={249}>
+        <DataTablePagination
+          compact
+          pagination={{
+            ...pagination,
+            totalCount: 1000,
+            totalPages: Math.ceil(1000 / pagination.pageSize),
+          }}
+          onPaginationChange={setPagination}
+          {...args}
+        />
+      </YStack>
+    );
+  },
+};
+
+export const LargeSpaceNarrow: Story = {
+  ...NarrowPanel,
+  decorators: [
+    (Story) => (
+      <Preset overrides={{ space: "large" }}>
+        <Story />
+      </Preset>
+    ),
+  ],
+};

package/src/components/DataTablePagination/DataTablePagination.width.spec.tsx

@@ -0,0 +1,109 @@
+import { createElement, forwardRef } from "react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { act, fireEvent, screen, within } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import type { LayoutChangeEvent } from "react-native";
+import { Preset } from "@multiplatform.one/theme";
+
+const observed = vi.hoisted(() => ({
+  onLayout: undefined as undefined | ((event: LayoutChangeEvent) => void),
+  change: vi.fn(),
+  sizeWidth: 0,
+}));
+vi.mock("tamagui", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("tamagui")>();
+  return {
+    ...actual,
+    useMedia: () => ({ sm: true }),
+    View: forwardRef((props: any, ref) => {
+      if (props["data-pagination-control"] === "size") observed.sizeWidth = props.width;
+      return createElement(actual.View, { ...props, ref });
+    }),
+    XStack: forwardRef((props: any, ref) => {
+      if (props["aria-label"] === "Table pagination") observed.onLayout = props.onLayout;
+      return createElement(actual.XStack, { ...props, ref });
+    }),
+  };
+});
+vi.mock("../DataTable/DataTableStateContext", () => ({
+  useDataTableState: () => ({
+    state: { pagination: { pageIndex: 0, pageSize: 25 } },
+    computed: { totalPages: 40, totalRows: 1000 },
+    actions: { setPagination: observed.change },
+  }),
+}));
+import { DataTablePagination } from "./index";
+
+function measure(width: number) {
+  expect(observed.onLayout).toBeTypeOf("function");
+  act(() =>
+    observed.onLayout?.({
+      nativeEvent: { layout: { width, height: 44, x: 0, y: 0 } },
+    } as LayoutChangeEvent),
+  );
+}
+beforeEach(() => {
+  observed.change.mockReset();
+  observed.onLayout = undefined;
+});
+
+describe("bounded compact table pagination", () => {
+  it("preserves the default footprint and grows for wide numeric options", () => {
+    const { rerender } = renderWithProviders(<DataTablePagination compact />);
+    expect(observed.sizeWidth).toBe(80);
+    rerender(<DataTablePagination compact pageSizeOptions={[10, 25, 1000000]} />);
+    expect(observed.sizeWidth).toBeGreaterThan(80);
+  });
+
+  it("budgets the always-compact Select independently from footer spacing", () => {
+    const renderPager = (compact: boolean) => (
+      <Preset overrides={{ space: "large" }}>
+        <DataTablePagination compact={compact} />
+      </Preset>
+    );
+    const { rerender } = renderWithProviders(renderPager(false));
+    const width = observed.sizeWidth;
+    expect(width).toBeGreaterThan(80);
+    rerender(renderPager(true));
+    expect(observed.sizeWidth).toBe(width);
+  });
+
+  it("starts safely and responds to container width even on a desktop viewport", () => {
+    renderWithProviders(<DataTablePagination compact />);
+    const pager = () => within(screen.getByRole("navigation", { name: "Page" }));
+    expect(pager().getAllByRole("button")).toHaveLength(2);
+    measure(1000);
+    expect(pager().getAllByRole("button").length).toBeGreaterThan(2);
+    measure(249);
+    expect(pager().getAllByRole("button")).toHaveLength(2);
+    expect(pager().getByText(/1.*40/)).toBeInTheDocument();
+    expect(screen.getByLabelText("Select rows per page")).toBeInTheDocument();
+    fireEvent.click(pager().getByLabelText("Go to next page"));
+    expect(observed.change).toHaveBeenCalledExactlyOnceWith({ pageIndex: 1, pageSize: 25 });
+  });
+
+  it("preserves the presentation when a container reports its width again", () => {
+    renderWithProviders(<DataTablePagination compact />);
+    measure(249);
+    const pager = screen.getByRole("navigation", { name: "Page" });
+    const buttons = within(pager).getAllByRole("button");
+    measure(249);
+    expect(within(pager).getAllByRole("button")).toEqual(buttons);
+    expect(observed.change).not.toHaveBeenCalled();
+  });
+
+  it("resets to the first page when rows per page changes in a narrow table", async () => {
+    renderWithProviders(
+      <DataTablePagination
+        compact
+        pagination={{ pageIndex: 5, pageSize: 25, totalPages: 40, totalCount: 1000 }}
+      />,
+    );
+    measure(249);
+    fireEvent.click(screen.getByLabelText("Select rows per page"));
+    fireEvent.keyDown(await screen.findByRole("option", { name: "50" }), {
+      key: "Enter",
+    });
+    expect(observed.change).toHaveBeenCalledExactlyOnceWith({ pageIndex: 0, pageSize: 50 });
+  });
+});

package/src/components/DataTablePagination/index.tsx

@@ -1,9 +1,16 @@
-import { ensureCompositeFocusRing, useResolvedKnobs } from "@multiplatform.one/theme";
-import { Pagination } from "@multiplatform.one/components";
+import {
+  ensureCompositeFocusRing,
+  isTouchSurface,
+  MIN_PRESS_TARGET,
+  sizeRecipeForToken,
+  textFieldInset,
+  useResolvedKnobs,
+} from "@multiplatform.one/theme";
+import { Pagination, getPaginationItems } from "@multiplatform.one/components";
 import { useMemo, useState } from "react";
 import type React from "react";
 import { Input, Select } from "@multiplatform.one/forms";
-import { Text, View, XStack, useMedia } from "tamagui";
+import { Text, View, XStack, getTokenValue, useMedia } from "tamagui";
 import type { TablePagination, TablePaginationState } from "../../types";
 import { DEFAULT_PAGE_SIZE, DEFAULT_PAGE_SIZE_OPTIONS } from "../../utils/paginationDefaults";
 import { bidiIsolate } from "../../utils/withInterp";
@@ -24,8 +31,10 @@ export interface DataTablePaginationProps {
   compact?: boolean;
 }
 
-function controlWidth(chars: number, chrome: number) {
-  return Math.max(48, chars * 12 + chrome);
+function controlWidth(chars: number, fontSize: number, inset: number, trailingChrome = 0) {
+  // Conservative $body digit width, checked against rendered ink in Storybook.
+  // Include the Box's two hairline borders after its single horizontal inset.
+  return Math.ceil(chars * fontSize * 0.65) + inset * 2 + trailingChrome + 2;
 }
 
 function formatRange(start: number, end: number, total: number) {
@@ -35,7 +44,7 @@ function formatRange(start: number, end: number, total: number) {
 
 /**
  * DataTable footer pager. Page navigation is the catalog
- * `Pagination` component (`variant="numbered"`) — one pagination idiom
+ * `Pagination` component (`variant={simplePager ? "simple" : "numbered"}`) — one pagination idiom
  * across the system. This wrapper adds the table-specific chrome:
  * rows-per-page selector, go-to-page jump, and the item-range summary.
  *
@@ -83,7 +92,19 @@ export function DataTablePagination(props: DataTablePaginationProps) {
 
   const { sm } = useMedia();
   const { knobProps } = useResolvedKnobs(compact === undefined ? undefined : { compact });
+  // The fields are always compact, independently of the footer's layout.
+  const { knobProps: fieldKnobs } = useResolvedKnobs({ compact: true });
+  const fieldRecipe = sizeRecipeForToken(knobProps.sizeToken, { touch: isTouchSurface() });
+  const selectInset = Number(
+    getTokenValue(fieldKnobs.panelPadding.padding as Parameters<typeof getTokenValue>[0], "space"),
+  );
   const isMobile = !sm;
+  const packed = compact && insideTable;
+  const [availableWidth, setAvailableWidth] = useState<number | undefined>();
+  const measureWidth = (event: import("react-native").LayoutChangeEvent) => {
+    const width = event.nativeEvent.layout.width;
+    if (width > 0) setAvailableWidth((previous) => (previous === width ? previous : width));
+  };
   // LC-71: mount the composite-boundary ring sheet before Select/Input paint.
   ensureCompositeFocusRing();
 
@@ -112,6 +133,30 @@ export function DataTablePagination(props: DataTablePaginationProps) {
   const startItem = totalCount === 0 ? 0 : pagination.pageIndex * pagination.pageSize + 1;
   const endItem = Math.min((pagination.pageIndex + 1) * pagination.pageSize, totalCount);
 
+  // Budget the numbered window from the active theme's control geometry.
+  // An unmeasured host uses the safe simple presentation, including SSR.
+  const pageControls =
+    getPaginationItems(totalPages, currentPage).length + 2 + (!compact && !isMobile ? 2 : 0);
+  const controlBudget = Math.max(
+    MIN_PRESS_TARGET,
+    knobProps.control.height + knobProps.control.paddingHorizontal * 2,
+  );
+  const gapPixels = Number(
+    getTokenValue(knobProps.gap.gap as Parameters<typeof getTokenValue>[0], "space"),
+  );
+  const paddingPixels = packed
+    ? 0
+    : Number(
+        getTokenValue(
+          knobProps.panelPadding.padding as Parameters<typeof getTokenValue>[0],
+          "space",
+        ),
+      );
+  const measuredBudget =
+    pageControls * controlBudget + Math.max(0, pageControls - 1) * gapPixels + paddingPixels * 2;
+  const numberedBudget = Number.isFinite(measuredBudget) ? measuredBudget : Infinity;
+  const simplePager = availableWidth === undefined || availableWidth < numberedBudget;
+
   const sizeOptions = useMemo(() => {
     const sizes = new Set(pageSizeOptions.filter((n) => Number.isFinite(n) && n > 0));
     if (pagination.pageSize > 0) sizes.add(pagination.pageSize);
@@ -121,7 +166,7 @@ export function DataTablePagination(props: DataTablePaginationProps) {
   const showSize = showPageSizeSelector;
   // Compact-inside-DataTable: the table footer already paints the range.
   const showRange = showInfo && !(compact && insideTable);
-  const showJump = showPageJump && showPager && !compact && !isMobile;
+  const showJump = showPageJump && showPager && !compact && !isMobile && !simplePager;
 
   const [jumpNonce, setJumpNonce] = useState(0);
 
@@ -138,15 +183,30 @@ export function DataTablePagination(props: DataTablePaginationProps) {
 
   const helperText = {
     ...knobProps.label,
-    color: "$color10" as const,
+    color: knobProps.textAccentColor,
     userSelect: "none" as const,
   };
 
   const sizeControl = showSize ? (
-    <XStack alignItems="center" gap="$2" flexShrink={0}>
+    <XStack
+      alignItems="center"
+      gap="$2"
+      flexShrink={0}
+      flexWrap="wrap"
+      minWidth={0}
+      maxWidth="100%"
+    >
       <Text {...helperText}>Rows per page:</Text>
       <View
-        width={controlWidth(Math.max(2, ...sizeOptions.map((n) => String(n).length)), 44)}
+        width={Math.max(
+          80,
+          controlWidth(
+            Math.max(2, ...sizeOptions.map((n) => String(n).length)),
+            fieldKnobs.controlType.fontSize,
+            selectInset,
+            fieldRecipe.gap + 16, // Select's fixed 16px caret.
+          ),
+        )}
         overflow="visible"
         flexShrink={0}
         {...({ "data-pagination-control": "size" } as object)}
@@ -172,12 +232,13 @@ export function DataTablePagination(props: DataTablePaginationProps) {
 
   const pager = showPager ? (
     <Pagination
-      variant="numbered"
+      variant={simplePager ? "simple" : "numbered"}
       total={totalPages}
       page={currentPage}
       onPageChange={(page) => handlePageChange(page - 1)}
-      showFirstLast={!compact && !isMobile}
+      showFirstLast={!simplePager && !compact && !isMobile}
       aria-label="Page"
+      padding={0}
     />
   ) : null;
 
@@ -185,7 +246,14 @@ export function DataTablePagination(props: DataTablePaginationProps) {
     <XStack alignItems="center" gap="$2" flexShrink={0} aria-label="Jump to page">
       <Text {...helperText}>Go to page:</Text>
       <View
-        width={controlWidth(String(totalPages).length, 28)}
+        width={Math.max(
+          48,
+          controlWidth(
+            String(totalPages).length,
+            fieldRecipe.fontSize,
+            textFieldInset(fieldRecipe),
+          ),
+        )}
         overflow="visible"
         flexShrink={0}
         {...({ "data-pagination-control": "jump" } as object)}
@@ -221,13 +289,17 @@ export function DataTablePagination(props: DataTablePaginationProps) {
     </Text>
   ) : null;
 
-  const packed = compact && insideTable;
-
   if (packed) {
     return (
       <XStack
         role="group"
         aria-label="Table pagination"
+        onLayout={measureWidth}
+        minWidth={0}
+        maxWidth="100%"
+        flexGrow={1}
+        flexShrink={1}
+        flexWrap="wrap"
         alignItems="center"
         overflow="visible"
         {...knobProps.gap}
@@ -239,12 +311,14 @@ export function DataTablePagination(props: DataTablePaginationProps) {
   }
 
   return (
-    // UX-P08 / LC-10 + Axiom 15 (G-03): side clusters grow equally so the
-    // pager stays on the true centerline; when the row wraps each cluster
-    // keeps its own alignment line. rowGap stays on the within-group rhythm.
+    // LC-10: intrinsic cluster widths participate in wrapping. Zero flex
+    // bases let the controls overlap while the footer itself still fits.
+    // A constrained size cluster can also wrap its label above the field.
     <XStack
       role="group"
       aria-label="Table pagination"
+      onLayout={measureWidth}
+      minWidth={0}
       alignItems="center"
       overflow="visible"
       {...knobProps.gapLg}
@@ -254,7 +328,14 @@ export function DataTablePagination(props: DataTablePaginationProps) {
       paddingHorizontal={knobProps.panelPadding.padding}
       paddingVertical="$2"
     >
-      <XStack alignItems="center" flexGrow={1} flexBasis={0} justifyContent="flex-start">
+      <XStack
+        alignItems="center"
+        flexGrow={1}
+        flexShrink={1}
+        minWidth={0}
+        maxWidth="100%"
+        justifyContent="flex-start"
+      >
         {sizeControl}
       </XStack>
 
@@ -269,7 +350,6 @@ export function DataTablePagination(props: DataTablePaginationProps) {
           alignItems="center"
           {...knobProps.gap}
           flexGrow={1}
-          flexBasis={0}
           flexShrink={0}
           justifyContent="flex-end"
         >

package/src/components/DataTableSearch/index.tsx

@@ -253,7 +253,6 @@ function SearchOptionsPopover({
       <Popover.Trigger asChild>
         <Button
           size={knobProps.sizeToken}
-          variant="outlined"
           accent={optionsActive}
           icon={<SlidersHorizontalIcon size={iconPx} weight={optionsActive ? "fill" : "regular"} />}
           disabled={disabled}
@@ -326,10 +325,10 @@ function SearchOptionsPopover({
               </XStack>
 
               <XStack {...knobProps.gap}>
-                <Button size="$2" compact variant="outlined" onPress={handleSelectAllColumns}>
+                <Button size="$2" compact onPress={handleSelectAllColumns}>
                   {t("All")}
                 </Button>
-                <Button size="$2" compact variant="outlined" onPress={handleSelectNoColumns}>
+                <Button size="$2" compact onPress={handleSelectNoColumns}>
                   {t("None")}
                 </Button>
               </XStack>

package/src/components/DataTableToolbar/DataTableToolbar.stories.tsx

@@ -71,9 +71,7 @@ const MainStory = () => {
         enableGlobalSearch
         enableViews
         initialState={{ pagination: { pageIndex: 1, pageSize: 3 } }}
-        renderToolbar={(props) => (
-          <DataTableToolbar {...props} enableViews enableExport />
-        )}
+        renderToolbar={(props) => <DataTableToolbar {...props} enableViews enableExport />}
         aria-label="Employee table with toolbar"
       />
     </YStack>
@@ -154,7 +152,7 @@ const WithCustomActionsStory = () => {
         onClearFilters={() => setSearch("")}
         customActions={
           <XStack gap="$2">
-            <Button size="$2" variant="outlined" onPress={() => action("refresh")()}>
+            <Button size="$2" onPress={() => action("refresh")()}>
               Refresh
             </Button>
             <Button size="$2" onPress={() => action("export")()}>