diff --git a/packages/dev-app/src/router.ts b/packages/dev-app/src/router.ts
index 0bafaed..b7e8a8d 100644
--- a/packages/dev-app/src/router.ts
+++ b/packages/dev-app/src/router.ts
@@ -126,7 +126,15 @@ export const appRouter = createTRPCRouter({
         searchTerm: z
           .string()
           .optional()
-          .describe("The name of the thing to search for."),
+          .describe(
+            "The name of the thing to search for. Really really long long long boi long boi long"
+          ),
+        searchTerm2: z
+          .string()
+          .optional()
+          .describe(
+            "The name of the thing to search for. Really really long long long boi long boi long Really really long long long boi long boi long Really really long long long boi long boi long Really really long long long boi long boi long"
+          ),
       })
     )
     .query(() => {
diff --git a/packages/trpc-panel/src/react-app/components/form/ProcedureForm/DescriptionSection.tsx b/packages/trpc-panel/src/react-app/components/form/ProcedureForm/DescriptionSection.tsx
index 847604b..1a10ae6 100644
--- a/packages/trpc-panel/src/react-app/components/form/ProcedureForm/DescriptionSection.tsx
+++ b/packages/trpc-panel/src/react-app/components/form/ProcedureForm/DescriptionSection.tsx
@@ -12,7 +12,7 @@ export function DocumentationSection({
 
   return (
     <FormSection title="Docs">
-      <div className="flex flex-col space-y-4">
+      <div className="space-y-4">
         {extraData.description && (
           <DocumentationSubsection title="Description">
             {extraData.description}
@@ -20,41 +20,23 @@ export function DocumentationSection({
         )}
         {hasParams && (
           <DocumentationSubsection title="Params">
-            <div className="pl-4 flex flex-row">
-              <div className="flex flex-col">
-                <ul className="space-y-2 list-disc">
-                  {Object.entries(extraData.parameterDescriptions).map(
-                    ([key]) => (
-                      <li
-                        key={key}
-                        className="list-item border-b border-separatorLine flex-row space-x-2"
-                      >
-                        <span className="text-sm text-neutralText font-bold">
-                          {`${key}: `}
-                        </span>
-                      </li>
-                    )
-                  )}
-                </ul>
-              </div>
-
-              <div className="flex flex-col">
-                <ul className="space-y-2">
-                  {Object.entries(extraData.parameterDescriptions).map(
-                    ([key, value]) => (
-                      <li
-                        key={key}
-                        className="list-item border-b border-separatorLine flex-row space-x-2"
-                      >
-                        <span className="pl-4 text-sm text-gray-500 ">
-                          {`${value}`}
-                        </span>
-                      </li>
-                    )
-                  )}
-                </ul>
-              </div>
-            </div>
+            <table>
+              {Object.entries(extraData.parameterDescriptions).map(
+                ([key, value]) => (
+                  <tr
+                    key={key}
+                    className="border-b border-separatorLine flex-row space-x-2"
+                  >
+                    <td className="text-sm text-neutralText font-bold align-top py-2">
+                      {`${key}: `}
+                    </td>
+                    <td className="pl-4 text-sm text-gray-500 py-2">
+                      {`${value}`}
+                    </td>
+                  </tr>
+                )
+              )}
+            </table>
           </DocumentationSubsection>
         )}
       </div>