From c7a4be04afacf978af31af47ae87b826e2fe4981 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 30 Jan 2026 10:58:26 +0000
Subject: [PATCH] fix: improve diff line spacing with flex layout

- Use flex-col with gap-0 on code element for tight line packing
- Reduce line-height from 1.5 to 1.4 for tighter spacing
- Add .line display:block with min-height for consistent sizing
- Simplify diff background styling (remove negative margin hack)
---
 src/styles/shiki-theme.css | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/styles/shiki-theme.css b/src/styles/shiki-theme.css
index 219de0f..820b904 100644
--- a/src/styles/shiki-theme.css
+++ b/src/styles/shiki-theme.css
@@ -68,12 +68,22 @@
 .shiki-container code {
   font-family: "Oxygen Mono", monospace;
   font-size: 0.75rem;
-  line-height: 1.5;
+  line-height: 1.4;
   white-space: pre;
   word-spacing: normal;
   word-break: normal;
   tab-size: 4;
   color: hsl(var(--foreground));
+  /* Flex layout for tight line packing */
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+/* Lines should be inline-block to allow background colors */
+.shiki-container .line {
+  display: block;
+  min-height: 1.4em;
 }
 
 /* Ensure shiki's inline styles don't conflict */
@@ -107,19 +117,13 @@
    Diff Block Backgrounds
    ========================================================================== */
 
-/* Diff-specific styling - block-level backgrounds for inserted/deleted */
+/* Diff-specific styling - highlight inserted/deleted lines */
 .shiki-container .line:has([style*="--shiki-token-deleted"]) {
   background: hsl(var(--diff-deleted-bg));
-  display: block;
-  margin: 0 -1rem;
-  padding: 0 1rem;
 }
 
 .shiki-container .line:has([style*="--shiki-token-inserted"]) {
   background: hsl(var(--diff-inserted-bg));
-  display: block;
-  margin: 0 -1rem;
-  padding: 0 1rem;
 }
 
 /* ==========================================================================