[app] Layout improvement to correct overflow of markdown content

This commit is contained in:
Alex Hancock
2024-11-26 23:12:29 -05:00
parent 3e25a440c3
commit a2ee2ce732
2 changed files with 4 additions and 4 deletions
+1 -1
View File
@@ -31,7 +31,7 @@ export default function GooseMessage({ message, metadata, messages, append }: Go
{message.content && (
<div className="flex bg-goose-bubble text-white rounded-2xl p-4 mb-[16px]">
<ReactMarkdown className="prose prose-xs">{message.content}</ReactMarkdown>
<ReactMarkdown className="prose prose-xs max-w-full overflow-x-auto break-words prose-pre:whitespace-pre-wrap prose-pre:break-words">{message.content}</ReactMarkdown>
</div>
)}
@@ -22,7 +22,7 @@ export default function ToolInvocations({ toolInvocations }) {
function ToolInvocation({ toolInvocation }) {
return (
<div className="flex bg-goose-bubble text-white rounded-2xl p-4 pb-0 mb-[16px]">
<div className="flex bg-goose-bubble text-white rounded-2xl p-4 pb-0 mb-[16px] max-w-full">
<div key={toolInvocation.toolCallId} className="w-full h-full flex flex-col text-tool">
<ToolCall call={toolInvocation} />
{toolInvocation.state === 'result' && <ToolResult result={toolInvocation} />}
@@ -54,7 +54,7 @@ function ToolCall({ call }: ToolCallProps) {
</div>
{call.args && (
<ReactMarkdown className="p-2">
<ReactMarkdown className="p-2 max-w-full overflow-x-auto break-words prose-pre:whitespace-pre-wrap prose-pre:break-words">
{argsMarkdownContent}
</ReactMarkdown>
)}
@@ -140,7 +140,7 @@ function ToolResult({ result }: ToolResultProps) {
{(isExpanded || !shouldMinimize) && (
<>
{item.type === 'text' && item.text && (
<ReactMarkdown className="text-tool-result-green whitespace-pre-wrap p-2">
<ReactMarkdown className="text-tool-result-green whitespace-pre-wrap p-2 max-w-full overflow-x-auto break-words prose-pre:whitespace-pre-wrap prose-pre:break-words">
{item.text}
</ReactMarkdown>
)}