authorgravatar for 589761+jvzijp@users.noreply.github.comJacob <589761+jvzijp@users.noreply.github.com> 2026-04-10 02:52:41+02:00
committergravatar for noreply@github.comGitHub <noreply@github.com> 2026-04-09 17:52:41-07:00
log7c0849fe2e449c25ff43a1d5993f6f75b2be3a59
tree910003b3ba2f8161e80cec9edec315a22cafdbb5
parent592c234fd5d1ba8eb59197a15affbbda1150341f
signature Signed by PGP key B5690EEEBB952194

fix(web): harmonize typography in chat messages and code blocks (#1861)

3 files changed, 9 insertions(+), 10 deletions(-)

apps/web/src/components/ChatMarkdown.tsx+1-1
...@@ -165,7 +165,7 @@ function MarkdownCodeBlock({ code, children }: { code: string; children: ReactNo...@@ -165,7 +165,7 @@ function MarkdownCodeBlock({ code, children }: { code: string; children: ReactNo
165 );165 );
166166
167 return (167 return (
168 <div className="chat-markdown-codeblock">168 <div className="chat-markdown-codeblock leading-snug">
169 <button169 <button
170 type="button"170 type="button"
171 className="chat-markdown-copy-button"171 className="chat-markdown-copy-button"
apps/web/src/components/chat/MessagesTimeline.tsx+7-7
...@@ -428,7 +428,7 @@ export const MessagesTimeline = memo(function MessagesTimeline({...@@ -428,7 +428,7 @@ export const MessagesTimeline = memo(function MessagesTimeline({
428 </Button>428 </Button>
429 )}429 )}
430 </div>430 </div>
431 <p className="text-right text-[10px] text-muted-foreground/30">431 <p className="text-right text-xs text-muted-foreground/50">
432 {formatTimestamp(row.message.createdAt, timestampFormat)}432 {formatTimestamp(row.message.createdAt, timestampFormat)}
433 </p>433 </p>
434 </div>434 </div>
...@@ -515,7 +515,7 @@ export const MessagesTimeline = memo(function MessagesTimeline({...@@ -515,7 +515,7 @@ export const MessagesTimeline = memo(function MessagesTimeline({
515 </div>515 </div>
516 );516 );
517 })()}517 })()}
518 <p className="mt-1.5 text-[10px] text-muted-foreground/30">518 <p className="mt-1.5 text-xs text-muted-foreground/50">
519 {formatMessageMeta(519 {formatMessageMeta(
520 row.message.createdAt,520 row.message.createdAt,
521 row.message.streaming521 row.message.streaming
...@@ -703,7 +703,7 @@ const UserMessageBody = memo(function UserMessageBody(props: {...@@ -703,7 +703,7 @@ const UserMessageBody = memo(function UserMessageBody(props: {
703 }703 }
704704
705 return (705 return (
706 <div className="wrap-break-word whitespace-pre-wrap font-mono text-sm leading-relaxed text-foreground">706 <div className="whitespace-pre-wrap wrap-break-word text-sm leading-relaxed text-foreground">
707 {inlineNodes}707 {inlineNodes}
708 </div>708 </div>
709 );709 );
...@@ -731,7 +731,7 @@ const UserMessageBody = memo(function UserMessageBody(props: {...@@ -731,7 +731,7 @@ const UserMessageBody = memo(function UserMessageBody(props: {
731 }731 }
732732
733 return (733 return (
734 <div className="wrap-break-word whitespace-pre-wrap font-mono text-sm leading-relaxed text-foreground">734 <div className="whitespace-pre-wrap wrap-break-word text-sm leading-relaxed text-foreground">
735 {inlineNodes}735 {inlineNodes}
736 </div>736 </div>
737 );737 );
...@@ -742,9 +742,9 @@ const UserMessageBody = memo(function UserMessageBody(props: {...@@ -742,9 +742,9 @@ const UserMessageBody = memo(function UserMessageBody(props: {
742 }742 }
743743
744 return (744 return (
745 <pre className="whitespace-pre-wrap wrap-break-word font-mono text-sm leading-relaxed text-foreground">745 <div className="whitespace-pre-wrap wrap-break-word text-sm leading-relaxed text-foreground">
746 {props.text}746 {props.text}
747 </pre>747 </div>
748 );748 );
749});749});
750750
...@@ -871,7 +871,7 @@ const SimpleWorkEntryRow = memo(function SimpleWorkEntryRow(props: {...@@ -871,7 +871,7 @@ const SimpleWorkEntryRow = memo(function SimpleWorkEntryRow(props: {
871 <div className="max-w-full">871 <div className="max-w-full">
872 <p872 <p
873 className={cn(873 className={cn(
874 "truncate text-[11px] leading-5",874 "truncate text-xs leading-5",
875 workToneClass(workEntry.tone),875 workToneClass(workEntry.tone),
876 preview ? "text-muted-foreground/70" : "",876 preview ? "text-muted-foreground/70" : "",
877 )}877 )}
apps/web/src/index.css+1-2
...@@ -335,8 +335,7 @@ label:has(> select#reasoning-effort) select {...@@ -335,8 +335,7 @@ label:has(> select#reasoning-effort) select {
335 border: none;335 border: none;
336 background: transparent;336 background: transparent;
337 padding: 0;337 padding: 0;
338 line-height: 1.5;338 font-size: 0.75rem;
339 font-size: 0.875rem;
340}339}
341340
342.chat-markdown .chat-markdown-codeblock {341.chat-markdown .chat-markdown-codeblock {