🤖 Fix code review textarea wrapping

The code review note textarea was extending horizontally instead of
wrapping text to fit visible boundaries when typing long lines.

Changes:
- NoteTextarea: Added overflow-x: hidden to prevent horizontal scroll
- NoteTextarea: Added white-space: pre-wrap to wrap long lines
- NoteTextarea: Added word-wrap: break-word to break long words

Result:
Text now wraps within the visible boundaries of the code review panel
instead of extending beyond the screen.

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 */
   * {
@@ -348,6 +343,9 @@ const NoteTextarea = styled.textarea`
   color: var(--color-text);
   resize: none; /* Disable manual resize since we auto-grow */
   overflow-y: hidden; /* Hide scrollbar during auto-grow */
+  overflow-x: hidden; /* Prevent horizontal scroll */
+  white-space: pre-wrap; /* Wrap long lines to fit visible boundaries */
+  word-wrap: break-word; /* Break long words if needed */
 
   &:focus {
     outline: none;