@multiplatform.one/backoffice 7.23.0 → 7.23.2

package/src/form/FormConnections.tsx

@@ -15,6 +15,7 @@ import {
 import {
   ensureFocusVisibleRing,
   getGroupPosition,
+  sizeRecipeEscape,
   stackRadiusProps,
   useResolvedKnobs,
 } from "@multiplatform.one/theme";
@@ -108,7 +109,14 @@ function ConnectionRow({ link, docname, count, countsLoading, index, total }: Co
         {link.targetDoctype}
       </SizableText>
       {countsLoading ? (
-        <Skeleton variant="rounded" width={28} height={18} />
+        <Skeleton
+          variant="rounded"
+          width="$2"
+          height={sizeRecipeEscape(
+            18,
+            "loading bones sized to the connection card rows they stand in for",
+          )}
+        />
       ) : (
         <>
           {openText !== undefined && (
@@ -189,12 +197,39 @@ function ConnectionsSkeleton() {
   return (
     <Card flexBasis={240} flexGrow={1} flexShrink={1}>
       <YStack {...knobProps.panelPadding} {...knobProps.gap}>
-        <Skeleton width={120} height={18} />
+        <Skeleton
+          width={sizeRecipeEscape(
+            120,
+            "loading bones sized to the connection card rows they stand in for",
+          )}
+          height={sizeRecipeEscape(
+            18,
+            "loading bones sized to the connection card rows they stand in for",
+          )}
+        />
         <Separator />
         <YStack gap="$2">
-          <Skeleton width="82%" height={16} />
-          <Skeleton width="64%" height={16} />
-          <Skeleton width="73%" height={16} />
+          <Skeleton
+            width="82%"
+            height={sizeRecipeEscape(
+              16,
+              "loading bones sized to the connection card rows they stand in for",
+            )}
+          />
+          <Skeleton
+            width="64%"
+            height={sizeRecipeEscape(
+              16,
+              "loading bones sized to the connection card rows they stand in for",
+            )}
+          />
+          <Skeleton
+            width="73%"
+            height={sizeRecipeEscape(
+              16,
+              "loading bones sized to the connection card rows they stand in for",
+            )}
+          />
         </YStack>
       </YStack>
     </Card>

package/src/form/FormDialogs.tsx

@@ -13,12 +13,14 @@ import { Link } from "@multiplatform.one/frappe-ui";
 import {
   ensureFocusVisibleRing,
   getGroupPosition,
+  sizeRecipeEscape,
   stackRadiusProps,
   useResolvedKnobs,
 } from "@multiplatform.one/theme";
 import { useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
+import { dialogBodyMinWidth } from "../shared/measures";
 
 // ---------------------------------------------------------------------------
 // Rename
@@ -106,7 +108,7 @@ export function EmailDialog({ open, onOpenChange, defaultSubject, onSend }: Emai
       confirmDisabledReason={t("emailDisabled", "Recipients and subject are required")}
       onConfirm={() => onSend({ recipients: recipients.trim(), subject: subject.trim(), content })}
     >
-      <YStack {...knobProps.gap} minWidth={280}>
+      <YStack {...knobProps.gap} minWidth={dialogBodyMinWidth}>
         <Input
           value={recipients}
           onChangeText={setRecipients}
@@ -163,7 +165,7 @@ export function AssignDialog({ open, onOpenChange, onAssign }: AssignDialogProps
       confirmDisabledReason={t("assignDisabled", "Pick a user first")}
       onConfirm={() => onAssign(user)}
     >
-      <YStack {...knobProps.gap} minWidth={280}>
+      <YStack {...knobProps.gap} minWidth={dialogBodyMinWidth}>
         <Link
           label={t("assignTo", "Assign to")}
           doctype="User"
@@ -226,7 +228,14 @@ export function JumpToFieldDialog({ open, onOpenChange, fields, onJump }: JumpTo
         if (matches[0]) onJump(matches[0]);
       }}
     >
-      <YStack {...knobProps.gap} minWidth={280} maxWidth={420}>
+      <YStack
+        {...knobProps.gap}
+        minWidth={dialogBodyMinWidth}
+        maxWidth={sizeRecipeEscape(
+          420,
+          "jump-to-field: a scannable column width, and the match list scrolls past about six rows",
+        )}
+      >
         <Input
           value={query}
           onChangeText={setQuery}
@@ -236,7 +245,12 @@ export function JumpToFieldDialog({ open, onOpenChange, fields, onJump }: JumpTo
             autoFocus: true,
           }}
         />
-        <ScrollView maxHeight={240}>
+        <ScrollView
+          maxHeight={sizeRecipeEscape(
+            240,
+            "jump-to-field: a scannable column width, and the match list scrolls past about six rows",
+          )}
+        >
           <YStack>
             {matches.map((field, index) => {
               const position = getGroupPosition(index, matches.length);

package/src/form/FormSidebarPanel.tsx

@@ -50,6 +50,7 @@ import {
 import {
   ensureFocusVisibleRing,
   getGroupPosition,
+  sizeRecipeEscape,
   stackEdgeRadius,
   useResolvedKnobs,
 } from "@multiplatform.one/theme";
@@ -553,7 +554,10 @@ export function FormSidebarPanel({
             src={imageUrl}
             alt={t("documentImage", "Document image")}
             width="100%"
-            height={140}
+            height={sizeRecipeEscape(
+              140,
+              "document image: a fixed-height cover thumbnail in the sidebar",
+            )}
             objectFit="cover"
             {...knobProps.containerRadius}
           />

package/src/form/FormTimeline.tsx

@@ -607,7 +607,13 @@ export function FormTimeline({
         gap="$3"
         alignItems="flex-start"
       >
-        <YStack width={24} height={24} alignItems="center" justifyContent="center" opacity={0.6}>
+        <YStack
+          width="$1.5"
+          height="$1.5"
+          alignItems="center"
+          justifyContent="center"
+          opacity={0.6}
+        >
           {icon}
         </YStack>
         <XStack flex={1} gap="$1.5" alignItems="center" flexWrap="wrap" paddingTop={2}>
@@ -643,7 +649,13 @@ export function FormTimeline({
         gap="$3"
         alignItems="flex-start"
       >
-        <YStack width={24} height={24} alignItems="center" justifyContent="center" opacity={0.6}>
+        <YStack
+          width="$1.5"
+          height="$1.5"
+          alignItems="center"
+          justifyContent="center"
+          opacity={0.6}
+        >
           {icon}
         </YStack>
         <YStack

package/src/form/sidebar-dialogs.tsx

@@ -12,6 +12,7 @@ import { useResolvedKnobs } from "@multiplatform.one/theme";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
+import { dialogBodyMinWidth } from "../shared/measures";
 
 export interface SidebarAssignDialogProps {
   open: boolean;
@@ -44,7 +45,7 @@ export function SidebarAssignDialog({ open, onOpenChange, onAssign }: SidebarAss
       confirmDisabledReason={t("assignDisabled", "Pick a user first")}
       onConfirm={() => onAssign(user, description.trim() || undefined)}
     >
-      <YStack {...knobProps.gap} minWidth={280}>
+      <YStack {...knobProps.gap} minWidth={dialogBodyMinWidth}>
         <Link
           label={t("assignTo", "Assign to")}
           doctype="User"
@@ -94,7 +95,7 @@ export function SidebarShareDialog({ open, onOpenChange, onShare }: SidebarShare
       confirmDisabledReason={t("shareDisabled", "Pick a user first")}
       onConfirm={() => onShare(user, canWrite)}
     >
-      <YStack {...knobProps.gap} minWidth={280}>
+      <YStack {...knobProps.gap} minWidth={dialogBodyMinWidth}>
         <Link
           label={t("shareWith", "Share with")}
           doctype="User"

package/src/list/AddTagsDialog.tsx

@@ -9,6 +9,7 @@ import { useTranslation } from "react-i18next";
 import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
 import { useFrappeApp } from "../shared/useFrappeApp";
 import { bulkAddTag } from "./bulkActions";
+import { dialogBodyMinWidth } from "../shared/measures";
 
 export interface AddTagsDialogProps {
   doctype: string;
@@ -82,7 +83,7 @@ export function AddTagsDialog({ doctype, names, open, onOpenChange, onDone }: Ad
         void handleConfirm();
       }}
     >
-      <YStack gap="$3" minWidth={280}>
+      <YStack gap="$3" minWidth={dialogBodyMinWidth}>
         <Text color="$color11" fontSize="$3">
           {t("list.tagBody", {
             count: names.length,

package/src/list/AssignToDialog.tsx

@@ -8,6 +8,7 @@ import { useTranslation } from "react-i18next";
 import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
 import { useFrappeApp } from "../shared/useFrappeApp";
 import { bulkAssign } from "./bulkActions";
+import { dialogBodyMinWidth } from "../shared/measures";
 
 export interface AssignToDialogProps {
   doctype: string;
@@ -74,7 +75,7 @@ export function AssignToDialog({
         void handleConfirm();
       }}
     >
-      <YStack gap="$3" minWidth={280}>
+      <YStack gap="$3" minWidth={dialogBodyMinWidth}>
         <Text color="$color11" fontSize="$3">
           {t("list.assignBody", {
             count: names.length,

package/src/list/DoctypeListScreen.auth.spec.tsx

@@ -0,0 +1,84 @@
+// A Keycloak-signed-in reader hands the provider its token as a getter
+// (MPO-399). Every request the list makes must carry that bearer: the bench
+// answers a tokenless call as Guest (403), which is how the header count
+// read "0 results" beside a full page of rows.
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { screen, waitFor } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { BackofficeProvider } from "../config/BackofficeProvider";
+import { createMemoryNavigator } from "../navigation/navigator";
+import { DoctypeListScreen } from "./DoctypeListScreen";
+
+const doctype = "Pokemon";
+const bearer = "Bearer kc-access-token";
+
+const meta = {
+  name: doctype,
+  doctype: "DocType",
+  title_field: "pokemon_name",
+  fields: [
+    { fieldname: "pokemon_name", fieldtype: "Data", label: "Pokemon Name", in_list_view: 1 },
+  ],
+  permissions: [{ role: "Pokemon Reader", read: 1 }],
+};
+
+let run = 0;
+let calls: { path: string; authorization: string | null }[] = [];
+
+function json(body: unknown, status = 200) {
+  return new Response(JSON.stringify(body), {
+    status,
+    headers: { "content-type": "application/json" },
+  });
+}
+
+beforeEach(() => {
+  run += 1;
+  calls = [];
+  vi.stubGlobal("fetch", async (input: string | URL | Request, init?: RequestInit) => {
+    const url = new URL(String(input instanceof Request ? input.url : input));
+    const headers = new Headers(input instanceof Request ? input.headers : init?.headers);
+    const authorization = headers.get("Authorization");
+    calls.push({ path: `${url.pathname}${url.search}`, authorization });
+    if (authorization !== bearer) {
+      return json({ exc_type: "PermissionError" }, 403);
+    }
+    const method = url.pathname.replace(/^\/api\/method\//, "");
+    if (method === "frappe.auth.get_logged_user") return json({ message: "ash@pokemon.test" });
+    if (method === "frappe.core.doctype.user.user.get_roles") {
+      return json({ message: ["Pokemon Reader"] });
+    }
+    if (method === "frappe.desk.form.load.getdoctype") return json({ docs: [meta] });
+    if (method === "frappe.client.get_count") return json({ message: 21 });
+    if (url.pathname === `/api/resource/${doctype}`) {
+      return json({ data: [{ name: "bulbasaur", doctype, pokemon_name: "Bulbasaur" }] });
+    }
+    return json({ data: [], message: [] });
+  });
+});
+
+afterEach(() => {
+  vi.restoreAllMocks();
+  vi.unstubAllGlobals();
+});
+
+describe("DoctypeListScreen auth", () => {
+  it("sends the provider's token getter on every call, the header count included", async () => {
+    renderWithProviders(
+      <BackofficeProvider
+        frappe={{
+          baseURL: `https://list-auth-${run}.spec.test`,
+          auth: { useToken: true, type: "Bearer", token: async () => "kc-access-token" },
+        }}
+        navigation={createMemoryNavigator("/backoffice")}
+      >
+        <DoctypeListScreen doctype={doctype} />
+      </BackofficeProvider>,
+    );
+
+    await waitFor(() => expect(screen.getByText("21 results")).toBeTruthy(), { timeout: 5000 });
+    const counts = calls.filter((call) => call.path.includes("frappe.client.get_count"));
+    expect(counts.length).toBeGreaterThan(0);
+    expect(calls.filter((call) => call.authorization !== bearer)).toEqual([]);
+  });
+});

package/src/list/DoctypeListScreen.tsx

@@ -361,38 +361,11 @@ export function DoctypeListScreen({
   effectiveSortRef.current = { field: sortField, order: sortOrder };
   const currentFilters = effectiveFilters ?? withFixed(baseFilters);
 
-  const connection = useMemo(
-    () =>
-      config
-        ? {
-            baseURL: config.baseURL,
-            socketPort: config.socketPort,
-            siteName: config.siteName,
-            socketBaseURL: config.socketBaseURL,
-            auth: config.auth
-              ? {
-                  useToken: config.auth.useToken,
-                  token: typeof config.auth.token === "string" ? config.auth.token : undefined,
-                  type: config.auth.type,
-                }
-              : undefined,
-            // Forward the provider's engine options: the SyncModule is
-            // shared per baseURL and the FIRST consumer's config wins — a
-            // connection built without syncOptions here would silently
-            // strip persistKey/cdcInterval for every other screen when the
-            // list's aggregate watcher happens to construct the engine
-            // first (observed on GNOME, where this screen is the first
-            // engine touch).
-            syncOptions: config.syncOptions,
-            socketOptions: config.socketOptions,
-            fixtures: config.fixtures,
-          }
-        : undefined,
-    [config],
-  );
-
-  // Live result count — realtime refetch on doctype events.
-  const count = useFrappeAggregate(connection, {
+  // Live result count — realtime refetch on doctype events. It takes the
+  // provider config itself, never a copy: the SyncModule is shared per socket
+  // target and the first consumer's config wins, so a field a copy drops
+  // (syncOptions, a token getter) is gone for every screen.
+  const count = useFrappeAggregate(config, {
     doctype,
     filters: currentFilters.length > 0 ? currentFilters : undefined,
   });

package/src/list/ListSidebar.tsx

@@ -18,6 +18,7 @@
 import { Accordion, SizableText, YStack } from "@multiplatform.one/components";
 import { useCallback, useMemo } from "react";
 import { useTranslation } from "react-i18next";
+import { sizeRecipeEscape } from "@multiplatform.one/theme";
 import { useBackofficeCapabilities } from "../config/BackofficeProvider";
 import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
 import type { FrappeFilter, FrappeFilters } from "../shared/types";
@@ -156,7 +157,7 @@ export function ListSidebar({
 
   return (
     <YStack
-      width={200}
+      width={sizeRecipeEscape(200, "list sidebar: a fixed facet column beside the list")}
       paddingRight="$2"
       paddingBottom="$4"
       aria-label={t("list.sidebarLabel", "List filters sidebar")}

package/src/list/bulk-edit-dialog.tsx

@@ -22,6 +22,7 @@ import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
 import type { DocFieldMeta, DoctypeMeta } from "../shared/useDoctypeMeta";
 import { useFrappeApp } from "../shared/useFrappeApp";
 import type { BulkResult } from "./bulkActions";
+import { dialogBodyMinWidth } from "../shared/measures";
 
 /**
  * Fieldtypes with no stored value (layout / display / child rows) plus
@@ -274,7 +275,7 @@ export function BulkEditDialog({
         void handleConfirm();
       }}
     >
-      <YStack gap="$3" minWidth={280}>
+      <YStack gap="$3" minWidth={dialogBodyMinWidth}>
         <Text color="$color11" fontSize="$3">
           {t("list.editBody", {
             count: names.length,

package/src/list/filter-editor.tsx

@@ -19,6 +19,7 @@ import { Button, Input, Select } from "@multiplatform.one/forms";
 import { FunnelIcon, PlusIcon, XIcon } from "@phosphor-icons/react";
 import { useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
+import { sizeRecipeEscape } from "@multiplatform.one/theme";
 import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
 import type { FrappeFilters } from "../shared/types";
 import type { DoctypeMeta } from "../shared/useDoctypeMeta";
@@ -35,6 +36,7 @@ import {
   type FilterFieldDescriptor,
   type FilterRowDraft,
 } from "@multiplatform.one/frappe-ui";
+import { overlayListMaxHeight } from "../shared/measures";
 
 export interface FilterEditorButtonProps {
   meta?: DoctypeMeta;
@@ -141,7 +143,7 @@ export function FilterEditorPanel({
           {t("list.filters.empty", "No filters applied")}
         </Text>
       ) : scrollRows ? (
-        <ScrollView maxHeight={360}>{rowList}</ScrollView>
+        <ScrollView maxHeight={overlayListMaxHeight}>{rowList}</ScrollView>
       ) : (
         rowList
       )}
@@ -192,7 +194,13 @@ export function FilterEditorButton({ meta, filters, onFiltersChange }: FilterEdi
       </Popover.Trigger>
       <PopoverContent padding="$3">
         <Popover.Arrow borderWidth={1} borderColor="$borderColor" />
-        <YStack width={620} maxWidth="100%">
+        <YStack
+          width={sizeRecipeEscape(
+            620,
+            "filter editor: fixed panel and column widths so field, condition and value line up across rows",
+          )}
+          maxWidth="100%"
+        >
           <FilterEditorPanel
             key={openGen}
             meta={meta}
@@ -238,7 +246,12 @@ function FilterEditorRow({ row, fields, onChange, onRemove }: FilterEditorRowPro
       {/* Column wrappers: fields only stretch to the wrapper width through
           a column cross-axis on native (row wrappers leave them at
           intrinsic width — sliver bug in the list-tools sheet). */}
-      <YStack width={170}>
+      <YStack
+        width={sizeRecipeEscape(
+          170,
+          "filter editor: fixed panel and column widths so field, condition and value line up across rows",
+        )}
+      >
         <Select
           value={row.fieldname}
           onChange={(next) => {
@@ -257,7 +270,12 @@ function FilterEditorRow({ row, fields, onChange, onRemove }: FilterEditorRowPro
           aria-label={t("list.filters.field", "Filter field")}
         />
       </YStack>
-      <YStack width={150}>
+      <YStack
+        width={sizeRecipeEscape(
+          150,
+          "filter editor: fixed panel and column widths so field, condition and value line up across rows",
+        )}
+      >
         <Select
           value={row.operator}
           onChange={(next) => {
@@ -270,7 +288,13 @@ function FilterEditorRow({ row, fields, onChange, onRemove }: FilterEditorRowPro
           aria-label={t("list.filters.condition", "Condition")}
         />
       </YStack>
-      <YStack flex={1} minWidth={170}>
+      <YStack
+        flex={1}
+        minWidth={sizeRecipeEscape(
+          170,
+          "filter editor: fixed panel and column widths so field, condition and value line up across rows",
+        )}
+      >
         <FilterValueEditor row={row} field={field} onChange={onChange} />
       </YStack>
       <Button

package/src/list/filter-saved.tsx

@@ -23,6 +23,7 @@ import {
 } from "@multiplatform.one/table";
 import { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
+import { sizeRecipeEscape } from "@multiplatform.one/theme";
 import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
 import type { FrappeFilters } from "../shared/types";
 import { useFrappeApp } from "../shared/useFrappeApp";
@@ -162,7 +163,16 @@ export function SavedFiltersControl({
 
   return (
     <XStack gap="$2" alignItems="center">
-      {savedFilters.length > 0 ? <XStack maxWidth={220}>{dropdown}</XStack> : null}
+      {savedFilters.length > 0 ? (
+        <XStack
+          maxWidth={sizeRecipeEscape(
+            220,
+            "saved-filter picker: caps the trigger beside the filter chips",
+          )}
+        >
+          {dropdown}
+        </XStack>
+      ) : null}
       {filters.length > 0 ? (
         <FilterManager
           currentFilters={filters}

package/src/list/filter-sort.tsx

@@ -19,6 +19,7 @@ import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
 import type { DoctypeMeta } from "../shared/useDoctypeMeta";
+import { overlayListMaxHeight } from "../shared/measures";
 
 export interface SortControlProps {
   meta?: DoctypeMeta;
@@ -203,7 +204,12 @@ export function SortControl({
 
   return (
     <XStack gap="$1" alignItems="center">
-      <DropdownMenu items={items} closeOnSelect placement="bottom-end" maxHeight={360}>
+      <DropdownMenu
+        items={items}
+        closeOnSelect
+        placement="bottom-end"
+        maxHeight={overlayListMaxHeight}
+      >
         <Button
           size="$3"
           chromeless

package/src/list/sidebar-section.tsx

@@ -17,6 +17,8 @@ import {
   ensureFocusVisibleRing,
   getGroupPosition,
   hairline,
+  sizeRecipeEscape,
+  sizeRecipeForToken,
   stackRadiusProps,
   useGroupPosition,
   useResolvedKnobs,
@@ -129,12 +131,18 @@ export interface SidebarSectionSkeletonProps {
 
 export function SidebarSectionSkeleton({ rows = 3 }: SidebarSectionSkeletonProps) {
   const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
+  const { knobProps } = useResolvedKnobs();
+  const lineBone = sizeRecipeForToken(knobProps.sizeToken).fontSize;
   return (
     <YStack gap="$2" paddingVertical="$1" aria-busy aria-label={t("loading", "Loading")}>
       {Array.from({ length: rows }, (_, index) => (
         <XStack key={index} alignItems="center" justifyContent="space-between" gap="$2">
-          <Skeleton width={`${55 + ((index * 13) % 25)}%`} height={14} />
-          <Skeleton variant="rounded" width={26} height={14} />
+          <Skeleton width={`${55 + ((index * 13) % 25)}%`} height={lineBone} />
+          <Skeleton
+            variant="rounded"
+            width={sizeRecipeEscape(26, "count bone: the width of a two-digit count chip")}
+            height={lineBone}
+          />
         </XStack>
       ))}
     </YStack>

package/src/quickEntry/QuickEntryDialog.tsx

@@ -25,7 +25,7 @@ import { AsyncSkeleton, ScrollView, Text, XStack, YStack } from "@multiplatform.
 import { AdaptivePopup, Button } from "@multiplatform.one/forms";
 import type { FrappeDocData } from "@multiplatform.one/frappe";
 import { SchemaForm, useFrappeConfig } from "@multiplatform.one/frappe-ui";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { sizeRecipeEscape, useResolvedKnobs } from "@multiplatform.one/theme";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useBackofficeCapabilities } from "../config/BackofficeProvider";
@@ -290,7 +290,12 @@ export function QuickEntryDialog({
     >
       {showForm ? (
         <YStack {...knobProps.gap} testID="quick-entry-form">
-          <ScrollView maxHeight={480}>
+          <ScrollView
+            maxHeight={sizeRecipeEscape(
+              480,
+              "quick entry: the field list scrolls inside the dialog past this height",
+            )}
+          >
             <YStack {...knobProps.gap}>
               {/* A crashing field degrades to its inline error slot (per-field
                   wrapper); a form-level crash costs the mini-form body only —

package/src/report/queryReportFilterBar.tsx

@@ -19,7 +19,7 @@
 // read_only filters pass `disabled` through so pickers open nothing.
 import { View, XStack, YStack, isWeb } from "@multiplatform.one/components";
 import { Button, Checkbox, Input, Select, zIndex } from "@multiplatform.one/forms";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { sizeRecipeEscape, useResolvedKnobs } from "@multiplatform.one/theme";
 import { XIcon } from "@phosphor-icons/react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -289,8 +289,14 @@ export function QueryReportFilterBar({ filterMeta, filters, onApply }: QueryRepo
         return (
           <YStack
             key={filter.fieldname}
-            minWidth={180}
-            maxWidth={280}
+            minWidth={sizeRecipeEscape(
+              180,
+              "report filter bar: each filter flexes between a readable floor and a cap",
+            )}
+            maxWidth={sizeRecipeEscape(
+              280,
+              "report filter bar: each filter flexes between a readable floor and a cap",
+            )}
             flex={1}
             overflow="visible"
             data-query-report-filter={filter.fieldname}

package/src/report/report-toolbar.tsx

@@ -27,6 +27,7 @@ import { filterTupleLabel } from "@multiplatform.one/frappe-ui";
 import type { FrappeFilters } from "../shared/types";
 import type { SavedReportSummary } from "./savedReports";
 import type { ReportColumnDef } from "./reportViewModel";
+import { dialogBodyMinWidth, overlayListMaxHeight } from "../shared/measures";
 
 export interface ReportToolbarProps {
   /** Every pickable column (reportColumnsFromMeta). */
@@ -113,7 +114,7 @@ export function ReportToolbar({
             })}
           </Button>
         </DropdownMenu.Trigger>
-        <DropdownMenu.Content maxHeight={360}>
+        <DropdownMenu.Content maxHeight={overlayListMaxHeight}>
           <DropdownMenu.Label>{t("report.pickColumns", "Report columns")}</DropdownMenu.Label>
           {columns.map((column) => {
             const isSelected = selectedSet.has(column.fieldname);
@@ -153,7 +154,7 @@ export function ReportToolbar({
               : t("report.groupBy", "Group by")}
           </Button>
         </DropdownMenu.Trigger>
-        <DropdownMenu.Content maxHeight={360}>
+        <DropdownMenu.Content maxHeight={overlayListMaxHeight}>
           <DropdownMenu.CheckboxItem
             checked={!groupBy}
             closeOnSelect
@@ -187,7 +188,7 @@ export function ReportToolbar({
               : t("report.savedReport", "Select Report")}
           </Button>
         </DropdownMenu.Trigger>
-        <DropdownMenu.Content maxHeight={360}>
+        <DropdownMenu.Content maxHeight={overlayListMaxHeight}>
           <DropdownMenu.CheckboxItem
             checked={!currentReport}
             closeOnSelect
@@ -241,7 +242,7 @@ export function ReportToolbar({
             bare boolean leaked to the DOM (LC-46 class). */}
         <PopoverContent {...knobProps.panelPadding}>
           <Popover.Arrow borderWidth={1} borderColor="$borderColor" />
-          <XStack gap="$2" alignItems="center" minWidth={280}>
+          <XStack gap="$2" alignItems="center" minWidth={dialogBodyMinWidth}>
             <YStack flex={1} minWidth={0}>
               <Input
                 size="$3"