From 9ee70be392ee405e98d45aab7d3952d8476133d6 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 30 Jan 2026 11:31:44 +0000
Subject: [PATCH] fix: make code blocks horizontally scrollable with full-width
 diff backgrounds

- Use white-space: pre for horizontal scrolling instead of wrapping
- Add width: fit-content and min-width: 100% to code element
- Ensure diff line backgrounds extend full width when scrolling
---
 src/styles/shiki-theme.css | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/styles/shiki-theme.css b/src/styles/shiki-theme.css
index 04f4d43..1a559a1 100644
--- a/src/styles/shiki-theme.css
+++ b/src/styles/shiki-theme.css
@@ -69,20 +69,24 @@
   font-family: "Oxygen Mono", monospace;
   font-size: 0.75rem;
   line-height: 1.5;
-  white-space: pre-wrap;
-  overflow-wrap: break-word;
+  white-space: pre;
   tab-size: 4;
   color: hsl(var(--foreground));
   /* Flex layout for consistent line spacing */
   display: flex;
   flex-direction: column;
   gap: 0;
+  /* Ensure lines extend for proper diff backgrounds */
+  width: fit-content;
+  min-width: 100%;
 }
 
-/* Lines with proper spacing and wrapping */
+/* Lines with proper spacing */
 .shiki-container .line {
   display: block;
   min-height: 1.5em;
+  /* Ensure background extends full width for diff highlighting */
+  width: 100%;
 }
 
 /* Ensure shiki's inline styles don't conflict */