valknarandClaude Sonnet 5
e7b2b9add2
Release / release (push) Successful in 1m36s
GFM tables (config reference's Field/Type/Default/Notes tables) are wider than a phone screen and don't wrap, so without their own scroll container they forced the whole page to scroll horizontally instead. Wrap rendered tables in an overflow-x-auto div, and let long unbroken strings in table cells and inline code (env var names, paths) break instead of forcing extra width. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
40 lines
1.8 KiB
TypeScript
40 lines
1.8 KiB
TypeScript
import ReactMarkdown from "react-markdown";
|
|
import remarkGfm from "remark-gfm";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
// GFM tables (the config reference's Field/Type/Default/Notes tables) are wider than a phone
|
|
// screen and don't wrap - without their own scroll container the table forces the whole page
|
|
// to scroll horizontally instead. The typography plugin's table styles still apply to `table`
|
|
// here (its selectors match any descendant, not just direct children of `.prose`), so this
|
|
// wrapper only adds the scroll boundary.
|
|
function Table(props: React.ComponentProps<"table">) {
|
|
return (
|
|
<div className="overflow-x-auto">
|
|
<table {...props} />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function MarkdownViewer({ content }: { content: string }) {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"prose prose-neutral dark:prose-invert max-w-none",
|
|
"prose-pre:bg-muted prose-pre:text-foreground",
|
|
// Typography's default inline `code` style is just bold text wrapped in decorative
|
|
// backtick characters - swap that for the same muted pill used for inline code
|
|
// elsewhere in the app (see the "no scripts configured" message on the dashboard).
|
|
"prose-code:before:content-none prose-code:after:content-none",
|
|
"prose-code:rounded prose-code:bg-muted prose-code:px-1.5 prose-code:py-0.5 prose-code:font-mono prose-code:font-normal prose-code:text-foreground",
|
|
// Long unbroken strings (env var names, paths) in table cells or inline code would
|
|
// otherwise force their column/line wider than the viewport instead of wrapping.
|
|
"prose-td:break-words prose-th:break-words prose-code:break-words",
|
|
)}
|
|
>
|
|
<ReactMarkdown remarkPlugins={[remarkGfm]} components={{ table: Table }}>
|
|
{content}
|
|
</ReactMarkdown>
|
|
</div>
|
|
);
|
|
}
|