OpenAPI: Improve schema fields margins

.changeset/red-hotels-whisper.md

@@ -0,0 +1,5 @@
+---
+'fumadocs-openapi': patch
+---
+
+Improve schema fields margins

packages/openapi/src/render/schema.tsx

@@ -1,5 +1,5 @@
 import type { OpenAPIV3 as OpenAPI } from 'openapi-types';
-import { Fragment, type ReactNode } from 'react';
+import { type ReactNode } from 'react';
 import { noRef } from '@/utils/schema';
 import type { RenderContext } from '@/types';
 import { combineSchema } from '@/utils/combine-schema';
@@ -155,16 +155,13 @@ export function Schema({
 
   if (fields.length > 0)
     child.push(
-      <p key="fields">
-        {fields.map((field, i) => (
-          <Fragment key={field.key}>
-            <span>
-              {field.key}: <code>{field.value}</code>
-            </span>
-            {i !== fields.length - 1 ? <br /> : null}
-          </Fragment>
+      <div key="fields" className="flex flex-col gap-2">
+        {fields.map((field) => (
+          <span key={field.key}>
+            {field.key}: <code>{field.value}</code>
+          </span>
         ))}
-      </p>,
+      </div>,
     );
 
   if ((isObject(schema) || schema.allOf) && !parseObject) {

packages/openapi/src/ui/playground.tsx

@@ -89,13 +89,8 @@ export function APIPlayground({
       if (!input) return;
 
       const url = new URL(
-        `${baseUrl ?? window.location.origin}${createPathnameFromInput(route, input.path)}`,
+        `${baseUrl ?? window.location.origin}${createUrlFromInput(route, input.path, input.query)}`,
       );
-      Object.keys(input.query).forEach((key) => {
-        const paramValue = input.query[key];
-        if (typeof paramValue === 'string' && paramValue.length > 0)
-          url.searchParams.append(key, paramValue);
-      });
 
       const headers = new Headers({
         'Content-Type': 'application/json',
@@ -288,27 +283,39 @@ export function APIPlayground({
   );
 }
 
-function createPathnameFromInput(
+function createUrlFromInput(
   route: string,
-  input: Record<string, unknown>,
+  path: Record<string, unknown>,
+  query: Record<string, unknown>,
 ): string {
   let pathname = route;
-  Object.keys(input).forEach((key) => {
-    const paramValue = input[key];
+  Object.keys(path).forEach((key) => {
+    const paramValue = path[key];
 
     if (typeof paramValue === 'string' && paramValue.length > 0)
       pathname = pathname.replace(`{${key}}`, paramValue);
   });
-  return pathname;
+
+  const searchParams = new URLSearchParams();
+  Object.keys(query).forEach((key) => {
+    const paramValue = query[key];
+    if (typeof paramValue === 'string' && paramValue.length > 0)
+      searchParams.append(key, paramValue);
+  });
+
+  return searchParams.size > 0
+    ? `${pathname}?${searchParams.toString()}`
+    : pathname;
 }
 
 function RouteDisplay({ route }: { route: string }): ReactElement {
-  const pathInput = useWatch<FormValues, 'path'>({
-    name: 'path',
+  const [path, query] = useWatch<FormValues, ['path', 'query']>({
+    name: ['path', 'query'],
   });
+
   const pathname = useMemo(
-    () => createPathnameFromInput(route, pathInput),
-    [route, pathInput],
+    () => createUrlFromInput(route, path, query),
+    [route, path, query],
   );
 
   return (