merge: UI polish bundle (#73)

Five small design/layout nits from the UI sweep:

- form.selectPlaceholder "— select —" → "Select…" / "Välj…", matching
  the affordance style of every other placeholder (Filter…, Search…).
- FieldForm in edit mode now explains its locked controls with a muted
  fields.lockedNote caption ("Key and type can't be changed after
  creation.") instead of leaving four silently disabled inputs.
- FieldList rows truncate long labels (min-w-0 on the row button +
  truncate on the label, shrink-0 on the badge and required marker)
  instead of overflowing the 20rem column.
- The sidebar collapse toggle is hidden on narrow viewports (hidden
  md:flex) instead of rendered permanently disabled/grayed — the rail
  is forced collapsed there anyway.
- PageTitle gains text-balance so long titles wrap evenly.

Closes #73

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

web/src/app.tsx

@@ -72,7 +72,7 @@ const router = createBrowserRouter(
           <Route path="/authorities" element={<Navigate to="/authorities/person" replace />} />
           <Route path="/authorities/:kind" element={<AuthoritiesPage />} />
           <Route
-            path="/fields"
+            path="/fields/:key?"
             element={
               <Suspense fallback={<ListSkeleton />}>
                 <FieldsPage />

web/src/components/ui/alert-dialog.tsx

@@ -50,7 +50,7 @@ function AlertDialogContent({
         data-slot="alert-dialog-content"
         data-size={size}
         className={cn(
-          "group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          "group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 overscroll-y-contain rounded-xl bg-popover p-4 text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
           className
         )}
         {...props}

web/src/components/ui/combobox.tsx

@@ -62,7 +62,7 @@ function ComboboxPopup({ className, ...props }: ComboboxPrimitive.Popup.Props) {
         <ComboboxPrimitive.Popup
           data-slot="combobox-popup"
           className={cn(
-            "max-h-64 min-w-48 overflow-auto rounded border bg-popover p-1 text-sm text-popover-foreground shadow-md",
+            "max-h-64 min-w-48 overflow-auto overscroll-y-contain rounded border bg-popover p-1 text-sm text-popover-foreground shadow-md",
             className,
           )}
           {...props}

web/src/components/ui/drawer.tsx

@@ -35,7 +35,7 @@ function DrawerContent({ className, children, ...props }: DrawerPrimitive.Popup.
         <DrawerPrimitive.Popup
           data-slot="drawer-content"
           className={cn(
-            "fixed inset-y-0 right-0 flex w-full max-w-md flex-col overflow-y-auto bg-background shadow-xl outline-none duration-200 data-open:animate-in data-open:slide-in-from-right data-closed:animate-out data-closed:slide-out-to-right",
+            "fixed inset-y-0 right-0 flex w-full max-w-md flex-col overflow-y-auto overscroll-y-contain bg-background shadow-xl outline-none duration-200 data-open:animate-in data-open:slide-in-from-right data-closed:animate-out data-closed:slide-out-to-right",
             className,
           )}
           {...props}

web/src/components/ui/page-title.tsx

@@ -6,7 +6,7 @@ export function PageTitle({ className, ...props }: ComponentProps<"h1">) {
   return (
     <h1
       data-slot="page-title"
-      className={cn("text-2xl font-semibold tracking-tight", className)}
+      className={cn("text-2xl font-semibold tracking-tight text-balance", className)}
       {...props}
     />
   )

web/src/components/ui/select.tsx

@@ -99,7 +99,7 @@ function SelectContent({
         <SelectPrimitive.Popup
           data-slot="select-content"
           className={cn(
-            "max-h-[min(24rem,var(--available-height))] min-w-[var(--anchor-width)] overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md outline-none",
+            "max-h-[min(24rem,var(--available-height))] min-w-[var(--anchor-width)] overflow-y-auto overscroll-y-contain rounded-md border bg-popover p-1 text-popover-foreground shadow-md outline-none",
             "data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
             className
           )}

web/src/fields/field-form.tsx

@@ -110,6 +110,8 @@ export function FieldForm({
         )}
       </div>
 
+      {isEdit && <p className="text-xs text-muted-foreground">{t("fields.lockedNote")}</p>}
+
       <div className="space-y-1">
         <Label htmlFor="field-key">{t("fields.key")}</Label>
         <Input

web/src/fields/field-list.tsx

@@ -90,18 +90,23 @@ export function FieldList({
                   >
                     <button
                       type="button"
-                      className={cn("flex flex-1 items-center gap-2 rounded-sm text-left", focusRing)}
+                      className={cn(
+                        "flex min-w-0 flex-1 items-center gap-2 rounded-sm text-left",
+                        focusRing,
+                      )}
                       aria-pressed={def.key === selectedKey}
                       onClick={() => onSelect(def)}
                     >
-                      <span className="font-medium">{labelText(def.labels, lang)}</span>
+                      <span className="min-w-0 truncate font-medium">
+                        {labelText(def.labels, lang)}
+                      </span>
                       <span className="text-xs text-muted-foreground">{def.key}</span>
-                      <Badge variant="secondary">
+                      <Badge variant="secondary" className="shrink-0">
                         {t(`fields.types.${def.data_type}`)}
                       </Badge>
                       {def.required && (
                         <span
-                          className="text-xs text-destructive"
+                          className="shrink-0 text-xs text-destructive"
                           title={t("fields.required")}
                           aria-label={t("fields.required")}
                         >

web/src/fields/fields-page.tsx

@@ -1,18 +1,23 @@
-import { useState } from "react";
 import { useTranslation } from "react-i18next";
+import { useNavigate, useParams } from "react-router-dom";
 
-import type { components } from "../api/schema";
+import { useFieldDefinitions } from "../api/queries";
 import { FieldList } from "./field-list";
 import { FieldForm } from "./field-form";
 import { useDocumentTitle } from "../lib/use-document-title";
 import { useBreadcrumb } from "../shell/use-breadcrumb";
 import { PageTitle } from "@/components/ui/page-title";
 
-type FieldDefinitionView = components["schemas"]["FieldDefinitionView"];
-
 export function FieldsPage() {
   const { t } = useTranslation();
-  const [selected, setSelected] = useState<FieldDefinitionView | null>(null);
+  const navigate = useNavigate();
+  const { key } = useParams();
+  const { data } = useFieldDefinitions();
+
+  // Selection lives in the URL (/fields/:key) so it survives reload and can be
+  // shared, matching /vocabularies/:id. An unknown or absent key falls back to
+  // the create form. Same cached query as FieldList, so no extra fetch.
+  const selected = (key && data?.find((def) => def.key === key)) || null;
 
   useDocumentTitle(t("fields.title"));
   useBreadcrumb([{ label: t("nav.fields") }]);
@@ -22,13 +27,16 @@ export function FieldsPage() {
       <PageTitle className="px-4 pt-4 pb-2">{t("fields.title")}</PageTitle>
       <div className="grid flex-1 grid-cols-1 overflow-auto lg:grid-cols-[20rem_1fr] lg:overflow-hidden">
         <div className="overflow-hidden border-b lg:border-r lg:border-b-0">
-          <FieldList selectedKey={selected?.key ?? null} onSelect={setSelected} />
+          <FieldList
+            selectedKey={selected?.key ?? null}
+            onSelect={(def) => navigate(`/fields/${encodeURIComponent(def.key)}`)}
+          />
         </div>
         <div className="overflow-hidden">
           <FieldForm
             key={selected?.key ?? "create"}
             editing={selected}
-            onDone={() => setSelected(null)}
+            onDone={() => navigate("/fields")}
           />
         </div>
       </div>

web/src/fields/fields.test.tsx

@@ -11,7 +11,7 @@ import { FieldsPage } from "./fields-page";
 function tree() {
   return (
     <Routes>
-      <Route path="/fields" element={<FieldsPage />} />
+      <Route path="/fields/:key?" element={<FieldsPage />} />
     </Routes>
   );
 }
@@ -87,6 +87,40 @@ test("filter narrows the visible fields", async () => {
   expect(await screen.findByText(/no matches/i)).toBeInTheDocument();
 });
 
+test("deep link /fields/:key opens the edit form for that field", async () => {
+  renderApp(tree(), { route: "/fields/inscription" });
+
+  // edit mode: the key input is locked and prefilled from the URL. The form
+  // remounts when the defs query resolves, so re-query inside waitFor.
+  await waitFor(() => expect(screen.getByLabelText(/^key$/i)).toHaveValue("inscription"));
+  expect(screen.getByLabelText(/^key$/i)).toBeDisabled();
+  expect(screen.getByRole("button", { name: /cancel/i })).toBeInTheDocument();
+});
+
+test("selecting a field switches to its edit form; cancel returns to create", async () => {
+  renderApp(tree(), { route: "/fields" });
+
+  await userEvent.click(await screen.findByRole("button", { name: /inscription/i }));
+
+  await waitFor(() => expect(screen.getByLabelText(/^key$/i)).toHaveValue("inscription"));
+  expect(screen.getByLabelText(/^key$/i)).toBeDisabled();
+
+  await userEvent.click(screen.getByRole("button", { name: /cancel/i }));
+
+  await waitFor(() => expect(screen.getByLabelText(/^key$/i)).toHaveValue(""));
+  expect(screen.getByLabelText(/^key$/i)).toBeEnabled();
+});
+
+test("an unknown key falls back to the create form", async () => {
+  renderApp(tree(), { route: "/fields/zzz-does-not-exist" });
+
+  await screen.findByText("Inscription");
+
+  const key = screen.getByLabelText(/^key$/i);
+  expect(key).toHaveValue("");
+  expect(key).toBeEnabled();
+});
+
 test("creates a text field — posts the body and clears the key input", async () => {
   let body: { key: string; data_type: string } | undefined;
 

web/src/i18n/en.json

@@ -5,7 +5,7 @@
   "objects": { "title": "Objects", "empty": "No objects yet", "loadError": "Could not load objects", "notFound": "Object not found", "prev": "Previous", "next": "Next", "of": "of", "new": "New object", "filter": "Filter objects…", "pageSize": "Per page", "columns": { "number": "Object №", "name": "Name", "visibility": "Visibility", "location": "Location", "count": "#", "updated": "Updated" }, "unknownRef": "(unknown)", "detailTitle": "Object detail", "tableLabel": "Objects" },
   "fieldsLabels": { "objectNumber": "Object number", "objectName": "Name", "count": "Number of objects", "briefDescription": "Brief description", "currentLocation": "Current location", "currentOwner": "Current owner", "recorder": "Recorder", "recordingDate": "Recording date", "visibility": "Visibility" },
   "visibility": { "draft": "Draft", "internal": "Internal", "public": "Public" },
-  "form": { "selectPlaceholder": "— select —", "create": "Create object", "save": "Save", "cancel": "Cancel", "visibility": "Visibility", "draft": "Draft", "internal": "Internal", "required": "This field is required", "rejected": "The server rejected the changes — check required and referenced fields", "fieldRejected": "The field \"{{field}}\" was rejected — check its value", "createdButFieldRejected": "Object created, but a field was rejected — fix it below.", "flexibleHeading": "Catalogue fields", "saving": "Saving…", "createAnother": "Save & create another", "minCount": "Must be at least 1", "fieldError": { "type_mismatch": "Wrong type for this field", "unresolved": "Referenced value not found", "unknown": "Unknown field" }, "unsaved": { "title": "Discard unsaved changes?", "body": "You have unsaved changes that will be lost.", "stay": "Keep editing", "leave": "Discard" } },
+  "form": { "selectPlaceholder": "Select…", "create": "Create object", "save": "Save", "cancel": "Cancel", "visibility": "Visibility", "draft": "Draft", "internal": "Internal", "required": "This field is required", "rejected": "The server rejected the changes — check required and referenced fields", "fieldRejected": "The field \"{{field}}\" was rejected — check its value", "createdButFieldRejected": "Object created, but a field was rejected — fix it below.", "flexibleHeading": "Catalogue fields", "saving": "Saving…", "createAnother": "Save & create another", "minCount": "Must be at least 1", "fieldError": { "type_mismatch": "Wrong type for this field", "unresolved": "Referenced value not found", "unknown": "Unknown field" }, "unsaved": { "title": "Discard unsaved changes?", "body": "You have unsaved changes that will be lost.", "stay": "Keep editing", "leave": "Discard" } },
   "actions": { "deleting": "Deleting…", "edit": "Edit", "delete": "Delete", "rename": "Rename", "save": "Save", "closeDetail": "Close detail", "confirmDelete": "Delete this object? This cannot be undone.", "confirmDeleteTerm": "Delete this term? This cannot be undone.", "confirmDeleteAuthority": "Delete this authority? This cannot be undone.", "confirmDeleteField": "Delete this field definition? This cannot be undone.", "confirmDeleteVocabulary": "Delete this vocabulary? This cannot be undone.", "inUse": "Can't delete — used by {{count}} object(s). Clear those fields first." },
   "labels": { "label": "Label", "externalUri": "External URI (optional)", "otherLanguages": "This entry also has labels in other languages, which are kept.", "uriPlaceholder": "https://…" },
   "theme": { "light": "Light", "dark": "Dark", "system": "System" },
@@ -41,6 +41,7 @@
     "authorityKind": "Authority kind",
     "anyKind": "Any",
     "group": "Group",
+    "lockedNote": "Key and type can't be changed after creation.",
     "required": "Required",
     "create": "Create field",
     "empty": "No field definitions yet",

web/src/i18n/sv.json

@@ -5,7 +5,7 @@
   "objects": { "title": "Föremål", "empty": "Inga föremål ännu", "loadError": "Kunde inte ladda föremål", "notFound": "Föremålet hittades inte", "prev": "Föregående", "next": "Nästa", "of": "av", "new": "Nytt föremål", "filter": "Filtrera föremål…", "pageSize": "Per sida", "columns": { "number": "Föremålsnr", "name": "Namn", "visibility": "Synlighet", "location": "Plats", "count": "Antal", "updated": "Uppdaterad" }, "unknownRef": "(okänd)", "detailTitle": "Objektdetalj", "tableLabel": "Objekt" },
   "fieldsLabels": { "objectNumber": "Föremålsnummer", "objectName": "Namn", "count": "Antal föremål", "briefDescription": "Kort beskrivning", "currentLocation": "Nuvarande plats", "currentOwner": "Nuvarande ägare", "recorder": "Registrerad av", "recordingDate": "Registreringsdatum", "visibility": "Synlighet" },
   "visibility": { "draft": "Utkast", "internal": "Intern", "public": "Publik" },
-  "form": { "selectPlaceholder": "— välj —", "create": "Skapa föremål", "save": "Spara", "cancel": "Avbryt", "visibility": "Synlighet", "draft": "Utkast", "internal": "Intern", "required": "Fältet är obligatoriskt", "rejected": "Servern avvisade ändringarna — kontrollera obligatoriska och refererade fält", "fieldRejected": "Fältet \"{{field}}\" avvisades — kontrollera värdet", "createdButFieldRejected": "Föremålet skapades, men ett fält avvisades — åtgärda nedan.", "flexibleHeading": "Katalogfält", "saving": "Sparar…", "createAnother": "Spara & skapa ny", "minCount": "Måste vara minst 1", "fieldError": { "type_mismatch": "Fel typ för detta fält", "unresolved": "Refererat värde hittades inte", "unknown": "Okänt fält" }, "unsaved": { "title": "Kasta osparade ändringar?", "body": "Du har osparade ändringar som går förlorade.", "stay": "Fortsätt redigera", "leave": "Kasta" } },
+  "form": { "selectPlaceholder": "Välj…", "create": "Skapa föremål", "save": "Spara", "cancel": "Avbryt", "visibility": "Synlighet", "draft": "Utkast", "internal": "Intern", "required": "Fältet är obligatoriskt", "rejected": "Servern avvisade ändringarna — kontrollera obligatoriska och refererade fält", "fieldRejected": "Fältet \"{{field}}\" avvisades — kontrollera värdet", "createdButFieldRejected": "Föremålet skapades, men ett fält avvisades — åtgärda nedan.", "flexibleHeading": "Katalogfält", "saving": "Sparar…", "createAnother": "Spara & skapa ny", "minCount": "Måste vara minst 1", "fieldError": { "type_mismatch": "Fel typ för detta fält", "unresolved": "Refererat värde hittades inte", "unknown": "Okänt fält" }, "unsaved": { "title": "Kasta osparade ändringar?", "body": "Du har osparade ändringar som går förlorade.", "stay": "Fortsätt redigera", "leave": "Kasta" } },
   "actions": { "deleting": "Tar bort…", "edit": "Redigera", "delete": "Ta bort", "rename": "Byt namn", "save": "Spara", "closeDetail": "Stäng detalj", "confirmDelete": "Ta bort detta föremål? Detta kan inte ångras.", "confirmDeleteTerm": "Ta bort denna term? Detta kan inte ångras.", "confirmDeleteAuthority": "Ta bort denna auktoritet? Detta kan inte ångras.", "confirmDeleteField": "Ta bort denna fältdefinition? Detta kan inte ångras.", "confirmDeleteVocabulary": "Ta bort denna vokabulär? Detta kan inte ångras.", "inUse": "Kan inte ta bort — används av {{count}} föremål. Rensa de fälten först." },
   "labels": { "label": "Etikett", "externalUri": "Extern URI (valfritt)", "otherLanguages": "Denna post har även etiketter på andra språk, som behålls.", "uriPlaceholder": "https://…" },
   "theme": { "light": "Ljust", "dark": "Mörkt", "system": "System" },
@@ -41,6 +41,7 @@
     "authorityKind": "Auktoritetstyp",
     "anyKind": "Alla",
     "group": "Grupp",
+    "lockedNote": "Nyckel och typ kan inte ändras efter att fältet skapats.",
     "required": "Obligatoriskt",
     "create": "Skapa fält",
     "empty": "Inga fältdefinitioner ännu",

web/src/index.css

@@ -99,6 +99,19 @@
   body {
     @apply bg-background text-foreground font-sans;
   }
+
+  /* Collapse all animation/transition to a single frame for users who ask the
+     OS for reduced motion. Covers the kit's data-open/closed animations, the
+     skeleton pulse, and the sidebar width transition in one place. */
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    ::before,
+    ::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+    }
+  }
 }
 
 @layer components {

web/src/objects/field-input.test.tsx

@@ -54,7 +54,7 @@ test("term field filters and selects from the vocabulary combobox", async () =>
 
   renderApp(<FormHarness defKey="material" onSubmit={(v) => submitted.push(v)} />);
 
-  const input = await screen.findByPlaceholderText("— select —");
+  const input = await screen.findByPlaceholderText("Select…");
 
   await user.click(input);
   await user.type(input, "bro");
@@ -73,7 +73,7 @@ test("authority field filters and selects from the authority combobox", async ()
 
   renderApp(<FormHarness defKey="maker" onSubmit={(v) => submitted.push(v)} />);
 
-  const input = await screen.findByPlaceholderText("— select —");
+  const input = await screen.findByPlaceholderText("Select…");
 
   await user.click(input);
   await user.type(input, "ada");

web/src/shell/sidebar.tsx

@@ -80,15 +80,16 @@ export function Sidebar() {
         <button
           type="button"
           onClick={toggle}
-          disabled={narrow}
           aria-expanded={!collapsed}
           aria-label={t(collapsed ? "nav.expandSidebar" : "nav.collapseSidebar")}
           title={t(collapsed ? "nav.expandSidebar" : "nav.collapseSidebar")}
           className={cn(
-            "flex items-center justify-center rounded-md p-1 outline-none",
+            // On narrow viewports the rail is forced collapsed, so the toggle
+            // is hidden rather than shown disabled (a grayed button reads as
+            // broken, not unavailable).
+            "hidden items-center justify-center rounded-md p-1 outline-none md:flex",
             "hover:bg-accent",
             focusRing,
-            "disabled:pointer-events-none disabled:opacity-50",
           )}
         >
           {collapsed ? (