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

restyles descriptions to use table to prevent breakage with long text
iway1 · Apr 7, 2023 · 7eeb913 · 7eeb913
2 parents 6276591 + 2c30ab6
commit 7eeb913
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 37 deletions.
diff --git 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
@@ -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>