From cc9fe832c224d3dda661d1cd3bb0c5d5b187b3f8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A8=8B=E5=BA=8F=E5=91=98=E9=98=BF=E6=B1=9F=28Relakkes?=
 =?UTF-8?q?=29?= <relakkes@gmail.com>
Date: Mon, 6 Apr 2026 21:30:34 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20compact=20code=20block=20rendering=20?=
 =?UTF-8?q?=E2=80=94=20tighter=20line=20height,=20softer=20borders?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 desktop/src/components/chat/CodeViewer.tsx | 17 +++++++----------
 1 file changed, 7 insertions(+), 10 deletions(-)

diff --git a/desktop/src/components/chat/CodeViewer.tsx b/desktop/src/components/chat/CodeViewer.tsx
index f8ce60ec..f75721e5 100644
--- a/desktop/src/components/chat/CodeViewer.tsx
+++ b/desktop/src/components/chat/CodeViewer.tsx
@@ -38,11 +38,10 @@ export function CodeViewer({ code, language, maxLines = 20, showLineNumbers = tr
   const lineCountLabel = `${lines.length} ${lines.length === 1 ? 'line' : 'lines'}`
 
   const showExpandToggle = lines.length > maxLines
-  const displayLines = visibleLines.length
 
   return (
-    <div className="overflow-hidden rounded-2xl border border-[#d0d7de] bg-[#f6f8fa] text-[#24292f]">
-      <div className="flex items-center justify-between border-b border-[#d0d7de] bg-white px-3 py-2 text-[11px] text-[#57606a]">
+    <div className="overflow-hidden rounded-lg border border-[#d0d7de] bg-[#f6f8fa] text-[#24292f]">
+      <div className="flex items-center justify-between border-b border-[#d0d7de] bg-white px-3 py-1.5 text-[11px] text-[#57606a]">
         <div className="flex items-center gap-3">
           <span className="font-semibold uppercase tracking-[0.14em] text-[#57606a]">{languageLabel}</span>
           <span>{lineCountLabel}</span>
@@ -54,23 +53,21 @@ export function CodeViewer({ code, language, maxLines = 20, showLineNumbers = tr
       </div>
 
       <div className="max-h-[420px] overflow-auto">
-        <div className="min-w-full font-[var(--font-mono)] text-[12px] leading-[1.45]">
+        <div className="min-w-full font-[var(--font-mono)] text-[12px] leading-[1.3]">
           {visibleLines.map((line, index) => (
             <div
               key={`${startLine + index}-${line}`}
-              className={`grid grid-cols-[3rem,minmax(0,1fr)] gap-0 last:border-b-0 ${
-                index === displayLines - 1 ? '' : 'border-b border-[#d8dee4]'
-              }`}
+              className="grid grid-cols-[3rem,minmax(0,1fr)] gap-0 hover:bg-[#f6f8fa]/50"
             >
               {showLineNumbers ? (
-                <span className="select-none border-r border-[#d8dee4] bg-[#f6f8fa] px-3 py-1 text-right text-[11px] text-[#57606a]">
+                <span className="select-none border-r border-[#eaeef2] bg-[#fafbfc] px-2 py-px text-right text-[11px] text-[#8b949e]">
                   {startLine + index}
                 </span>
               ) : (
                 <span className="w-0" />
               )}
               <span
-                className="overflow-hidden bg-white px-4 py-1 whitespace-pre-wrap break-words text-[#24292f]"
+                className="overflow-hidden bg-white px-4 py-px whitespace-pre-wrap break-words text-[#24292f]"
                 dangerouslySetInnerHTML={{ __html: highlightedLines[index] ?? escapeHtml(line) }}
               />
             </div>
@@ -81,7 +78,7 @@ export function CodeViewer({ code, language, maxLines = 20, showLineNumbers = tr
       {showExpandToggle && (
         <button
           onClick={() => setExpanded((value) => !value)}
-          className="w-full border-t border-white/8 py-2 text-[10px] font-semibold uppercase tracking-[0.14em] text-[#999] transition-colors hover:text-white"
+          className="w-full border-t border-[#d0d7de] bg-[#f6f8fa] py-1.5 text-[10px] font-semibold uppercase tracking-[0.14em] text-[#57606a] transition-colors hover:bg-[#eaeef2] hover:text-[#24292f]"
         >
           {expanded ? 'Collapse' : `Show ${lines.length - maxLines} more lines`}
         </button>