@rebasepro/admin 0.13.0 → 0.13.1-canary.g394d868

package/src/components/SidePanelBinding.tsx

@@ -9,7 +9,7 @@ import { EditViewBinding } from "./EditViewBinding";
 import { DetailViewBinding } from "./DetailViewBinding";
 import { useSideDialogContext } from "./SideDialogs";
 import { useNavigate } from "react-router";
-import { saveEntityToMemoryCache, useComponentOverride } from "@rebasepro/app";
+import { useComponentOverride } from "@rebasepro/app";
 import { useCollectionRegistryController } from "../hooks/navigation/contexts/CollectionRegistryContext";
 import { useSidePanel } from "../hooks/useSidePanel";
 import { useUrlController } from "../hooks/navigation/contexts/UrlContext";
@@ -49,21 +49,60 @@ export function SidePanelBinding(props: SidePanelBindingProps) {
     const sideDialogsController = useSideDialogContext();
     const urlController = useUrlController();
 
+    /**
+     * The X in the identity bar.
+     *
+     * Unforced, so it stops at the same unsaved-changes prompt that Escape and
+     * a click outside already do. It used to clear `blocked` and force the
+     * close, which made the one control actually labelled "close" the only way
+     * out of the panel that dropped an edit without asking.
+     *
+     * `props.onClose` is not called here: the panel carries the same callback
+     * (see `propsToSidePanel`) and {@link SideDialogs} fires it once the panel
+     * really closes — which is after the prompt, not before it.
+     */
     const onClose = () => {
-        if (props.onClose) {
-            props.onClose();
-        }
+        close();
+    }
 
+    /**
+     * Closing because the record was just saved, which is the one case that has
+     * to force. `blocked` is driven by an effect on the form's dirty flag and is
+     * still true for a tick after a save; prompting about unsaved changes here
+     * would be asking about values that are already on the server.
+     */
+    const closeAfterSave = () => {
         setBlocked(false);
         close(true);
     }
 
+    /**
+     * The panel's response to a save, and the one place it decides where the
+     * panel goes next.
+     *
+     * Exactly **one** panel navigation is raised here. These branches used to
+     * run independently — a `replace` onto the saved record's address *and* a
+     * close — and because the last navigation is the one that survives, which
+     * of them the user got was settled by statement order rather than by
+     * intent. Closing wins by construction now: moving a panel to a new address
+     * it is about to leave is work whose only effect is to fight the close.
+     *
+     * `props.onUpdate` runs last for the same reason. It belongs to whoever
+     * opened the panel and it is free to navigate — the reference picker's
+     * selects the record and closes the picker — so the opener's intent should
+     * be the final word, not something this panel overwrites on its way out.
+     */
     const onUpdate = (params: OnUpdateParams) => {
-        if (props.onUpdate) {
-            props.onUpdate(params);
-        }
         setEditInDialog(false);
-        if (params.status !== "existing") {
+
+        // Either "save and close" was clicked, or the opener asked for it when
+        // it opened the panel.
+        const closeRequested = sideDialogsController.pendingClose || props.closeOnSave;
+
+        if (closeRequested) {
+            sideDialogsController.setPendingClose(false);
+            closeAfterSave();
+        } else if (params.status !== "existing") {
             // A newly created entity replaces the panel with its own address,
             // which already leaves the edit view behind.
             sidePanelController.replace({
@@ -77,11 +116,7 @@ export function SidePanelBinding(props: SidePanelBindingProps) {
             closeEditView();
         }
 
-        if (sideDialogsController.pendingClose) {
-            sideDialogsController.setPendingClose(false);
-            onClose();
-        }
-
+        props.onUpdate?.(params);
     }
 
     const parentCollectionSlugs = useMemo(() => {
@@ -181,6 +216,43 @@ entityId }
         return <div className={"w-full"}/>;
     }
 
+    const closeButton = (
+        <IconButton
+            className="self-center"
+            size={"small"}
+            onClick={onClose}>
+            <XIcon/>
+        </IconButton>
+    );
+
+    /**
+     * Where the panel's own two controls sit, which is not the same question in
+     * the two layouts that have them.
+     *
+     * A **side panel** slides in over the list from the right, and its leading
+     * edge is the seam between the two. Close belongs on that seam — it points
+     * back at the thing still visible behind it — and it is where the eye
+     * already is, because the breadcrumb starts there.
+     *
+     * A **dialog** has no seam and nothing behind it to point at. It is a box
+     * centred on a dimmed screen, and every box like it on every platform is
+     * dismissed from its top-right corner. Close was sitting at the far left
+     * of the bar, a full dialog's width from the expand button it belongs
+     * beside, in the one corner that means "back" in a layout with no back.
+     *
+     * So in a dialog the two travel together at the trailing edge, expand then
+     * close: the window controls, after the record's actions and its overflow
+     * menu, in the corner a dialog is closed from.
+     */
+    const barActionsStart = isDialogMode ? undefined : closeButton;
+
+    const windowControls = (expandButton: React.ReactNode) => (
+        <div className="flex gap-1 items-center">
+            {expandButton}
+            {isDialogMode && closeButton}
+        </div>
+    );
+
     return (
         <>
             <ErrorBoundary>
@@ -193,31 +265,20 @@ entityId }
                         parentCollectionSlugs={parentCollectionSlugs}
                         parentEntityIds={parentEntityIds}
                         onEditClick={openEditView}
-                        barActionsStart={
-                            // At the bar's leading edge, where the breadcrumb
-                            // starts: the corner of the panel it closes.
-                            <IconButton
+                        barActionsStart={barActionsStart}
+                        barActions={() => windowControls(
+                            allowFullScreen && <IconButton
                                 className="self-center"
                                 size={"small"}
-                                onClick={onClose}>
-                                <XIcon/>
-                            </IconButton>}
-                        barActions={({
-                            status,
-                            values
-                        }) => <div className="flex gap-1">
-                                {allowFullScreen && <IconButton
-                                    className="self-center"
-                                    size={"small"}
-                                    onClick={() => {
-                                        if (entityId) {
-                                            const fullScreenUrl = urlController.buildUrlCollectionPath(`${path}/${entityId}`);
-                                            navigate(fullScreenUrl, { state: null });
-                                        }
-                                    }}>
-                                    <Maximize2Icon/>
-                                </IconButton>}
-                            </div>}
+                                onClick={() => {
+                                    if (entityId) {
+                                        const fullScreenUrl = urlController.buildUrlCollectionPath(`${path}/${entityId}`);
+                                        navigate(fullScreenUrl, { state: null });
+                                    }
+                                }}>
+                                <Maximize2Icon/>
+                            </IconButton>
+                        )}
                         onTabChange={({
                             entityId: tabEntityId,
                             selectedTab,
@@ -245,38 +306,33 @@ entityId }
                         onValuesModified={onValuesModified}
                         onSaved={onUpdate}
                         navigateBack={closeEditView}
-                        barActionsStart={
-                            // At the bar's leading edge, where the breadcrumb
-                            // starts: the corner of the panel it closes.
-                            <IconButton
+                        barActionsStart={barActionsStart}
+                        barActions={({ carryEdit }) => windowControls(
+                            allowFullScreen && <IconButton
                                 className="self-center"
                                 size={"small"}
-                                onClick={onClose}>
-                                <XIcon/>
-                            </IconButton>}
-                        barActions={({
-                            status,
-                            values
-                        }) => <div className="flex gap-1">
-                                {allowFullScreen && <IconButton
-                                    className="self-center"
-                                    size={"small"}
-                                    onClick={() => {
-                                        const key = (status === "new" || status === "copy") ? path + "#new" : path + "/" + entityId;
-                                        saveEntityToMemoryCache(key, values);
-                                        setBlocked(false);
-                                        setBlockedNavigationMessage(undefined);
-                                        if (entityId) {
-                                            const fullScreenUrl = urlController.buildUrlCollectionPath(`${path}/${entityId}`);
-                                            navigate(fullScreenUrl, { state: null });
-                                        } else {
-                                            const fullScreenUrl = urlController.buildUrlCollectionPath(path);
-                                            navigate(fullScreenUrl + "#new", { state: null });
-                                        }
-                                    }}>
-                                    <Maximize2Icon/>
-                                </IconButton>}
-                            </div>}
+                                onClick={() => {
+                                    // The form's own handoff, rather than a second
+                                    // copy of the rules for it here: only an edit in
+                                    // progress is worth carrying (a clean record
+                                    // stashed anyway arrived announcing unsaved
+                                    // changes to someone who had only looked at it),
+                                    // and only the fields that were edited (carrying
+                                    // the whole record marked every field touched).
+                                    carryEdit?.();
+                                    setBlocked(false);
+                                    setBlockedNavigationMessage(undefined);
+                                    if (entityId) {
+                                        const fullScreenUrl = urlController.buildUrlCollectionPath(`${path}/${entityId}`);
+                                        navigate(fullScreenUrl, { state: null });
+                                    } else {
+                                        const fullScreenUrl = urlController.buildUrlCollectionPath(path);
+                                        navigate(fullScreenUrl + "#new", { state: null });
+                                    }
+                                }}>
+                                <Maximize2Icon/>
+                            </IconButton>
+                        )}
                         onTabChange={({
                             entityId: tabEntityId,
                             selectedTab,

package/src/components/UserSelector.tsx

@@ -128,7 +128,14 @@ export interface UserSelectorProps {
     value?: string | null;
     onValueChange?: (userId: string | null) => void;
     placeholder?: React.ReactNode;
-    size?: "small" | "medium";
+    /**
+     * `large` is the form's size and is on the shared 28/32/40/48 control
+     * scale, so a user picker lines up with the text field beside it.
+     *
+     * `small` and `medium` predate that scale (42 and 56) and are kept as they
+     * are because the table cells and the filter row are built around them.
+     */
+    size?: "small" | "medium" | "large";
     disabled?: boolean;
     invisible?: boolean;
     clearable?: boolean;
@@ -317,9 +324,13 @@ export const UserSelector = React.forwardRef<
                             className={cls(
                                 {
                                     "min-h-[42px] py-1 px-2": size === "small",
-                                    "min-h-[56px] py-2 px-4": size === "medium"
+                                    "min-h-[56px] py-2 px-4": size === "medium",
+                                    "min-h-[48px] py-1 px-4": size === "large"
                                 },
-                                "w-full select-none rounded-md text-sm relative flex items-center",
+                                // `rounded-lg` like every other field box —
+                                // `rounded-md` made this the one control in a
+                                // row with a different corner.
+                                "w-full select-none rounded-lg text-sm relative flex items-center",
                                 invisible ? fieldBackgroundInvisibleMixin : fieldBackgroundMixin,
                                 disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
                                 className
@@ -345,7 +356,7 @@ export const UserSelector = React.forwardRef<
                                         </IconButton>
                                     )}
                                     <ChevronDownIcon
-                                        size={size === "medium" ? iconSize.medium : iconSize.small}
+                                        size={size === "small" ? iconSize.small : iconSize.medium}
                                         className={cls("transition", isPopoverOpen ? "rotate-180" : "")}
                                     />
                                 </div>

package/src/components/app/Scaffold.tsx

@@ -4,17 +4,48 @@ import { ChevronLeftIcon, ErrorBoundary, MenuIcon } from "@rebasepro/ui";
 import { deepEqual as equal } from "fast-equals"
 
 import { useLargeLayout, useAdminModeController, useTranslation } from "@rebasepro/app";
+import { useUrlController } from "../../hooks/navigation/contexts/UrlContext";
 import { AppContext } from "./useApp";
 
 export const DRAWER_WIDTH = 280;
 
+/**
+ * Namespaced by base path: two admins served from one origin are two different
+ * navigations, and a single key would have them overwrite each other's drawer.
+ */
+export function drawerOpenStorageKey(basePath: string | undefined) {
+    return `rebase-drawer-open:${basePath || "/"}`;
+}
+
+/** `null` when the user has never toggled the drawer, or storage is unavailable. */
+function readStoredDrawerOpen(key: string): boolean | null {
+    if (typeof window === "undefined") return null;
+    try {
+        const stored = window.localStorage.getItem(key);
+        return stored === null ? null : stored === "true";
+    } catch (e) {
+        // Storage can be blocked: private mode, sandboxed iframe, cookie policy.
+        return null;
+    }
+}
+
+function writeStoredDrawerOpen(key: string, open: boolean) {
+    if (typeof window === "undefined") return;
+    try {
+        window.localStorage.setItem(key, String(open));
+    } catch (e) {
+        // Same as above: a drawer that forgets is better than a crash.
+    }
+}
+
 /**
  * @group Core
  */
 export interface ScaffoldProps {
 
     /**
-     * Open the drawer on hover
+     * Expand the collapsed drawer while the pointer is over it. On by default —
+     * pass `false` to keep the rail a rail until the user clicks the toggle.
      */
     autoOpenDrawer?: boolean;
 
@@ -22,8 +53,8 @@ export interface ScaffoldProps {
      * Start with the drawer expanded rather than collapsed to icons.
      *
      * Distinct from {@link autoOpenDrawer}, which is a hover behaviour: this one
-     * only seeds the initial state, so the user's own toggle still wins for the
-     * rest of the session.
+     * only seeds the very first visit. Once the user toggles the drawer, that
+     * choice is stored in `localStorage` and wins over this prop on every load.
      *
      * Ignored on small layouts, where an expanded drawer covers the content it is
      * meant to navigate.
@@ -62,7 +93,7 @@ export const Scaffold = React.memo<PropsWithChildren<ScaffoldProps>>(
 
         const {
             children,
-            autoOpenDrawer,
+            autoOpenDrawer = true,
             defaultDrawerOpen = false,
             logo,
             className,
@@ -83,25 +114,96 @@ export const Scaffold = React.memo<PropsWithChildren<ScaffoldProps>>(
         const includeDrawer = drawerChildren.length > 0;
         const largeLayout = useLargeLayout();
 
+        const storageKey = drawerOpenStorageKey(useUrlController().basePath);
+
         // Seeded once, deliberately: a `useEffect` syncing this to the prop would
         // re-expand the drawer under a user who had just collapsed it.
-        const [drawerOpen, setDrawerOpen] = React.useState(defaultDrawerOpen && largeLayout);
+        const [drawerOpen, setDrawerOpenState] = React.useState(defaultDrawerOpen && largeLayout);
         const [onHover, setOnHover] = React.useState(false);
 
-        const setOnHoverTrue = useCallback(() => setOnHover(true), []);
+        // The stored choice is a client-only fact, so it is applied after the first
+        // render rather than seeded into it: reading storage while rendering would
+        // make the client disagree with server-rendered HTML. A layout effect runs
+        // before paint, so the drawer still arrives in its remembered state.
+        // `defaultDrawerOpen` seeds the very first visit and is ignored after that.
+        React.useLayoutEffect(() => {
+            const stored = readStoredDrawerOpen(storageKey);
+            if (stored === null) return;
+            setDrawerOpenState(stored && largeLayout);
+            // Deliberately not re-run on `largeLayout`: crossing the breakpoint is
+            // the effect below, and re-running here would undo a user's toggle.
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, [storageKey]);
+
+        // One piece of state drives two different things: the expanded rail on
+        // large layouts, and the modal sheet on small ones. Carrying an expanded
+        // rail across the breakpoint would drop that sheet, overlay and all, over
+        // the content — so the crossing resets it, and widening again restores
+        // whatever the user last chose.
+        const wasLargeLayout = React.useRef(largeLayout);
+        React.useEffect(() => {
+            if (wasLargeLayout.current === largeLayout) return;
+            wasLargeLayout.current = largeLayout;
+            setDrawerOpenState(largeLayout ? (readStoredDrawerOpen(storageKey) ?? defaultDrawerOpen) : false);
+        }, [largeLayout, defaultDrawerOpen, storageKey]);
+
+        const setDrawerOpen = useCallback((open: boolean) => {
+            setDrawerOpenState(open);
+            // Small layouts render the drawer as a modal sheet. Remembering that
+            // one would greet the next load with an overlay over the content.
+            if (!largeLayout) return;
+            writeStoredDrawerOpen(storageKey, open);
+        }, [largeLayout, storageKey]);
+
+        // The pointer has left, but a popover the drawer opened is still up, so the
+        // collapse is owed rather than cancelled. See `setOnHoverFalse`.
+        const collapseWhenPopoverCloses = React.useRef(false);
+
+        const setOnHoverTrue = useCallback(() => {
+            // Hover expansion is the default; `autoOpenDrawer={false}` opts out for
+            // admins that want the rail to stay a rail until the toggle is clicked.
+            if (!autoOpenDrawer) return;
+            collapseWhenPopoverCloses.current = false;
+            setOnHover(true);
+        }, [autoOpenDrawer]);
         const setOnHoverFalse = useCallback(() => {
-            // Don't collapse the drawer while a popover/dropdown is open
-            if (document.querySelector("[data-radix-popper-content-wrapper]")) return;
+            // Don't collapse the drawer out from under an open popover/dropdown —
+            // its content is portalled outside the drawer, so reaching for it reads
+            // as a mouseleave. The collapse is owed until that popover closes.
+            if (document.querySelector("[data-radix-popper-content-wrapper]")) {
+                collapseWhenPopoverCloses.current = true;
+                return;
+            }
+            collapseWhenPopoverCloses.current = false;
             setOnHover(false);
         }, []);
 
+        // Nothing fires a second mouseleave when the popover finally closes, so the
+        // owed collapse has to be noticed rather than waited for. Only mounted
+        // while the drawer is actually floating open.
+        React.useEffect(() => {
+            if (!onHover) return;
+            const collapseIfOwed = () => {
+                if (!collapseWhenPopoverCloses.current) return;
+                if (document.querySelector("[data-radix-popper-content-wrapper]")) return;
+                collapseWhenPopoverCloses.current = false;
+                setOnHover(false);
+            };
+            const observer = new MutationObserver(collapseIfOwed);
+            observer.observe(document.body, {
+                childList: true,
+                subtree: true
+            });
+            return () => observer.disconnect();
+        }, [onHover]);
+
         const handleDrawerOpen = useCallback(() => {
             setDrawerOpen(true);
-        }, []);
+        }, [setDrawerOpen]);
 
         const handleDrawerClose = useCallback(() => {
             setDrawerOpen(false);
-        }, []);
+        }, [setDrawerOpen]);
 
         const computedDrawerOpen: boolean = drawerOpen;
         const computedDrawerHovered = Boolean(largeLayout && onHover);

package/src/components/index.ts

@@ -1,6 +1,9 @@
 export type { EntityViewBindingProps } from "./EntityViewBinding";
 export { EntityViewBinding } from "./EntityViewBinding";
 
+export type { EntityDisplayHeaderProps } from "./EntityDisplayHeader";
+export { EntityDisplayHeader, HEADER_DISPLAY_ROLES } from "./EntityDisplayHeader";
+
 export * from "./DetailViewBinding";
 
 export type { SelectionProps } from "./ReferenceTable/SelectionTableBinding";

package/src/form/EntityForm.tsx

@@ -9,18 +9,18 @@ import { deepEqual as equal } from "fast-equals";
 import { ErrorBoundary } from "@rebasepro/ui";
 import { AlignLeftIcon, useDebouncedCallback } from "@rebasepro/ui";
 import { getDefaultValuesFor } from "@rebasepro/common";
-import { isReadOnly } from "@rebasepro/app";
+import { isDisabled, isReadOnly } from "@rebasepro/app";
 
 import { getFormFieldKeys, resolveFormLayout } from "@rebasepro/app";
 import type { ResolvedFormField } from "@rebasepro/app";
-import { Alert, Button, cls, Dialog, DialogActions, DialogContent, DialogTitle, iconSize, paperMixin, Typography } from "@rebasepro/ui";
+import { Alert, Button, cls, defaultBorderMixin, Dialog, DialogActions, DialogContent, DialogTitle, paperMixin, Typography } from "@rebasepro/ui";
 import { Formex, FormexController, useCreateFormex } from "@rebasepro/forms";
 
-import { FieldBlock, isSelfLabellingProperty } from "./components/FieldBlock";
-import { FormRail } from "./components/FormRail";
+import { FieldBlock, isSelfLabellingProperty, LABEL_ICON_SIZE, spanClass } from "./components/FieldBlock";
+import { AdditionalFieldValue } from "../components/AdditionalFieldValue";
+import { FormRail, RecordMeta } from "./components/FormRail";
 import { FormSections } from "./components/FormSections";
 import { useRailVisible } from "./components/useRailVisible";
-import { LabelWithIconAndTooltip } from "./components/LabelWithIconAndTooltip";
 import { PropertyFieldBinding } from "./PropertyFieldBinding";
 import { flattenKeys } from "@rebasepro/app";
 import { ErrorFocus } from "./components/ErrorFocus";
@@ -173,15 +173,30 @@ export function EntityForm<M extends Record<string, unknown>>({
             });
     };
 
-    const [initialValues, initialDirty] = useMemo(() => {
-        const initialValues = initialDirtyValues ? mergeDeep(baseInitialValues, initialDirtyValues) : baseInitialValues;
-        const initialDirty = Boolean(initialDirtyValues) && initialDirtyValues && Object.keys(initialDirtyValues).length > 0;
-        return [initialValues, initialDirty];
-    }, [baseInitialValues, initialDirtyValues]);
+    /**
+     * What the form opens showing, when that is not what is stored — an edit
+     * carried over from the side panel's "open full screen", or a draft
+     * restored from the local-changes backup.
+     *
+     * The merge is deliberately *not* folded into the baseline. `mergeDeep`
+     * used to produce a single `initialValues` that served as both, with a
+     * `initialDirty: true` bolted on beside it to say what the baseline could
+     * no longer show — and that flag survived exactly one render, because the
+     * record's data arriving replaced the baseline and the form recomputed
+     * dirty as false against a baseline that already contained the edit.
+     *
+     * Read once, at mount: this is a handoff, and re-reading it every render
+     * tied the form to a cache that is cleared as soon as it has been consumed.
+     */
+    const initialModifiedValues = useRef(
+        initialDirtyValues && Object.keys(initialDirtyValues).length > 0
+            ? mergeDeep(baseInitialValues, initialDirtyValues)
+            : undefined
+    ).current;
 
     const internalFormex = useCreateFormex<M>({
-        initialValues: initialValues as M,
-        initialDirty,
+        initialValues: baseInitialValues as M,
+        initialModifiedValues: initialModifiedValues as M | undefined,
         debugId: `EntityForm:${path}/${entityIdProp}`,
         initialTouched: initialDirtyValues ?
             flattenKeys(initialDirtyValues!)
@@ -193,7 +208,9 @@ export function EntityForm<M extends Record<string, unknown>>({
         onSubmit,
         onReset: () => {
             onResetProp?.();
-            onValuesModified?.(false, initialValues as M);
+            // The stored values — a reset returns the form to them, and by now
+            // that is the baseline whether or not it was at mount.
+            onValuesModified?.(false, baseInitialValues as M);
         },
         onValuesChangeDeferred: onValuesChangeDeferredProp,
         validation: async (values): Promise<Record<string, string>> => {
@@ -420,7 +437,7 @@ export function EntityForm<M extends Record<string, unknown>>({
             disabledProp
             || (!autoSave && formex.isSubmitting)
             || isReadOnly(property)
-            || Boolean(property.admin?.disabled)
+            || isDisabled(property)
             || (!isNew && "isId" in property && Boolean(property.isId))
             || (isNew && isIdAndAuto)
         );
@@ -440,25 +457,26 @@ export function EntityForm<M extends Record<string, unknown>>({
             const child = AdditionalFieldBuilder
                 ? <AdditionalFieldBuilder entity={entity} context={additionalFieldContext}/>
                 : <div className={"w-full"}>
-                    {additionalField.value?.({
-                        entity,
-                        context: additionalFieldContext
-                    })?.toString()}
+                    <AdditionalFieldValue
+                        field={additionalField}
+                        entity={entity}
+                        context={additionalFieldContext}/>
                 </div>;
 
             return (
+                // Through FieldBlock like every other cell, so a computed
+                // column is labelled at the same size, with the same gap to its
+                // box, as the property next to it on the grid.
                 <div key={`additional_${field.key}`}
                     className={spanClass(field.span)}>
-                    <LabelWithIconAndTooltip
-                        propertyKey={field.key}
-                        icon={<AlignLeftIcon size={iconSize.small}/>}
-                        title={additionalField.name}
-                        className={"text-text-secondary dark:text-text-secondary-dark"}/>
-                    <div className={cls(paperMixin, "w-full min-h-14 p-4 md:p-6 overflow-x-auto no-scrollbar")}>
-                        <ErrorBoundary>
+                    <FieldBlock propertyKey={field.key}
+                        showLabel={true}
+                        label={additionalField.name}
+                        icon={<AlignLeftIcon size={LABEL_ICON_SIZE}/>}>
+                        <div className={cls(paperMixin, "w-full min-h-12 p-4 md:p-6 overflow-x-auto no-scrollbar")}>
                             {child}
-                        </ErrorBoundary>
-                    </div>
+                        </div>
+                    </FieldBlock>
                 </div>
             );
         }
@@ -537,12 +555,25 @@ export function EntityForm<M extends Record<string, unknown>>({
                 }
             ];
 
-        return <FormSections
-            sections={sections}
-            collapsed={collapsedSections}
-            onToggle={toggleSection}
-            errorKeys={errorKeys}
-            renderField={renderField}/>;
+        return <>
+            <FormSections
+                sections={sections}
+                collapsed={collapsedSections}
+                onToggle={toggleSection}
+                errorKeys={errorKeys}
+                renderField={renderField}/>
+
+            {/* Folded back with the rail's fields, and for the same reason. The
+                rail renders only where it has been measured to fit, so on the
+                split pane, the side panel and the dialog this block was dropped
+                outright and the record's id was nowhere on screen but the
+                truncated chip in the bar. */}
+            {!showRail && layout.showRecordMeta && status === "existing" && entity && (
+                <div className={cls("mt-8 pt-5 border-t max-w-sm", defaultBorderMixin)}>
+                    <RecordMeta entity={entity as Entity<Record<string, unknown>>}/>
+                </div>
+            )}
+        </>;
     };
 
     const formRef = useRef<HTMLDivElement>(null);
@@ -706,25 +737,6 @@ export function EntityForm<M extends Record<string, unknown>>({
     );
 }
 
-/**
- * Grid placement for a span.
- *
- * Written out as literal class strings rather than composed, because Tailwind
- * scans source text: a template literal would produce classes that exist at
- * runtime and were never generated into the stylesheet.
- *
- * Below the column breakpoint every field takes the single available column, so
- * the side panel, the dialog and mobile all get a plain stack.
- */
-function spanClass(span: 1 | 2 | 3 | 4): string {
-    switch (span) {
-        case 1: return "@2xl/col:col-span-1";
-        case 2: return "@2xl/col:col-span-2";
-        case 3: return "@2xl/col:col-span-3";
-        case 4: return "@2xl/col:col-span-4";
-    }
-}
-
 function useOnAutoSave<M extends Record<string, unknown>>(autoSave: undefined | boolean, formex: FormexController<M>, lastSavedValues: React.MutableRefObject<EntityValues<M> | undefined>, save: (values: EntityValues<M>) => Promise<Entity<M> | void>) {
     useEffect(() => {
         if (!autoSave) return;