[dyad] Aligned schema display columns - wrote 1 file(s)

src/components/pretty-schema-display.tsx

@@ -104,7 +104,7 @@ const SchemaObjectRenderer = ({
   isNested?: boolean;
 }) => {
   const content = (
-    <div className="space-y-4">
+    <div className="inline-grid grid-cols-1 md:grid-cols-[auto_auto] items-start gap-x-6 gap-y-4">
       {Object.entries(data).map(([key, value]) => {
         if (key === "@context") return null;
         const label =
@@ -112,22 +112,19 @@ const SchemaObjectRenderer = ({
         const Icon = keyIcons[key];
 
         return (
-          <div
-            key={key}
-            className="grid grid-cols-1 md:grid-cols-[auto_auto] md:justify-start gap-x-6 gap-y-1"
-          >
+          <React.Fragment key={key}>
             <div className="flex items-center gap-2 font-semibold text-sm text-muted-foreground flex-shrink-0 whitespace-nowrap">
               {Icon && <Icon className="h-4 w-4" />}
               <span>{label}</span>
             </div>
-            <div className="text-sm text-foreground pl-6 md:pl-0">
+            <div className="text-sm text-foreground">
               {key === "@type" ? (
                 <Badge variant="secondary">{value as string}</Badge>
               ) : (
                 renderValue(value)
               )}
             </div>
-          </div>
+          </React.Fragment>
         );
       })}
     </div>