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)
This commit is contained in:
Claude
2026-01-30 10:58:26 +00:00
parent 24ec67370a
commit c7a4be04af

View File

@@ -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;
}
/* ==========================================================================