Merge pull request #61 from iway1/bug/long-description-layout

restyles descriptions to use table to prevent breakage with long text

Author: iway1

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(() => {

packages/trpc-panel/src/react-app/components/form/ProcedureForm/DescriptionSection.tsx

@@ -12,49 +12,31 @@ 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}
           </DocumentationSubsection>
         )}
         {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>