fix(skill): contain readme content overflow

web/src/features/skill/markdown-renderer.tsx

@@ -9,13 +9,48 @@ interface MarkdownRendererProps {
 }
 
 export function MarkdownRenderer({ content, className }: MarkdownRendererProps) {
-  const containerClassName = [className, 'prose prose-sm max-w-none dark:prose-invert']
+  const containerClassName = [
+    className,
+    'prose prose-sm max-w-none break-words [overflow-wrap:anywhere] dark:prose-invert',
+  ]
     .filter(Boolean)
     .join(' ')
 
   return (
     <div className={containerClassName}>
-      <ReactMarkdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeSanitize, rehypeHighlight]}>
+      <ReactMarkdown
+        remarkPlugins={[remarkGfm]}
+        rehypePlugins={[rehypeSanitize, rehypeHighlight]}
+        components={{
+          pre: ({ children }) => (
+            <div className="max-w-full overflow-x-auto rounded-lg bg-muted/40 p-4">
+              <pre className="m-0 min-w-max bg-transparent p-0">{children}</pre>
+            </div>
+          ),
+          code: ({ className: codeClassName, children, ...props }) => {
+            const isInline = !codeClassName?.includes('language-')
+
+            if (isInline) {
+              return (
+                <code className="break-words rounded bg-muted px-1 py-0.5 text-sm" {...props}>
+                  {children}
+                </code>
+              )
+            }
+
+            return (
+              <code className={codeClassName} {...props}>
+                {children}
+              </code>
+            )
+          },
+          table: ({ children }) => (
+            <div className="max-w-full overflow-x-auto">
+              <table>{children}</table>
+            </div>
+          ),
+        }}
+      >
         {content}
       </ReactMarkdown>
     </div>