🤖 Fix diff text wrapping in code review

Long lines in code review diffs now wrap to fit the visible boundaries
instead of extending horizontally with scrollbars.

Changes:
- DiffLine: white-space: pre → pre-wrap + word-break: break-all
- DiffContainer: overflow-x: auto → hidden, grid: minmax(...) → 1fr
- Updated comments to reflect wrapping behavior

Author: ammar-agent

src/components/shared/DiffRenderer.tsx

@@ -26,21 +26,15 @@ const getContrastColor = (type: DiffLineType) => {
 };
 
 /**
- * Wrapper for diff lines - works with CSS Grid parent to ensure uniform widths
+ * Wrapper for diff lines - provides consistent backgrounds for wrapped content
  *
- * Problem: Lines of varying length created jagged backgrounds during horizontal scroll
- * because each wrapper was only as wide as its content.
- *
- * Solution: Parent container uses CSS Grid, which automatically makes all grid items
- * (these wrappers) the same width as the widest item. This ensures backgrounds span
- * the full scrollable area without creating infinite scroll.
- *
- * Key insight: width: 100% makes each wrapper span the full grid column width,
- * which CSS Grid automatically sets to the widest line's content.
+ * Lines wrap to fit visible boundaries (no horizontal scroll). Background colors
+ * span the full width of the container to maintain visual continuity even when
+ * content wraps across multiple lines.
  */
 export const DiffLineWrapper = styled.div<{ type: DiffLineType }>`
   display: block;
-  width: 100%; /* Span full grid column (width of longest line) */
+  width: 100%;
 
   background: ${({ type }) => {
     switch (type) {
@@ -56,7 +50,8 @@ export const DiffLineWrapper = styled.div<{ type: DiffLineType }>`
 
 export const DiffLine = styled.div<{ type: DiffLineType }>`
   font-family: var(--font-monospace);
-  white-space: pre;
+  white-space: pre-wrap;
+  word-break: break-all;
   display: flex;
   padding: ${({ type }) => (type === "header" ? "4px 8px" : "0 8px")};
   color: ${({ type }) => {
@@ -126,11 +121,11 @@ export const DiffContainer = styled.div<{ fontSize?: string; maxHeight?: string
   line-height: 1.4;
   max-height: ${({ maxHeight }) => maxHeight ?? "400px"};
   overflow-y: auto;
-  overflow-x: auto;
+  overflow-x: hidden;
 
-  /* CSS Grid ensures all lines span the same width (width of longest line) */
+  /* CSS Grid with content wrapping to fit visible boundaries */
   display: grid;
-  grid-template-columns: minmax(min-content, 1fr);
+  grid-template-columns: 1fr;
 
   /* Ensure all child elements inherit font size from container */
   * {