From 1a8fdcedbabf5ce4dca93c536e8f74700d96e14b Mon Sep 17 00:00:00 2001
From: Isaac Way <iway1@vols.utk.edu>
Date: Thu, 6 Apr 2023 20:32:27 -0500
Subject: [PATCH 1/2] restyles descriptions to use table to prevent breakage
 with long text

---
 .../form/ProcedureForm/DescriptionSection.tsx | 54 +++++++------------
 1 file changed, 18 insertions(+), 36 deletions(-)

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..7e57827 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 py-2">
+                      {`${key}: `}
+                    </td>
+                    <td className="pl-4 text-sm text-gray-500 py-2">
+                      {`${value}`}
+                    </td>
+                  </tr>
+                )
+              )}
+            </table>
           </DocumentationSubsection>
         )}
       </div>

From 2c30ab62c237b43c09c58a09ceb3b58a4249ab22 Mon Sep 17 00:00:00 2001
From: Isaac Way <iway1@vols.utk.edu>
Date: Thu, 6 Apr 2023 20:33:56 -0500
Subject: [PATCH 2/2] verticaly align parameter name to the top

---
 packages/dev-app/src/router.ts                         | 10 +++++++++-
 .../form/ProcedureForm/DescriptionSection.tsx          |  2 +-
 2 files changed, 10 insertions(+), 2 deletions(-)

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 7e57827..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
@@ -27,7 +27,7 @@ export function DocumentationSection({
                     key={key}
                     className="border-b border-separatorLine flex-row space-x-2"
                   >
-                    <td className="text-sm text-neutralText font-bold py-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">