fix: markdown styling for label config option (#2455)

* add support for label config option

* fix styling with tailwind typography plugin

Author: diamonwiggins

web/package-lock.json

@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@tailwindcss/forms": "^0.5.10",
+    "@tailwindcss/typography": "^0.5.15",
     "@tanstack/react-query": "^5.81.5",
     "lucide-react": "^0.525.0",
     "react": "^19.1.0",

web/package.json

@@ -245,12 +245,17 @@ const ConfigurationStep: React.FC<ConfigurationStepProps> = ({ onNext }) => {
       case 'label':
         return (
           <div className="mb-4" data-testid={`label-${item.name}`}>
-            <div className="text-sm font-medium text-gray-700 break-words">
+            <div className="prose prose-sm prose-gray max-w-none">
               <Markdown
                 remarkPlugins={[remarkGfm]}
                 components={{
                   a: ({ ...props }) => (
-                    <a {...props} target="_blank" rel="noopener noreferrer" />
+                    <a 
+                      {...props} 
+                      target="_blank" 
+                      rel="noopener noreferrer"
+                      className="text-blue-600 hover:text-blue-800 underline"
+                    />
                   ),
                 }}
               >

web/src/components/wizard/config/ConfigurationStep.tsx

@@ -13,6 +13,7 @@ export default {
       addVariant("is-disabled", "&[disabled]");
     }),
     // eslint-disable-next-line @typescript-eslint/no-var-requires
-    require("@tailwindcss/forms")({ strategy: "class" })
+    require("@tailwindcss/forms")({ strategy: "class" }),
+    require("@tailwindcss/typography")
   ]
 };