@@ -0,0 +1,11 @@
+---
+'@object-ui/fields': patch
+'@object-ui/plugin-form': patch
+---
+
+fix(fields, plugin-form): the create and edit form's controls reach a 44 px touch target at phone width
+
+Clause-②: no
+Metadata-protocol: none
+
+Below the `sm` breakpoint (640 px) the field widgets a create or edit form draws now carry the same `min-h-[44px] sm:min-h-0` touch floor the form renderer's built-in controls already did. That covers the text, email, phone, URL, number, currency and percent inputs, the percent slider's hit area, the select trigger and its options, the lookup trigger with its clear, browse-all, search and quick-create controls, the record picker's search and filter buttons, the date picker's input, clear and calendar buttons, a 44 px calendar day, and the line-item grid's cells, row buttons and add-line button, and the file field's take-photo and per-file remove buttons. The modal, drawer and master-detail form footers' buttons do the same. From `sm` up every control keeps its previous height. No prop, export or metadata key changes.
@@ -0,0 +1,144 @@
+import { test, expect, type Page } from '@playwright/test';
+import { compile } from 'tailwindcss';
+import { readFileSync } from 'node:fs';
+import { fileURLToPath } from 'node:url';
+import path from 'node:path';
+import { uiRoot } from '../scripts/ui-root.mjs';
+
+/**
+ * GEOMETRY pin for the form field controls' phone touch floor (objectstack#29072).
+ *
+ * At 375×812 and 390×844 the create / edit form drew 40 px inputs, select and
+ * lookup triggers, 32 px calendar days and 28 px date-picker buttons. The fix
+ * gives each control `PHONE_TOUCH_HEIGHT` / `PHONE_TOUCH_SQUARE`, and the
+ * calendar a 44 px cell below `sm`.
+ *
+ * ⚠️ A Playwright spec and not a vitest test for the reason
+ * `record-path-phone-row.spec.ts` gives: jsdom has no layout engine. The
+ * class-shape half sits beside the widgets in
+ * `touchTarget.formControls-29072.test.tsx`.
+ *
+ * REAL, read out of the source at run time: the two tokens, the `Input` and
+ * icon-`Button` base heights, and the calendar's cell-size classes (the
+ * primitive's default and the date picker's override) — plus real Tailwind
+ * compiled from the installed `tailwindcss` for exactly those candidates.
+ * FIXTURE: the element tree.
+ */
+
+const REPO_ROOT = uiRoot();
+const read = (rel: string) => readFileSync(path.join(REPO_ROOT, rel), 'utf8');
+
+function grab(file: string, re: RegExp, mustContain: string[]): string {
+  const m = read(file).match(re);
+  if (!m) throw new Error(`${file}: nothing matched ${re}`);
+  for (const token of mustContain) {
+    if (!m[1].split(/\s+/).includes(token)) {
+      throw new Error(`${file}: ${re} matched "${m[1]}", which does not carry "${token}".`);
+    }
+  }
+  return m[1];
+}
+
+const TOUCH = 'packages/fields/src/widgets/touchTarget.ts';
+const CLS = {
+  height: grab(TOUCH, /PHONE_TOUCH_HEIGHT = '([^']+)'/, ['min-h-[44px]', 'sm:min-h-0']),
+  square: grab(TOUCH, /PHONE_TOUCH_SQUARE = '([^']+)'/, ['min-w-[44px]', 'sm:min-w-0']),
+  input: grab('packages/components/src/ui/input.tsx', /"(flex h-10 w-full[^"]+)"/, ['h-10']),
+  iconButton: grab('packages/components/src/ui/button.tsx', /icon: "([^"]+)"/, ['h-10']),
+  calendarRoot: grab('packages/components/src/ui/calendar.tsx', /"(bg-background group\/calendar p-3 [^"]+)"/, ['[--cell-size:2rem]']),
+  pickerCell: grab(
+    'packages/fields/src/widgets/date-picker/DatePickerField.tsx',
+    /className="(\[--cell-size:[^"]+)"/,
+    ['[--cell-size:2.75rem]', 'sm:[--cell-size:2rem]'],
+  ),
+};
+
+const mergedCalendarRoot = CLS.calendarRoot
+  .split(/\s+/)
+  .filter((t) => !t.startsWith('[--cell-size:'))
+  .join(' ');
+
+/** A form column at phone width (the dialog body's 16 px gutters) holding the controls. */
+const fixture = () =>
+  '<div style="padding:0 16px">' +
+  `<input id="input" class="${CLS.input} ${CLS.height}" />` +
+  `<div style="position:relative;margin-top:8px"><input class="${CLS.input} ${CLS.height}" />` +
+  `<button id="dateTrigger" class="h-7 w-7 ${CLS.square}" style="position:absolute;right:4px;top:0"></button></div>` +
+  `<button id="browse" class="${CLS.iconButton} ${CLS.square}"></button>` +
+  // The calendar: the primitive's root class merged with the date picker's
+  // override the way `cn` merges them (tailwind-merge keeps the LATER
+  // `[--cell-size:…]`); seven day cells in one row.
+  `<div id="calendar" class="${mergedCalendarRoot} ${CLS.pickerCell}" style="display:inline-block">` +
+  '<div id="week" style="display:flex">' +
+  Array.from({ length: 7 }, (_, i) => `<button class="size-(--cell-size)">${i + 1}</button>`).join('') +
+  '</div></div>' +
+  '</div>';
+
+let css = '';
+test.beforeAll(async () => {
+  const twEntry = fileURLToPath(import.meta.resolve('tailwindcss/index.css'));
+  const compiler = await compile('@import "tailwindcss";', {
+    base: path.dirname(twEntry),
+    loadStylesheet: async (id: string, base: string) => {
+      const file = id === 'tailwindcss' ? twEntry : path.resolve(base, id);
+      return { path: file, base: path.dirname(file), content: readFileSync(file, 'utf8') };
+    },
+  });
+  css = compiler.build(
+    [...Object.values(CLS), 'h-7 w-7 size-(--cell-size)'].join(' ').split(/\s+/).filter(Boolean),
+  );
+  if (!css.includes('@media')) throw new Error('Tailwind produced no media queries — `sm:` would be inert.');
+});
+
+type Box = { w: number; h: number; right: number };
+async function measure(page: Page, width: number) {
+  await page.setViewportSize({ width, height: 812 });
+  await page.setContent(`<style>html,body{margin:0}${css}</style>${fixture()}`, { waitUntil: 'load' });
+  return page.evaluate(() => {
+    const box = (sel: string) => {
+      const r = document.querySelector(sel)!.getBoundingClientRect();
+      return { w: Math.round(r.width * 100) / 100, h: Math.round(r.height * 100) / 100, right: Math.round(r.right) };
+    };
+    const days = Array.from(document.querySelectorAll('#week button')).map((b) => {
+      const r = b.getBoundingClientRect();
+      return { w: r.width, h: r.height, right: r.right };
+    });
+    return {
+      input: box('#input'),
+      dateTrigger: box('#dateTrigger'),
+      browse: box('#browse'),
+      calendar: box('#calendar'),
+      days,
+      docScroll: document.documentElement.scrollWidth,
+    };
+  }) as Promise<{ input: Box; dateTrigger: Box; browse: Box; calendar: Box; days: Box[]; docScroll: number }>;
+}
+
+test.describe('form field controls at phone width (objectstack#29072)', () => {
+  for (const width of [375, 390]) {
+    test(`every control is at least 44 px at ${width}px, and the calendar fits the form`, async ({ page }) => {
+      const r = await measure(page, width);
+      expect(r.input.h, 'text input height').toBeGreaterThanOrEqual(44);
+      expect(r.dateTrigger.h, 'date-picker button height').toBeGreaterThanOrEqual(44);
+      expect(r.dateTrigger.w, 'date-picker button width').toBeGreaterThanOrEqual(44);
+      expect(r.browse.h, 'browse-all button height').toBeGreaterThanOrEqual(44);
+      expect(r.browse.w, 'browse-all button width').toBeGreaterThanOrEqual(44);
+      for (const d of r.days) {
+        expect(d.w, 'calendar day width').toBeGreaterThanOrEqual(44);
+        expect(d.h, 'calendar day height').toBeGreaterThanOrEqual(44);
+      }
+      // A week of 44 px days plus the calendar's padding stays inside the form
+      // column: no horizontal page scroll.
+      expect(r.calendar.right, 'calendar ends past the form column').toBeLessThanOrEqual(width - 16);
+      expect(r.docScroll, 'the page scrolls sideways').toBeLessThanOrEqual(width);
+    });
+  }
+
+  test('from sm up the primitives keep their own heights', async ({ page }) => {
+    const r = await measure(page, 1024);
+    expect(r.input.h).toBe(40);
+    expect(r.dateTrigger.h).toBe(28);
+    expect(r.browse.h).toBe(40);
+    for (const d of r.days) expect(d.h).toBe(32);
+  });
+});
@@ -2,6 +2,7 @@ import React from 'react';
 import { Input, EmptyValue, cn } from '@object-ui/components';
 import { FieldWidgetComponentProps } from './types.js';
 import { toDomProps } from './toDomProps.js';
+import { PHONE_TOUCH_HEIGHT } from './touchTarget.js';
 import { useLocalization, useDisplayLocale } from '@object-ui/i18n';
 import { resolveFieldCurrency, currencySymbol } from '../currency.js';
 import { useBadInputRefusal, BadInputMessage, BAD_INPUT_BORDER } from './numberBadInput.js';
@@ -190,7 +191,7 @@ export function CurrencyField({ value, onChange, field, readonly, error, classNa
           // (and carries the wrong width for a JPY or KWD field).
           placeholder={currencyField?.placeholder}
           disabled={readonly || props.disabled}
-          className={cn(symbol ? 'pl-8' : '', refusal ? BAD_INPUT_BORDER : '', className)}
+          className={cn(PHONE_TOUCH_HEIGHT, symbol ? 'pl-8' : '', refusal ? BAD_INPUT_BORDER : '', className)}
           // Surface the field's declared range (e.g. `min: 0` on a budget) so the
           // browser's spinner/keyboard affordances respect it (objectui#2572);
           // server-side validation still owns enforcement.
 
@@ -1,5 +1,6 @@
 import React from 'react';
-import { Input, EmptyValue } from '@object-ui/components';
+import { Input, EmptyValue, cn } from '@object-ui/components';
+import { PHONE_TOUCH_HEIGHT } from './touchTarget.js';
 import { FieldWidgetComponentProps } from './types.js';
 import { toDomProps } from './toDomProps.js';
 
@@ -27,6 +28,7 @@ export function EmailField({ value, onChange, field, readonly, error, ...props }
     <Input
       {...domProps}
       type="email"
+      className={cn(PHONE_TOUCH_HEIGHT, domProps.className)}
       value={value || ''}
       onChange={(e) => onChange(e.target.value)}
       placeholder={config?.placeholder || 'email@example.com'}
 
@@ -1,11 +1,12 @@
 import React, { useRef, useState, useCallback } from 'react';
-import { Button, EmptyValue } from '@object-ui/components';
+import { Button, EmptyValue, cn } from '@object-ui/components';
 import { useUpload } from '@object-ui/providers';
 import { useObjectTranslation } from '@object-ui/i18n';
 import { Upload, X, File as FileIcon, ImageIcon, Camera, Loader2, Lock } from 'lucide-react';
 import { FieldWidgetComponentProps } from './types.js';
 import { toDomProps } from './toDomProps.js';
 import { toHostGroupProps } from './toHostGroupProps.js';
+import { PHONE_TOUCH_HEIGHT, PHONE_TOUCH_SQUARE } from './touchTarget.js';
 import { useUploadingSignal } from './useUploadingSignal.js';
 import { useUploadingScopeHold } from './uploadingScope.js';
 import { maxSizeError, type TranslateFn } from './file-size-guard.js';
@@ -344,7 +345,7 @@ export function FileField({ value, onChange, field, readonly, onUploadingChange,
             type="button"
             variant="outline"
             size="sm"
-            className="w-full"
+            className={cn('w-full', PHONE_TOUCH_HEIGHT)}
             onClick={(e) => {
               e.stopPropagation();
               cameraRef.current?.click();
@@ -430,7 +431,7 @@ export function FileField({ value, onChange, field, readonly, onUploadingChange,
                     e.stopPropagation();
                     handleRemove(idx);
                   }}
-                  className="h-6 w-6 p-0"
+                  className={cn('h-6 w-6 p-0', PHONE_TOUCH_SQUARE)}
                   aria-label={t('fields.file.remove', { name: file.name })}
                 >
                   <X className="size-3" />
 
@@ -25,6 +25,7 @@ import { FileCell } from './FileField.js';
 import { toDateInputValue, toDateTimeInputValue, fromDateTimeInputValue, isImpossibleStoredDay } from './nativeDateValue.js';
 import { useFieldTranslation } from './useFieldTranslation.js';
 import { toDomProps } from './toDomProps.js';
+import { PHONE_TOUCH_HEIGHT, PHONE_TOUCH_SQUARE } from './touchTarget.js';
 import { toHostGroupProps } from './toHostGroupProps.js';
 import type { InlineGridColumn } from '@objectstack/spec/data';
 import { GRID_FIELD_RETIRED_KEYS, type GridFieldMetadata, type GridFieldRetiredKey } from '@object-ui/types';
@@ -1246,15 +1247,15 @@ function GridFieldBody({
       return (
         <Select value={val != null ? String(val) : ''} onValueChange={(v) => setCell(rowIdx, c, v)} disabled={locked}>
           <SelectTrigger
-            className="h-8 rounded-none border-0 bg-transparent px-2 shadow-none focus:ring-1 focus:ring-ring/60"
+            className={cn('h-8 rounded-none border-0 bg-transparent px-2 shadow-none focus:ring-1 focus:ring-ring/60', PHONE_TOUCH_HEIGHT)}
             aria-label={c.label || c.name}
             aria-invalid={invalid || undefined}
           >
             <SelectValue placeholder="—" />
           </SelectTrigger>
           <SelectContent>
             {(c.options || []).map((o) => (
-              <SelectItem key={o.value} value={o.value}>{o.label}</SelectItem>
+              <SelectItem key={o.value} value={o.value} className={PHONE_TOUCH_HEIGHT}>{o.label}</SelectItem>
             ))}
           </SelectContent>
         </Select>
@@ -1284,6 +1285,7 @@ function GridFieldBody({
           onKeyDown={(e) => onCellKeyDown(e, rowIdx, colIdx)}
           className={cn(
             'h-8 rounded-none border-0 bg-transparent px-2 shadow-none focus-visible:ring-1 focus-visible:ring-ring/60',
+            PHONE_TOUCH_HEIGHT,
             adornment && 'pl-6',
             isNumeric(c.type) && 'text-right tabular-nums',
           )}
@@ -1471,7 +1473,7 @@ function GridFieldBody({
                               type="button"
                               variant="ghost"
                               size="icon"
-                              className="h-8 w-8 text-muted-foreground hover:text-foreground"
+                              className={cn('h-8 w-8 text-muted-foreground hover:text-foreground', PHONE_TOUCH_SQUARE)}
                               aria-label={openRowLabel}
                               title={openRowLabel}
                               data-testid={`line-items-expand-${rowIdx}`}
@@ -1489,7 +1491,7 @@ function GridFieldBody({
                               // discoverable and reachable on touch/coarse-pointer devices,
                               // which have no hover. The action column width is reserved
                               // regardless, so this adds no layout shift.
-                              className="h-8 w-8 text-muted-foreground hover:text-foreground"
+                              className={cn('h-8 w-8 text-muted-foreground hover:text-foreground', PHONE_TOUCH_SQUARE)}
                               aria-label={duplicateRowLabel}
                               title={duplicateRowLabel}
                               data-testid={`line-items-duplicate-${rowIdx}`}
@@ -1505,7 +1507,7 @@ function GridFieldBody({
                               variant="ghost"
                               size="icon"
                               // Always visible — see the duplicate button above.
-                              className="h-8 w-8 text-muted-foreground hover:text-destructive"
+                              className={cn('h-8 w-8 text-muted-foreground hover:text-destructive', PHONE_TOUCH_SQUARE)}
                               aria-label={removeRowLabel}
                               data-testid={`line-items-remove-${rowIdx}`}
                               onClick={() => removeRow(rowIdx)}
@@ -1548,6 +1550,7 @@ function GridFieldBody({
           type="button"
           variant="outline"
           size="sm"
+          className={PHONE_TOUCH_HEIGHT}
           onClick={isList && onAdd ? onAdd : addRow}
           disabled={maxRows != null && rows.length >= maxRows}
           data-testid="line-items-add"
 
@@ -12,6 +12,7 @@ import { cn,
 import { Search, X, Loader2, AlertCircle, Plus, TableProperties } from 'lucide-react';
 import { FieldWidgetComponentProps } from './types.js';
 import { toDomProps } from './toDomProps.js';
+import { PHONE_TOUCH_HEIGHT, PHONE_TOUCH_SQUARE } from './touchTarget.js';
 import type { DataSource, FormField, QueryParams, LookupColumnDef, LookupFieldMetadata } from '@object-ui/types';
 import { RecordPickerDialog, lookupFiltersToRecord } from './RecordPickerDialog.js';
 import type { RecordPickerFilterColumn } from './RecordPickerDialog.js';
@@ -1604,6 +1605,7 @@ export function LookupField({ value, onChange, field, readonly, error: fieldErro
         // clip instead (objectui#3466). flex-1/min-w-0 keep handling the
         // flex-parent (form row) case.
         'min-w-0 max-w-full flex-1 justify-start text-left font-normal',
+        PHONE_TOUCH_HEIGHT,
         compact && 'h-8 rounded-none border-0 bg-transparent px-2 shadow-none focus-visible:ring-1 focus-visible:ring-ring/60',
       )}
       type="button"
@@ -1682,7 +1684,7 @@ export function LookupField({ value, onChange, field, readonly, error: fieldErro
     <Button
       variant="ghost"
       size="icon"
-      className="shrink-0 text-muted-foreground hover:text-destructive"
+      className={cn('shrink-0 text-muted-foreground hover:text-destructive', PHONE_TOUCH_SQUARE)}
       type="button"
       onClick={() => handleRemove(selectedOptions[0]?.value)}
       aria-label={t('lookup.remove', { label: singleSelectedLabel })}
@@ -1801,7 +1803,7 @@ export function LookupField({ value, onChange, field, readonly, error: fieldErro
                   value={searchQuery}
                   onChange={(e) => handleSearchChange(e.target.value)}
                   onKeyDown={handleSearchKeyDown}
-                  className="w-full pl-9 h-8 text-sm"
+                  className={cn('w-full pl-9 h-8 text-sm', PHONE_TOUCH_HEIGHT)}
                   role="combobox"
                   aria-autocomplete="list"
                   aria-controls={listboxId}
@@ -1855,7 +1857,7 @@ export function LookupField({ value, onChange, field, readonly, error: fieldErro
                     <Button
                       variant="ghost"
                       size="sm"
-                      className="mt-2 gap-1"
+                      className={cn('mt-2 gap-1', PHONE_TOUCH_HEIGHT)}
                       type="button"
                       disabled={creating}
                       onClick={() => handleCreateNew(searchQuery)}
@@ -1932,7 +1934,7 @@ export function LookupField({ value, onChange, field, readonly, error: fieldErro
                   {hasDataSource && totalCount > filteredOptions.length && (
                     <button
                       type="button"
-                      className="w-full text-center px-3 py-2 rounded-md text-sm font-medium text-primary hover:bg-accent flex items-center justify-center gap-1.5"
+                      className={cn('w-full text-center px-3 py-2 rounded-md text-sm font-medium text-primary hover:bg-accent flex items-center justify-center gap-1.5', PHONE_TOUCH_HEIGHT)}
                       onClick={() => {
                         setIsOpen(false);
                         setIsPickerOpen(true);
@@ -1947,7 +1949,7 @@ export function LookupField({ value, onChange, field, readonly, error: fieldErro
                   {canCreate && (
                     <button
                       type="button"
-                      className="w-full text-left px-3 py-2 rounded-md text-sm hover:bg-accent flex items-center gap-1.5 text-muted-foreground"
+                      className={cn('w-full text-left px-3 py-2 rounded-md text-sm hover:bg-accent flex items-center gap-1.5 text-muted-foreground', PHONE_TOUCH_HEIGHT)}
                       disabled={creating}
                       onClick={() => handleCreateNew(searchQuery)}
                     >
@@ -1970,7 +1972,7 @@ export function LookupField({ value, onChange, field, readonly, error: fieldErro
         <Button
           variant="outline"
           size="icon"
-          className="shrink-0"
+          className={cn('shrink-0', PHONE_TOUCH_SQUARE)}
           type="button"
           // Gated exactly like the main trigger (#2215) — pre-fix this button
           // opened the full unscoped table while the dependency was missing.