[dyad] Improved schema display clarity - wrote 1 file(s)

src/components/pretty-schema-display.tsx

@@ -2,7 +2,6 @@
 
 import React from "react";
 import { Badge } from "@/components/ui/badge";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import {
   Link as LinkIcon,
   Type,
@@ -82,9 +81,11 @@ const renderValue = (value: any): React.ReactNode => {
   if (typeof value === "object" && value !== null) {
     if (Array.isArray(value)) {
       return (
-        <div className="flex flex-col gap-2 pl-4 border-l ml-2 mt-2">
+        <div className="flex flex-col gap-3">
           {value.map((item, index) => (
-            <div key={index}>{renderValue(item)}</div>
+            <div key={index} className="border-l-2 pl-4">
+              {renderValue(item)}
+            </div>
           ))}
         </div>
       );
@@ -103,7 +104,7 @@ const SchemaObjectRenderer = ({
   isNested?: boolean;
 }) => {
   const content = (
-    <div className="space-y-3">
+    <div className="space-y-4">
       {Object.entries(data).map(([key, value]) => {
         if (key === "@context") return null;
         const label =
@@ -113,15 +114,15 @@ const SchemaObjectRenderer = ({
         return (
           <div
             key={key}
-            className="flex flex-col sm:flex-row sm:items-start gap-1 sm:gap-2"
+            className="grid grid-cols-1 md:grid-cols-[160px_1fr] gap-x-4 gap-y-1"
           >
-            <div className="flex items-center gap-2 font-semibold text-sm text-muted-foreground w-full sm:w-40 flex-shrink-0">
+            <div className="flex items-center gap-2 font-semibold text-sm text-muted-foreground flex-shrink-0">
               {Icon && <Icon className="h-4 w-4" />}
-              <span>{label}:</span>
+              <span>{label}</span>
             </div>
-            <div className="flex-grow text-sm text-foreground pl-6 sm:pl-0">
+            <div className="flex-grow text-sm text-foreground md:pl-0">
               {key === "@type" ? (
-                <Badge variant="outline">{value as string}</Badge>
+                <Badge variant="secondary">{value as string}</Badge>
               ) : (
                 renderValue(value)
               )}
@@ -134,7 +135,7 @@ const SchemaObjectRenderer = ({
 
   if (isNested) {
     return (
-      <div className="p-3 border rounded-md bg-background/50">{content}</div>
+      <div className="p-4 border rounded-lg bg-muted/50">{content}</div>
     );
   }