@multiplatform.one/backoffice 7.23.1 → 7.23.2

package/src/desk/Desk.stories.tsx

@@ -13,9 +13,15 @@
 import { Text, YStack } from "@multiplatform.one/components";
 import { InMemoryFixtureProvider } from "@multiplatform.one/frappe";
 import type { ReactNode } from "react";
+import { sizeRecipeEscape } from "@multiplatform.one/theme";
 import { Desk } from "./Desk";
 import type { DeskSurfaceProps } from "./DeskSurface";
 
+const frameHeight = sizeRecipeEscape(
+  680,
+  "story canvas: a fixed-height frame for a full-height screen to fill",
+);
+
 const meta = {
   title: "Screens/Backoffice/Desk",
   component: Desk,
@@ -176,7 +182,7 @@ const frappe = () => ({ baseURL: MOCK_HOST, fixtures: makeFixtures() });
 
 function Frame({ children }: { children: ReactNode }) {
   return (
-    <YStack height={680} minHeight={0}>
+    <YStack height={frameHeight} minHeight={0}>
       {children}
     </YStack>
   );

package/src/desk/DeskSurface.stories.tsx

@@ -12,11 +12,17 @@
 import { Text, YStack } from "@multiplatform.one/components";
 import { InMemoryFixtureProvider } from "@multiplatform.one/frappe";
 import type { ReactNode } from "react";
+import { sizeRecipeEscape } from "@multiplatform.one/theme";
 import { BackofficeProvider } from "../config/BackofficeProvider";
 import { createMemoryNavigator } from "../navigation/navigator";
 import { DeskSurface, DeskSurfaceLoading, type DeskSurfaceProps } from "./DeskSurface";
 import type { DeskTarget } from "./target";
 
+const frameHeight = sizeRecipeEscape(
+  560,
+  "story canvas: a fixed-height frame for a full-height screen to fill",
+);
+
 const meta = {
   title: "Screens/Backoffice/DeskSurface",
   component: DeskSurface,
@@ -193,7 +199,7 @@ function Surface({ target, children }: { target?: DeskTarget; children?: ReactNo
       frappe={{ baseURL: MOCK_HOST, fixtures: makeFixtures() }}
       navigation={createMemoryNavigator("/backoffice")}
     >
-      <YStack flex={1} height={560} minHeight={0}>
+      <YStack flex={1} height={frameHeight} minHeight={0}>
         {children ?? (target ? <DeskSurface target={target} /> : null)}
       </YStack>
     </BackofficeProvider>

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/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"

package/src/shared/measures.ts

@@ -0,0 +1,11 @@
+import { sizeRecipeEscape } from "@multiplatform.one/theme";
+
+export const dialogBodyMinWidth = sizeRecipeEscape(
+  280,
+  "dialog body floor: a reading width for the form inside a dialog or popover",
+);
+
+export const overlayListMaxHeight = sizeRecipeEscape(
+  360,
+  "overlay list cap: a menu or popover list scrolls past this height instead of growing",
+);

package/src/shell/BackofficeShell.tsx

@@ -20,7 +20,12 @@
 import { SizableText, SkipLink, XStack, YStack, isWeb } from "@multiplatform.one/components";
 import { Button } from "@multiplatform.one/forms";
 import * as componentsBarrel from "@multiplatform.one/components";
-import { hairline, useLayoutSizeClass, useResolvedKnobs } from "@multiplatform.one/theme";
+import {
+  hairline,
+  sizeRecipeEscape,
+  useLayoutSizeClass,
+  useResolvedKnobs,
+} from "@multiplatform.one/theme";
 import { ListIcon, XIcon } from "@phosphor-icons/react";
 import type React from "react";
 import { useEffect, useRef, useState } from "react";
@@ -172,7 +177,14 @@ export function BackofficeShell({ children, activePath, onNavigate }: Backoffice
           when the awesomebar capability is off) */}
       <XStack flex={1} minWidth={0} justifyContent="center">
         {capabilities.awesomebar.enabled && (
-          <XStack flex={1} maxWidth={560} minWidth={0}>
+          <XStack
+            flex={1}
+            maxWidth={sizeRecipeEscape(
+              560,
+              "awesomebar: caps the centred search field in the banner",
+            )}
+            minWidth={0}
+          >
             <BackofficeAwesomebar focusRef={awesomebarRef} />
           </XStack>
         )}

package/src/shell/NotFoundScreen.stories.tsx

@@ -7,10 +7,16 @@
 import { YStack } from "@multiplatform.one/components";
 import { InMemoryFixtureProvider } from "@multiplatform.one/frappe";
 import type { ReactNode } from "react";
+import { sizeRecipeEscape } from "@multiplatform.one/theme";
 import { BackofficeProvider } from "../config/BackofficeProvider";
 import { createMemoryNavigator } from "../navigation/navigator";
 import { NotFoundScreen } from "./NotFoundScreen";
 
+const frameHeight = sizeRecipeEscape(
+  420,
+  "story canvas: a fixed-height frame for a full-height screen to fill",
+);
+
 const meta = {
   title: "Screens/Backoffice/NotFoundScreen",
   component: NotFoundScreen,
@@ -46,7 +52,7 @@ function Host({
       frappe={{ baseURL: MOCK_HOST, fixtures: new InMemoryFixtureProvider({}) }}
       navigation={navigation}
     >
-      <YStack flex={1} height={420} justifyContent="center">
+      <YStack flex={1} height={frameHeight} justifyContent="center">
         {children}
       </YStack>
     </BackofficeProvider>