jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ui: ensure md table has max sizes to prevent overflow

Browse source
This commit is contained in:
nick-delirium 2025-05-02 14:36:37 +02:00
parent 3523a0846e
commit 9e0bd69166
No known key found for this signature in database
GPG key ID: 93ABD695DF5FDBA0
2 changed files with 59 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
frontend/app/components/Kai/components/ChatMsg.tsx
View file

@ -50,7 +50,9 @@ export function ChatMsg({
</div>
)}
<div className={'mt-1'}>
<Markdown remarkPlugins={[remarkGfm]}>{text}</Markdown>
<div className='markdown-body'>
<Markdown remarkPlugins={[remarkGfm]}>{text}</Markdown>
</div>
{isUser ? (
isLast ? (
<div

56
frontend/app/styles/main.css
View file

@ -287,3 +287,59 @@ svg {
.text-black {
color: $black;
}
.markdown-body table {
table-layout: auto;
width: 100%;
}
.markdown-body dl dt {
padding: 0;
margin-top: 16px;
font-size: 1em;
font-style: italic;
font-weight: 600;
}
.markdown-body dl dd {
padding: 0 16px;
margin-bottom: 16px;
}
.markdown-body table th {
font-weight: 600;
}
.markdown-body table th,
.markdown-body table td {
padding: 3px 6px;
border: 1px solid $gray-light;
}
.markdown-body table td>:last-child {
margin-bottom: 0;
}
.markdown-body table thead {
background-color: rgba(235, 235, 255, 1);
}
.markdown-body table tbody tr {
background-color: rgba(250, 250, 255, 1);
}
.markdown-body table tbody td {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 30px;
max-width: 300px;
}
.markdown-body table tr:nth-child(2n) {
background-color: rgba(235, 235, 255, 1);
}
.markdown-body table img {
background-color: transparent;
}