fix(web): don't apply Shiki background-color to token spans

Quentin Gliech and Claude Opus 4.6 (1M context) created 1 month ago

Only the root .shiki element gets background-color. Token spans only
get color/font-style/font-weight/text-decoration. This prevents
white blocks showing through the yellow line highlight.

Co-Authored-By: Claude Opus 4.6 (1M context) <[e-mail]>

Change summary

webui2/src/components/code/file-viewer.module.css |  1 -
webui2/src/index.css                              | 14 ++++++++++----
2 files changed, 10 insertions(+), 5 deletions(-)

Detailed changes

webui2/src/components/code/file-viewer.module.css

@@ -37,7 +37,6 @@
   opacity: 0.4;
   user-select: none;
   cursor: pointer;
-  background: transparent !important;
 }
 
 .line-number:hover {

webui2/src/index.css

@@ -112,19 +112,25 @@ body {
 }
 
 /* ── Shiki dual-theme (defaultColor: false) ──────────────────────────────── */
-.shiki,
-.shiki span {
+.shiki {
   color: var(--shiki-light);
   background-color: var(--shiki-light-bg);
+}
+
+.shiki span {
+  color: var(--shiki-light);
   font-style: var(--shiki-light-font-style);
   font-weight: var(--shiki-light-font-weight);
   text-decoration: var(--shiki-light-text-decoration);
 }
 
-.dark .shiki,
-.dark .shiki span {
+.dark .shiki {
   color: var(--shiki-dark);
   background-color: var(--shiki-dark-bg);
+}
+
+.dark .shiki span {
+  color: var(--shiki-dark);
   font-style: var(--shiki-dark-font-style);
   font-weight: var(--shiki-dark-font-weight);
   text-decoration: var(--shiki-dark-text-decoration);