[dyad] Improved nested schema layout - wrote 1 file(s)

src/components/pretty-schema-display.tsx

@@ -145,36 +145,42 @@ const SchemaObjectRenderer = ({
       {Object.entries(data).map(([key, value]) => {
         if (key === "@context") return null;
 
-        // Custom rendering for FAQPage questions
+        let labelDiv: React.ReactNode;
+        let valueDiv: React.ReactNode;
+        const isDeepEntry = typeof value === "object" && value !== null;
+
+        // Handle FAQPage custom rendering
         if (
           key === "mainEntity" &&
           data["@type"] === "FAQPage" &&
           Array.isArray(value)
         ) {
-          return (
-            <React.Fragment key={key}>
-              <div className="flex items-center gap-2 font-semibold text-sm text-muted-foreground flex-shrink-0 whitespace-nowrap pt-0.5">
-                <span>Questions</span>
-              </div>
-              <div className="text-sm text-foreground space-y-2">
-                {value.map((item, index) => (
-                  <FaqQuestion key={index} item={item} />
-                ))}
-              </div>
-            </React.Fragment>
+          labelDiv = (
+            <div className="flex items-center gap-2 font-semibold text-sm text-muted-foreground flex-shrink-0 whitespace-nowrap pt-0.5">
+              <span>Questions</span>
+            </div>
           );
-        }
+          valueDiv = (
+            <div className="text-sm text-foreground space-y-2">
+              {value.map((item, index) => (
+                <FaqQuestion key={index} item={item} />
+              ))}
+            </div>
+          );
+        } else {
+          // General rendering
+          const label =
+            keyMappings[key] || key.charAt(0).toUpperCase() + key.slice(1);
+          const Icon = keyIcons[key];
 
-        const label =
-          keyMappings[key] || key.charAt(0).toUpperCase() + key.slice(1);
-        const Icon = keyIcons[key];
-
-        return (
-          <React.Fragment key={key}>
+          labelDiv = (
             <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>
+          );
+
+          valueDiv = (
             <div className="text-sm text-foreground">
               {key === "@type" ? (
                 <Badge variant="secondary">{value as string}</Badge>
@@ -182,8 +188,26 @@ const SchemaObjectRenderer = ({
                 renderValue(value, level)
               )}
             </div>
-          </React.Fragment>
-        );
+          );
+        }
+
+        if (isDeepEntry) {
+          return (
+            <React.Fragment key={key}>
+              {labelDiv}
+              {/* This empty div acts as a placeholder in the grid's second column, forcing the value to the next row */}
+              <div></div>
+              <div className="md:col-span-2">{valueDiv}</div>
+            </React.Fragment>
+          );
+        } else {
+          return (
+            <React.Fragment key={key}>
+              {labelDiv}
+              {valueDiv}
+            </React.Fragment>
+          );
+        }
       })}
     </div>
   );