form single line per field

react-openapi/src/components/ResourceDetail.tsx

@@ -85,7 +85,7 @@ export function ResourceDetail({ resource, basePath }: ResourceDetailProps) {
               fmt = field.inlineDisplayFormat ?? resource.displayFormat;
             }
             return (
-              <Grid item xs={12} sm={6} md={4} key={field.name}>
+              <Grid size={12} key={field.name}>
                 <DetailFieldRenderer field={field} value={value} displayFormat={fmt} />
               </Grid>
             );

react-openapi/src/components/ResourceForm.tsx

@@ -106,7 +106,7 @@ export function ResourceForm({ resource, basePath, mode }: ResourceFormProps) {
       }
 
       const opts = items.map((item: any) => ({
-        value: item[targetRes.primaryKey],
+        value: resolvePk(item, targetRes.primaryKey),
         label: applyFormat(item, targetRes.displayFormat),
       }));
       console.log(`[loadFkOptions] computed ${opts.length} options for field "${fieldName}"`, opts.slice(0, 3));
@@ -139,9 +139,9 @@ export function ResourceForm({ resource, basePath, mode }: ResourceFormProps) {
             const targetRes = allResources.find((r) => r.name === rel.config.resource);
             if (targetRes) {
               if (Array.isArray(val)) {
-                resolved[rel.fieldName] = val.map((item: any) => item[targetRes.primaryKey]);
+                resolved[rel.fieldName] = val.map((item: any) => resolvePk(item, targetRes.primaryKey));
               } else if (typeof val === "object") {
-                resolved[rel.fieldName] = val[targetRes.primaryKey];
+                resolved[rel.fieldName] = resolvePk(val, targetRes.primaryKey);
               }
             }
             if (!rel.config.prefetch) {
@@ -237,7 +237,7 @@ export function ResourceForm({ resource, basePath, mode }: ResourceFormProps) {
             {resource.orderedFields
               .filter((f) => !(f.name === resource.primaryKey && mode === "edit"))
               .map((field) => (
-                <Grid item xs={12} sm={6} md={4} key={field.name}>
+                <Grid size={12} key={field.name}>
                   <FormFieldRenderer
                     field={field}
                     value={formData[field.name]}
@@ -281,6 +281,11 @@ export function ResourceForm({ resource, basePath, mode }: ResourceFormProps) {
   );
 }
 
+function resolvePk(item: any, pk: string): any {
+  const v = item?.[pk];
+  return v != null ? v : item?.[`_${pk}`];
+}
+
 function applyFormat(obj: any, format: string): string {
   if (!obj || typeof obj !== "object") return String(obj ?? "");
   return format.replace(/\{(\w+)\}/g, (_, key) => String(obj[key] ?? ""));

react-openapi/src/components/ResourceList.tsx

@@ -387,7 +387,7 @@ export function ResourceList({ resource, basePath }: ResourceListProps) {
           {detailRow && (
             <Grid container spacing={2} sx={{ mt: 0.5 }}>
               {visibleColumns.map((col) => (
-                <Grid key={col.name} item xs={12} sm={6}>
+                <Grid key={col.name} size={{ xs: 12, sm: 6 }}>
                   <DetailFieldRenderer
                     field={col}
                     value={detailRow[col.name]}