From 3feefac4249f138673695250aaa98a8053a72ecf Mon Sep 17 00:00:00 2001
From: Vishesh 'ironeagle' Bangotra <aetoskia@gmail.com>
Date: Fri, 31 Jul 2026 04:12:29 +0530
Subject: [PATCH] Show image preview in detail view for x-ui-type:image fields

DetailFieldRenderer now renders a 120x120 Avatar for image-type fields
instead of delegating to ListCellRenderer (which shows a tiny 40x40 avatar).
Upload capability remains in the form view via ImageField.
---
 .../src/components/fields/DetailFieldRenderer.tsx         | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/react-openapi/src/components/fields/DetailFieldRenderer.tsx b/react-openapi/src/components/fields/DetailFieldRenderer.tsx
index 9fbbd8f..150e0aa 100644
--- a/react-openapi/src/components/fields/DetailFieldRenderer.tsx
+++ b/react-openapi/src/components/fields/DetailFieldRenderer.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Box, Typography } from "@mui/material";
+import { Box, Typography, Avatar } from "@mui/material";
 import type { FieldConfig } from "../../types";
 import { ListCellRenderer } from "./ListCellRenderer";
 
@@ -18,7 +18,11 @@ export function DetailFieldRenderer({ field, value, displayFormat, basePath }: D
       <Typography variant="caption" color="text.secondary" fontWeight={600} sx={{ mb: 0.25, display: "block" }}>
         {field.label}
       </Typography>
-      <ListCellRenderer field={field} value={value} displayFormat={displayFormat} basePath={basePath} />
+      {field.uiType === "image" ? (
+        <Avatar src={value} variant="rounded" sx={{ width: 120, height: 120 }} />
+      ) : (
+        <ListCellRenderer field={field} value={value} displayFormat={displayFormat} basePath={basePath} />
+      )}
     </Box>
   );
 }
-- 
2.49.1