thomasabishop/eolas-app
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: table overflow
All checks were successful
Deploy eolas-app / deploy (push) Successful in 1m5s
Details

Browse source
This commit is contained in:
Thomas Bishop 2025-12-17 19:05:22 +00:00
parent 0f855d19e1
commit fe7c107c0e
1 changed files with 94 additions and 99 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
src/components/EntryBody.tsx
View file

@ -7,7 +7,7 @@ import "katex/dist/katex.min.css"
import BodyLink from "./BodyLink" import BodyLink from "./BodyLink"
import EntryLoadingSkeleton from "./EntryLoadingSkeleton" import EntryLoadingSkeleton from "./EntryLoadingSkeleton"
import { useSearchParams } from "react-router" import { useSearchParams } from "react-router"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "./ui/table"
const ImagePreprocessor = (src) => { const ImagePreprocessor = (src) => {
const filename = src.src.split("/").pop() const filename = src.src.split("/").pop()
const s3RootUrl = "https://eolas.s3.systemsobscure.net/" const s3RootUrl = "https://eolas.s3.systemsobscure.net/"
@ -78,22 +78,17 @@ export default function EntryBody({ body, isLoading }) {
{highlighter(children, highlight)} {highlighter(children, highlight)}
</li> </li>
), ),
table: ({ children }) => <table className="w-full mb-4 text-sm">{children}</table>, table: ({ children }) => (
tr: ({ children }) => ( <Table className="w-full mb-4 text-sm overflow-x-auto">{children}</Table>
<tr className="even:bg-muted m-0 border-t p-0">
{highlighter(children, highlight)}
</tr>
),
th: ({ children }) => (
<th className="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right">
{highlighter(children, highlight)}
</th>
),
td: ({ children }) => (
<td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
{highlighter(children, highlight)}
</td>
), ),
thead: ({ children }) => <TableHeader>{children}</TableHeader>,
tr: ({ children }) => <TableRow>{highlighter(children, highlight)}</TableRow>,
th: ({ children }) => <TableHead>{highlighter(children, highlight)}</TableHead>,
td: ({ children }) => <TableCell>{highlighter(children, highlight)}</TableCell>,
tbody: ({ children }) => <TableBody>{children}</TableBody>,
blockquote: ({ children }) => ( blockquote: ({ children }) => (
<blockquote className="mt-4 border-l-2 pl-6 text-muted-foreground"> <blockquote className="mt-4 border-l-2 pl-6 text-muted-foreground">
{highlighter(children, highlight)} {highlighter(children, highlight)}