@rebasepro/admin 0.12.0 → 0.12.1-canary.g009ed95

package/src/components/InlineEntityPreview.tsx

@@ -0,0 +1,149 @@
+import * as React from "react";
+
+import { Entity } from "@rebasepro/types";
+import { cls, LinkIcon, Skeleton, Tooltip } from "@rebasepro/ui";
+import { useAnalyticsController } from "@rebasepro/app";
+import { getValueInPath } from "@rebasepro/utils";
+import type { AdminCollection } from "@rebasepro/admin-types";
+
+import { getEntityTitlePropertyKeyForEntity } from "../util/previews";
+import { useCollectionRegistryController } from "../hooks/navigation/contexts/CollectionRegistryContext";
+import { useSidePanel } from "../hooks/useSidePanel";
+
+export type InlineEntityPreviewProps = {
+    entity: Entity<any>;
+    collection?: AdminCollection;
+    /** Overrides the resolved title. */
+    label?: string;
+    disabled?: boolean;
+    /** When set, takes over the click. Otherwise the row opens the side panel. */
+    onClick?: (e: React.SyntheticEvent) => void;
+    /** Set to false to render text only, with no click target. */
+    includeEntityLink?: boolean;
+    /** Icon size in px. Defaults to a hair under the surrounding text. */
+    iconSize?: number;
+    className?: string;
+};
+
+const inlineMixin = "inline-flex items-center gap-1 min-w-0 max-w-full align-middle";
+
+/**
+ * An entity rendered as one line of text: a small link glyph that marks it as
+ * pointing elsewhere, then the target's title in whatever typography surrounds
+ * it.
+ *
+ * This is what a reference or relation renders as when it is *not* the subject
+ * of its slot — nested inside another entity preview, or filling a title slot.
+ * The card treatment (image, id, preview properties, side-panel button) only
+ * makes sense at the top level; repeating it one level down produces a bordered
+ * box inside a bordered box, each with its own action buttons.
+ *
+ * @group Preview components
+ */
+export function InlineEntityPreview({
+    entity,
+    collection: collectionProp,
+    label,
+    disabled,
+    onClick,
+    includeEntityLink = true,
+    iconSize = 12,
+    className
+}: InlineEntityPreviewProps) {
+
+    const collectionRegistryController = useCollectionRegistryController();
+    const analyticsController = useAnalyticsController();
+    const sidePanelController = useSidePanel();
+
+    const collection = collectionProp ?? collectionRegistryController.getCollection(entity.path);
+
+    const titlePropertyKey = collection
+        ? getEntityTitlePropertyKeyForEntity(collection, entity.values, entity.id)
+        : undefined;
+    const titleValue = titlePropertyKey ? getValueInPath(entity.values, titlePropertyKey) : undefined;
+    const resolvedLabel = label
+        ?? (titleValue !== undefined && titleValue !== null && String(titleValue).trim().length > 0
+            ? String(titleValue)
+            : String(entity.id));
+
+    const interactive = !disabled && (onClick !== undefined || (includeEntityLink && collection !== undefined));
+
+    const handleClick = (event: React.SyntheticEvent) => {
+        if (!interactive) return;
+        // This sits inside a container with its own click handler (the parent
+        // card opens the parent entity); a click here is about the target.
+        event.preventDefault();
+        event.stopPropagation();
+        if (onClick) {
+            onClick(event);
+            return;
+        }
+        analyticsController.onAnalyticsEvent?.("entity_click_from_reference", {
+            path: entity.path,
+            entityId: entity.id
+        });
+        sidePanelController.open({
+            entityId: entity.id,
+            path: entity.path,
+            collection,
+            updateUrl: true
+        });
+    };
+
+    const content = <span
+        tabIndex={interactive ? 0 : undefined}
+        role={interactive ? "button" : undefined}
+        onClick={interactive ? handleClick : undefined}
+        onKeyDown={interactive
+            ? (event) => {
+                if (event.key === "Enter" || event.key === " ") handleClick(event);
+            }
+            : undefined}
+        className={cls(
+            inlineMixin,
+            interactive ? "cursor-pointer hover:underline underline-offset-2" : "",
+            className)}>
+        <LinkIcon size={iconSize}
+            className={"shrink-0 opacity-40"}/>
+        <span className={"truncate"}>{resolvedLabel}</span>
+    </span>;
+
+    if (!interactive) return content;
+
+    return <Tooltip title={`See details for ${resolvedLabel}`}
+        asChild={true}>
+        {content}
+    </Tooltip>;
+}
+
+/**
+ * Placeholder shown while the target of an inline reference is being fetched.
+ */
+export function InlineEntityPreviewSkeleton({ className }: { className?: string }) {
+    return <span className={cls(inlineMixin, className)}>
+        <LinkIcon size={12}
+            className={"shrink-0 opacity-40"}/>
+        <Skeleton className={"w-20 h-3"}/>
+    </span>;
+}
+
+/**
+ * Shown when the target of an inline reference cannot be resolved — a deleted
+ * row, or a collection that is not registered. Keeps the line readable instead
+ * of dropping an error box into the middle of a card.
+ */
+export function InlineEntityPreviewMissing({
+    label,
+    tooltip,
+    className
+}: { label: string, tooltip?: string, className?: string }) {
+    const content = <span
+        className={cls(inlineMixin, "text-text-secondary dark:text-text-secondary-dark", className)}>
+        <LinkIcon size={12}
+            className={"shrink-0 opacity-40"}/>
+        <span className={"truncate italic"}>{label}</span>
+    </span>;
+    if (!tooltip) return content;
+    return <Tooltip title={tooltip}
+        asChild={true}>{content}</Tooltip>;
+}

package/src/components/RebaseLayout.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Outlet } from "react-router-dom";
+import { Outlet } from "react-router";
 import {
     useAdminModeController,
     useComponentOverride,

package/src/components/RebaseNavigation.tsx

@@ -38,6 +38,7 @@ import { SidePanelProvider } from "./SidePanelProvider";
 // Collection editor internals — used when collectionEditor is enabled
 import { useLocalCollectionsConfigController } from "../collection_editor/useLocalCollectionsConfigController";
 import { ConfigControllerProvider } from "../collection_editor/ConfigControllerProvider";
+import { useCollectionsConfigController } from "../collection_editor/useCollectionsConfigController";
 
 // Lazy-load the schema view — only fetched when studio schema tool is active
 const CollectionsStudioView = lazy(() =>
@@ -168,12 +169,19 @@ export function RebaseNavigation({ children }: RebaseNavigationProps) {
         }
     }, [dataSources]);
 
+    // `readOnly` is left undefined unless the developer set it: the controller
+    // asks the backend whether its schema editor will accept a write, which is
+    // the only process that knows. Deciding it here from `process.env.NODE_ENV`
+    // — the *frontend bundle's* build mode — is what made the editor offer
+    // itself against production backends, `baas` projects and servers without
+    // `ts-morph`, and turned every save into a bare 404.
     const internalConfigController = useLocalCollectionsConfigController(
         rebaseClient,
         resolvedCollections,
         collectionEditorEnabled ? {
-            readOnly: collectionEditorOptions?.readOnly ?? process.env.NODE_ENV === "production",
-            getAuthToken: collectionEditorOptions?.getAuthToken ?? authController?.getAuthToken
+            readOnly: collectionEditorOptions?.readOnly,
+            getAuthToken: collectionEditorOptions?.getAuthToken ?? authController?.getAuthToken,
+            authKey: authController?.user?.uid ?? null
         } : { readOnly: true }
     );
 
@@ -189,13 +197,22 @@ export function RebaseNavigation({ children }: RebaseNavigationProps) {
             group: "Database",
             icon: "LayoutList",
             nestedRoutes: true,
+            // Reads the controller from context at render time rather than
+            // capturing it here. A view is a React *element*, and the
+            // navigation state controller resolves the view list once and holds
+            // on to the elements it resolved — so a controller passed as a prop
+            // is frozen at whatever it was on the first render, forever. That
+            // hid every later change: the editor stayed writable after the
+            // backend said it was read-only, and the collection list never
+            // refreshed. Everything else in the editor already reads this from
+            // `ConfigControllerProvider`, which wraps this subtree.
             view: (
                 <Suspense fallback={<CircularProgressCenter/>}>
-                    <CollectionsStudioView configController={internalConfigController}/>
+                    <CollectionsStudioViewFromContext/>
                 </Suspense>
             )
         };
-    }, [collectionEditorEnabled, registry.studioConfig, internalConfigController]);
+    }, [collectionEditorEnabled, registry.studioConfig]);
 
     const devViews = useMemo(() => {
         const base = registry.studioConfig?.devViews ?? [];
@@ -275,6 +292,7 @@ export function RebaseNavigation({ children }: RebaseNavigationProps) {
                                 collectionRegistryController={collectionRegistryController}
                                 urlController={urlController}
                                 navigationStateController={navigationStateController}
+                                canWriteToCodebase={!internalConfigController.readOnly}
                             />
                             {children}
                         </SidePanelProvider>
@@ -301,6 +319,17 @@ export function RebaseNavigation({ children }: RebaseNavigationProps) {
     return navigationContent;
 }
 
+/**
+ * The injected "Edit collections" view, bound to the live config controller.
+ *
+ * Exists so the element stored in the navigation state does not close over a
+ * controller instance — see the comment at its construction site.
+ */
+function CollectionsStudioViewFromContext() {
+    const configController = useCollectionsConfigController();
+    return <CollectionsStudioView configController={configController}/>;
+}
+
 /**
  * Internal component that auto-registers admin controllers into the
  * self-assembling Studio bridge. Must be rendered inside both the
@@ -309,14 +338,25 @@ export function RebaseNavigation({ children }: RebaseNavigationProps) {
 function BridgeAutoRegistrar({
     collectionRegistryController,
     urlController,
-    navigationStateController
+    navigationStateController,
+    canWriteToCodebase
 }: {
     collectionRegistryController: CollectionRegistryController;
     urlController: UrlController;
     navigationStateController: NavigationStateController;
+    canWriteToCodebase: boolean;
 }) {
     useBridgeRegistration("collectionRegistry", collectionRegistryController);
     useBridgeRegistration("urlController", urlController);
     useBridgeRegistration("navigationState", navigationStateController);
+
+    // Studio tools that would write into the project's collection source — the
+    // RLS editor's policy save for a mapped table, its "Import to codebase" —
+    // ask the bridge whether that write can land. The default is `true`, which
+    // is what an admin panel sitting next to its own `collectionsDir` assumes;
+    // it is wrong for exactly the same backends that make the collection editor
+    // read-only, so the two now answer from one source.
+    const capabilities = useMemo(() => ({ codebase: canWriteToCodebase }), [canWriteToCodebase]);
+    useBridgeRegistration("capabilities", capabilities);
     return null;
 }

package/src/components/RebaseRouteDefs.tsx

@@ -1,5 +1,5 @@
 import React, { lazy, Suspense, useMemo } from "react";
-import { Route } from "react-router-dom";
+import { Route } from "react-router";
 import {
     useRebaseRegistry,
     RebaseRoutes,

package/src/components/SelectableTable/SelectableTable.tsx

@@ -3,7 +3,7 @@ import type { Property, WhereFilterOp } from "@rebasepro/types";
 import React, { useCallback, useEffect, useMemo, useRef } from "react";
 import { Entity, FilterValues } from "@rebasepro/types";
 import { CollectionSize, EntityTableController, SelectedCellProps, AdminCollection } from "@rebasepro/admin-types";
-import { CellRendererParams, TableView, VirtualTableColumn, VirtualTableFilterValues, OnRowClickParams } from "@rebasepro/ui";
+import { CellRendererParams, VirtualTable, VirtualTableColumn, VirtualTableFilterValues, OnRowClickParams } from "@rebasepro/ui";
 import { DEFAULT_PAGE_SIZE, DataCollectionTableController, OnCellValueChange, OnColumnResizeParams } from "@rebasepro/app";
 import { FilterFormFieldProps } from "@rebasepro/ui";
 import { useOutsideAlerter } from "@rebasepro/ui";
@@ -270,7 +270,7 @@ export const SelectableTable = function SelectableTable<M extends Record<string,
             <div className="h-full w-full flex flex-col bg-white dark:bg-surface-900"
                 ref={ref}>
 
-                 <TableView
+                 <VirtualTable
                     data={data as unknown as Record<string, unknown>[]}
                     columns={columns}
                     cellRenderer={(props) => cellRenderer(props as unknown as CellRendererParams<Entity<M>>)}

package/src/components/SidePanelBinding.tsx

@@ -8,7 +8,7 @@ import { IconButton, Maximize2Icon, XIcon } from "@rebasepro/ui";
 import { EditViewBinding } from "./EditViewBinding";
 import { DetailViewBinding } from "./DetailViewBinding";
 import { useSideDialogContext } from "./SideDialogs";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 import { saveEntityToMemoryCache, useComponentOverride } from "@rebasepro/app";
 import { useCollectionRegistryController } from "../hooks/navigation/contexts/CollectionRegistryContext";
 import { useSidePanel } from "../hooks/useSidePanel";
@@ -193,16 +193,19 @@ 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
+                                className="self-center"
+                                size={"small"}
+                                onClick={onClose}>
+                                <XIcon/>
+                            </IconButton>}
                         barActions={({
                             status,
                             values
                         }) => <div className="flex gap-1">
-                                <IconButton
-                                    className="self-center"
-                                    size={"small"}
-                                    onClick={onClose}>
-                                    <XIcon/>
-                                </IconButton>
                                 {allowFullScreen && <IconButton
                                     className="self-center"
                                     size={"small"}
@@ -242,16 +245,19 @@ 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
+                                className="self-center"
+                                size={"small"}
+                                onClick={onClose}>
+                                <XIcon/>
+                            </IconButton>}
                         barActions={({
                             status,
                             values
                         }) => <div className="flex gap-1">
-                                <IconButton
-                                    className="self-center"
-                                    size={"small"}
-                                    onClick={onClose}>
-                                    <XIcon/>
-                                </IconButton>
                                 {allowFullScreen && <IconButton
                                     className="self-center"
                                     size={"small"}

package/src/components/UserSelector.tsx

@@ -21,7 +21,7 @@ import * as React from "react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { Command as CommandPrimitive } from "cmdk";
 import { User } from "@rebasepro/types";
-import { useRebaseClient, useAuthController, UserDisplay } from "@rebasepro/app";
+import { apiBaseOf, useRebaseClient, useAuthController, UserDisplay } from "@rebasepro/app";
 import { EmptyValue } from "../preview";
 
 interface UserSelectorItem {
@@ -37,7 +37,7 @@ const DEFAULT_PAGE_SIZE = 10;
  * Local hook to fetch users from the collection REST API with search and pagination.
  */
 function useUserSelector({ pageSize = DEFAULT_PAGE_SIZE }: { pageSize?: number } = {}) {
-    const client = useRebaseClient<{ baseUrl?: string }>();
+    const client = useRebaseClient<{ baseUrl?: string, apiPath?: string }>();
     const { getAuthToken } = useAuthController();
 
     const [items, setItems] = useState<UserSelectorItem[]>([]);
@@ -48,7 +48,8 @@ function useUserSelector({ pageSize = DEFAULT_PAGE_SIZE }: { pageSize?: number }
     const userCacheRef = useRef<Map<string, User>>(new Map());
 
     const fetchUsers = useCallback(async (searchStr: string, offset: number, append: boolean) => {
-        if (!client?.baseUrl) return;
+        const apiBase = apiBaseOf(client);
+        if (!apiBase) return;
         setIsLoading(true);
         try {
             const token = await getAuthToken?.();
@@ -57,7 +58,12 @@ function useUserSelector({ pageSize = DEFAULT_PAGE_SIZE }: { pageSize?: number }
                 offset: String(offset)
             });
             if (searchStr) params.set("search", searchStr);
-            const response = await fetch(`${client.baseUrl}/api/users?${params}`, {
+            // `/admin/users`, not `/users`. `apiBaseOf` returns the API root
+            // (`/api`), and the users endpoint lives under the auth adapter's
+            // admin router — `/api/users` is a 404, which is why this list was
+            // always empty. The collection route `/api/data/users` would answer,
+            // but it serves the raw row, `passwordHash` included.
+            const response = await fetch(`${apiBase}/admin/users?${params}`, {
                 headers: token ? { Authorization: `Bearer ${token}` } : {}
             });
             if (!response.ok) throw new Error("Failed to fetch users");
@@ -65,7 +71,7 @@ function useUserSelector({ pageSize = DEFAULT_PAGE_SIZE }: { pageSize?: number }
             const rows: Record<string, unknown>[] = data.data ?? data.users ?? [];
             const newItems: UserSelectorItem[] = rows.map((r: Record<string, unknown>) => {
                 const user: User = {
-                    uid: (r.id as string) ?? "",
+                    uid: (r.uid as string) ?? (r.id as string) ?? "",
                     email: (r.email as string) ?? "",
                     displayName: (r.displayName as string) ?? (r.display_name as string) ?? null,
                     photoURL: (r.photoURL as string) ?? (r.photo_url as string) ?? null,
@@ -86,7 +92,7 @@ user };
         } finally {
             setIsLoading(false);
         }
-    }, [client?.baseUrl, getAuthToken, pageSize]);
+    }, [client?.baseUrl, client?.apiPath, getAuthToken, pageSize]);
 
     useEffect(() => {
         offsetRef.current = 0;

package/src/components/common/default_entity_actions.tsx

@@ -21,6 +21,7 @@ import {
 import type { User } from "@rebasepro/types";
 import type { EntityAction, UserCreationResult } from "@rebasepro/admin-types";
 import {
+    apiBaseOf,
     useAuthController,
     useRebaseClient,
     useSnackbarController,
@@ -246,7 +247,7 @@ export function ResetPasswordActionDialog({
     open: boolean;
     onClose: () => void;
 }) {
-    const client = useRebaseClient<{ baseUrl?: string }>();
+    const client = useRebaseClient<{ baseUrl?: string, apiPath?: string }>();
     const { getAuthToken } = useAuthController();
     const snackbarController = useSnackbarController();
     const { t } = useTranslation();
@@ -270,9 +271,9 @@ export function ResetPasswordActionDialog({
         setLoading(true);
         setError(null);
         try {
-            const baseUrl = client?.baseUrl || "";
+            const apiBase = apiBaseOf(client) ?? "";
             const token = await getAuthToken?.();
-            const response = await fetch(`${baseUrl}/api/admin/users/${user.uid}/reset-password`, {
+            const response = await fetch(`${apiBase}/admin/users/${user.uid}/reset-password`, {
                 method: "POST",
                 headers: {
                     "Content-Type": "application/json",

package/src/components/history/EntityHistoryEntry.tsx

@@ -95,7 +95,22 @@ export function EntityHistoryEntry({
 
     const authController = useAuthController();
 
-    const changedFields = entry.changed_fields;
+    // The backend reports the whole row as changed, which includes the columns
+    // that cannot meaningfully change: a timestamp it stamps itself on every
+    // write, and the primary key, which is what identifies the row being
+    // revised. Every revision was listing `updated_at: <now>` and `id: <the id
+    // in the title bar>` around the one field the user actually edited.
+    const changedFields = React.useMemo(() => {
+        const all = entry.changed_fields;
+        if (!all || !collection) return all;
+        return all.filter(key => {
+            const property = getPropertyInPath(collection.properties, key);
+            if (!property) return true;
+            if ("isId" in property && property.isId) return false;
+            return !(property.type === "date" && "autoValue" in property && property.autoValue);
+        });
+    }, [entry.changed_fields, collection]);
+
     const previousValues = entry.previous_values;
     const updatedOn = new Date(entry.updated_at);
     const updatedBy = entry.updated_by;
@@ -106,8 +121,8 @@ export function EntityHistoryEntry({
         ? currentUser
         : undefined;
 
-    return <div className={"w-full flex flex-col gap-2 mt-4"}>
-        <div className={"ml-4 flex items-center gap-4"}>
+    return <div className={"@container/histentry w-full flex flex-col gap-2"}>
+        <div className={"flex items-center flex-wrap gap-2"}>
             <Typography variant={"body2"} color={"secondary"}>
                 {updatedOn.toLocaleString()}
             </Typography>
@@ -148,15 +163,21 @@ export function EntityHistoryEntry({
                             {typeof valueInPath === "string" ? valueInPath : JSON.stringify(valueInPath)}
                         </Typography>;
 
+                    // The key column used to be `min-w-[200px] w-1/5` beside a
+                    // `w-4/5` value — 200px of label and 80% of the row, which
+                    // adds up to more than the row in anything narrower than a
+                    // full page. In the inspector that pushed every value off
+                    // the right edge and wrapped ids one character per line.
+                    // It stacks until the entry itself is wide enough.
                     return (
                         <div key={"ref_prev_" + key}
-                            className="flex w-full my-1 items-center">
+                            className="flex flex-col @sm/histentry:flex-row @sm/histentry:items-baseline gap-x-4 gap-y-0.5 w-full my-1.5">
                             <Typography variant={"caption"}
                                 color={"secondary"}
-                                className="min-w-[140px] md:min-w-[200px] w-1/5 pr-8 overflow-hidden text-ellipsis text-right">
+                                className="shrink-0 break-all @sm/histentry:w-40 @sm/histentry:text-right @sm/histentry:break-normal @sm/histentry:truncate">
                                 {key}
                             </Typography>
-                            <div className="w-4/5">
+                            <div className="min-w-0 flex-1 flex flex-col items-start gap-0.5">
                                 {previousValueInPath !== undefined && !deepEqual(previousValueInPath, valueInPath) &&
                                     <PreviousValueView previousValueInPath={previousValueInPath}
                                         childProperty={childProperty as Property}
@@ -169,7 +190,7 @@ export function EntityHistoryEntry({
                 })}
 
                 {(!changedFields || changedFields.length === 0) && (
-                    <Typography variant={"caption"} color={"secondary"} className="ml-4">
+                    <Typography variant={"caption"} color={"secondary"}>
                         {entry.action === "create" ? "Entity created" :
                             entry.action === "delete" ? "Entity deleted" : "No field changes recorded"}
                     </Typography>

package/src/components/history/EntityHistoryView.tsx

@@ -4,7 +4,7 @@ import { useRef, useEffect } from "react";
 import { cls, IconButton, Label, Tooltip, Typography } from "@rebasepro/ui";
 import { ErrorBoundary, HistoryIcon } from "@rebasepro/ui";
 import { EntityHistoryEntry } from "./EntityHistoryEntry";
-import { useSnackbarController, useAuthController } from "@rebasepro/app";
+import { useSnackbarController, useAuthController, useTranslation } from "@rebasepro/app";
 import { ConfirmationDialog } from "@rebasepro/app";
 import { useState } from "react";
 import { useHistory } from "../../hooks/useHistory";
@@ -19,6 +19,7 @@ export function EntityHistoryView<M extends Record<string, unknown>>({
     formContext
 }: EntityCustomViewParams<M>) {
 
+    const { t } = useTranslation();
     const snackbarController = useSnackbarController();
     const authController = useAuthController();
     const dirty = formContext?.formex.dirty;
@@ -72,7 +73,7 @@ export function EntityHistoryView<M extends Record<string, unknown>>({
 
     if (!entity) {
         return <div className="flex items-center justify-center h-full">
-            <Label>History is only available for existing entities</Label>
+            <Label>{t("history_new_entity") ?? "History is only available for existing records"}</Label>
         </div>;
     }
 
@@ -93,13 +94,13 @@ export function EntityHistoryView<M extends Record<string, unknown>>({
             }
 
             snackbarController.open({
-                message: "Reverted to selected version",
+                message: t("history_reverted") ?? "Reverted to selected version",
                 type: "info"
             });
         } catch (error) {
             console.error("Error reverting entity:", error);
             snackbarController.open({
-                message: "Error reverting entity",
+                message: t("history_revert_error") ?? "Error reverting entity",
                 type: "error"
             });
         } finally {
@@ -111,17 +112,16 @@ export function EntityHistoryView<M extends Record<string, unknown>>({
         ? entries.find(e => e.id === revertHistoryId)
         : undefined;
 
+    // `p-8` plus a `mt-24` heading were sized for a full-width tab that no
+    // longer exists. In the inspector panel that was 96px of nothing above the
+    // first revision, and 32px of gutter on each side of a 448px column.
     return <div
         ref={containerRef}
-        className={cls("relative flex-1 h-full overflow-auto w-full flex flex-col gap-4 p-8")}>
+        className={cls("relative flex-1 h-full overflow-auto w-full flex flex-col gap-4 p-4 sm:p-5")}>
         <div className="flex flex-col gap-2 max-w-6xl mx-auto w-full">
 
-            <Typography variant={"h5"} className={"mt-24 ml-4"}>
-                History
-            </Typography>
-
             {isLoading && entries.length === 0 && (
-                <div className="flex flex-col gap-4 mt-8 ml-4">
+                <div className="flex flex-col gap-4">
                     {[1, 2, 3].map(i => (
                         <div key={i} className="flex flex-col gap-2 animate-pulse">
                             <div className="h-4 w-48 bg-surface-200 dark:bg-surface-700 rounded"/>
@@ -132,28 +132,28 @@ export function EntityHistoryView<M extends Record<string, unknown>>({
             )}
 
             {!isLoading && entries.length === 0 && <>
-                <Label className={"ml-4 mt-8"}>
-                    No history available
+                <Label>
+                    {t("history_empty") ?? "No history available"}
                 </Label>
-                <Typography variant={"caption"} className={"ml-4"}>
-                    When you save a entity, a new version is created and stored in the history.
+                <Typography variant={"caption"}>
+                    {t("history_empty_description") ?? "When you save a record, a new version is created and stored in the history."}
                 </Typography>
             </>}
 
             {entries.map((entry) => (
-                <div key={entry.id} className="flex flex-cols gap-2 w-full">
+                <div key={entry.id} className="flex flex-col gap-2 w-full">
                     <EntityHistoryEntry
                         entry={entry}
                         collection={collection}
                         size={"medium"}
                         actions={
-                            <Tooltip title={"Revert to this version"}
+                            <Tooltip title={t("history_revert") ?? "Revert to this version"}
                                 className={"m-2 grow-0 self-start"}>
                                 <IconButton
                                     onClick={() => {
                                         if (dirty) {
                                             snackbarController.open({
-                                                message: "Please save or discard your changes before reverting",
+                                                message: t("history_revert_dirty") ?? "Please save or discard your changes before reverting",
                                                 type: "warning"
                                             });
                                         } else {
@@ -171,8 +171,8 @@ export function EntityHistoryView<M extends Record<string, unknown>>({
             {/* Load more sentinel */}
             {entries.length > 0 && (
                 <div ref={loadMoreRef} className="py-4 text-center">
-                    {isLoading && <Label>Loading more...</Label>}
-                    {!hasMore && entries.length > 10 && <Label>No more history available</Label>}
+                    {isLoading && <Label>{t("loading")}</Label>}
+                    {!hasMore && entries.length > 10 && <Label>{t("history_no_more") ?? "No more history"}</Label>}
                 </div>
             )}
         </div>
@@ -184,7 +184,7 @@ export function EntityHistoryView<M extends Record<string, unknown>>({
                     if (revertHistoryId) doRevert(revertHistoryId);
                 }}
                 onCancel={() => setRevertHistoryId(undefined)}
-                title={<Typography variant={"subtitle2"}>Revert data to this version?</Typography>}
+                title={<Typography variant={"subtitle2"}>{t("history_revert_title") ?? "Revert data to this version?"}</Typography>}
                 body={revertEntry
                     ? <div className="p-4">
                         <Typography variant={"caption"} color={"secondary"}>