Fix array label properties display

src/components/common/ObjectPicker.tsx

@@ -48,8 +48,14 @@ export function ObjectPicker({ schema, objectName, value, onChange, onClear, pla
   return (
     <div className="flex items-center gap-2 flex-wrap">
       {value && (
-        <Badge variant="secondary" className="gap-1 pr-1.5 text-sm">
-          {labelLoading ? <Loader2 className="h-3 w-3 animate-spin" /> : (display ?? value)}
+        <Badge variant="secondary" className="gap-1 pr-1.5 text-sm max-w-xs">
+          {labelLoading ? (
+            <Loader2 className="h-3 w-3 animate-spin" />
+          ) : (
+            <span className="truncate" title={display ?? value}>
+              {display ?? value}
+            </span>
+          )}
           {onClear && (
             <button
               type="button"
@@ -121,7 +127,9 @@ export function ObjectPicker({ schema, objectName, value, onChange, onClear, pla
                         setOpen(false);
                       }}
                     >
-                      {opt.label}
+                      <span className="truncate" title={opt.label}>
+                        {opt.label}
+                      </span>
                     </CommandItem>
                   ))}
                 </CommandGroup>

src/components/forms/DynamicForm.tsx

@@ -47,6 +47,7 @@ import {
 import { jmapGet, jmapSet, jmapRequest, getAccountId } from '@/services/jmap/client';
 import { calculateJmapPatch } from '@/lib/jmapPatch';
 import { friendlySetError } from '@/lib/jmapErrors';
+import { coerceLabel } from '@/lib/objectOptions';
 import { toast } from '@/hooks/use-toast';
 import { logFormChange } from '@/lib/debug';
 import { FieldWidget } from '@/components/forms/FieldWidget';
@@ -695,9 +696,9 @@ export function DynamicForm({ viewName, objectId }: DynamicFormProps) {
 
     const labelProp = list?.labelProperty;
     if (labelProp) {
-      const raw = formData[labelProp];
-      if (typeof raw === 'string' && raw.length > 0) {
-        return t('form.editTitleWithValue', 'Edit {{name}}: {{value}}', { name, value: raw });
+      const value = coerceLabel(formData[labelProp], '');
+      if (value.length > 0) {
+        return t('form.editTitleWithValue', 'Edit {{name}}: {{value}}', { name, value });
       }
     }
     return t('form.editTitle', 'Edit {{name}}', { name });

src/components/lists/DynamicList.tsx

@@ -48,6 +48,7 @@ import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@/component
 import { ObjectPicker } from '@/components/common/ObjectPicker';
 import { toast } from '@/hooks/use-toast';
 import { friendlySetError } from '@/lib/jmapErrors';
+import { coerceLabel } from '@/lib/objectOptions';
 
 import { useSchemaStore } from '@/stores/schemaStore';
 import { useAuthStore } from '@/stores/authStore';
@@ -515,7 +516,7 @@ export function DynamicList({ viewName }: DynamicListProps) {
           for (const obj of list) {
             const id = obj.id as string;
             if (!id) continue;
-            entries[id] = (obj[displayProp] as string) ?? id;
+            entries[id] = coerceLabel(obj[displayProp], id);
           }
           if (Object.keys(entries).length > 0) {
             setDisplayNames(refType, entries);

src/components/views/DynamicViewPage.tsx

@@ -11,6 +11,7 @@ import { ArrowLeft, Loader2 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { useSchemaStore } from '@/stores/schemaStore';
 import { resolveObject, resolveList } from '@/lib/schemaResolver';
+import { coerceLabel } from '@/lib/objectOptions';
 import { jmapGet, getAccountId } from '@/services/jmap/client';
 import { DynamicView } from './DynamicView';
 
@@ -89,7 +90,8 @@ export function DynamicViewPage({ viewName, objectId }: DynamicViewPageProps) {
 
   const list = resolveList(schema, viewName, resolved.objectName);
   const labelProp = list?.labelProperty ?? list?.columns?.[0]?.name;
-  const displayName = labelProp && typeof data[labelProp] === 'string' ? (data[labelProp] as string) : undefined;
+  const rawLabel = labelProp ? coerceLabel(data[labelProp], '') : '';
+  const displayName = rawLabel.length > 0 ? rawLabel : undefined;
   const singularName = list?.singularName ?? resolved.objectName.replace(/^x:/, '');
   const title = displayName
     ? `${singularName.charAt(0).toUpperCase() + singularName.slice(1)}: ${displayName}`