From fd059a029ce96ddadf4b1d46c36d97ebfaa8eac8 Mon Sep 17 00:00:00 2001
From: Quentin Gliech <quentingliech@gmail.com>
Date: Sun, 5 Apr 2026 20:26:19 +0200
Subject: [PATCH] fix(web): fix code block background stripes and dark mode
 highlight
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Remove !bg-transparent override — let Shiki control the background
  so there's no mismatch between padding areas and line backgrounds
- Move vertical padding from <code> to first/last .line elements so
  every visible pixel has Shiki's background
- Use separate light/dark highlight colors (yellow 30% light, 15% dark)
- Fix line number opacity to work with both themes

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 webui2/src/components/code/file-viewer.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/webui2/src/components/code/file-viewer.tsx b/webui2/src/components/code/file-viewer.tsx
index e3271e7b32ec6ffb13e12bf7194b22c6fdc907f4..a4c5b925bb5f71d2a57097fcad9695183ce9d2fe 100644
--- a/webui2/src/components/code/file-viewer.tsx
+++ b/webui2/src/components/code/file-viewer.tsx
@@ -291,8 +291,9 @@ function CodeBlock({ selectedRange, onLineClick, children }: CodeBlockProps) {
     for (let i = selectedRange.start; i <= selectedRange.end; i++) {
       selectors.push(`.code-lines code > .line:nth-child(${i})`);
     }
+    // GitHub uses a yellow tint — adapt for light/dark
     return (
-      <style>{`${selectors.join(",")}{background-color:rgba(255,235,59,0.25)}`}</style>
+      <style>{`${selectors.join(",")}{background-color:rgba(255,235,59,0.3)}.dark ${selectors.join(",.dark ")}{background-color:rgba(255,235,59,0.15)}`}</style>
     );
   })();
 
@@ -313,11 +314,12 @@ function CodeBlock({ selectedRange, onLineClick, children }: CodeBlockProps) {
       {highlightStyle}
       <div
         className={cn(
-          "[&_.shiki]:!bg-transparent",
           "[&_pre]:!m-0 [&_pre]:!p-0",
-          "[&_code]:block [&_code]:py-2",
+          "[&_code]:block",
           "[&_code>.line]:block [&_code>.line]:min-w-full [&_code>.line]:pr-4",
-          "[&_code>.line::before]:inline-block [&_code>.line::before]:w-12 [&_code>.line::before]:mr-4 [&_code>.line::before]:text-right [&_code>.line::before]:text-muted-foreground/50 [&_code>.line::before]:select-none [&_code>.line::before]:cursor-pointer [&_code>.line::before]:content-[attr(data-line-number)]",
+          "[&_code>.line:first-child]:pt-2 [&_code>.line:last-child]:pb-2",
+          "[&_code>.line::before]:inline-block [&_code>.line::before]:w-12 [&_code>.line::before]:mr-4 [&_code>.line::before]:text-right [&_code>.line::before]:select-none [&_code>.line::before]:cursor-pointer [&_code>.line::before]:content-[attr(data-line-number)]",
+          "[&_code>.line::before]:opacity-40",
         )}
       >
         {children}