🤖 Fix code review textarea wrapping

The review note textarea was extending horizontally beyond the visible
viewport because it was inheriting the width of the scrollable content
area (which expands for long diff lines) rather than the visible
scrollport width.

Solution:
Use position: sticky with left: 0 and width: 100% to remove the
InlineNoteContainer from the grid flow. This constrains it to the
visible scrollport width while keeping it visually positioned below
the selected lines.

Changes:
- InlineNoteContainer: Added position: sticky, left: 0, width: 100%
- NoteTextarea: Added overflow-y: auto, white-space: pre-wrap,
  word-wrap: break-word, box-sizing: border-box

Result:
Text in the review note input wraps within the visible viewport
boundaries. Long diff lines can still scroll horizontally, but the
textarea respects the visible container width.

Author: ammar-agent

src/components/shared/DiffRenderer.tsx

@@ -333,10 +333,16 @@ const InlineNoteContainer = styled.div`
   background: #1e1e1e;
   border-top: 1px solid hsl(from var(--color-review-accent) h s l / 0.3);
   margin: 0;
+  /* Remove from grid flow to prevent inheriting wide content width */
+  position: sticky;
+  left: 0;
+  right: 0;
+  width: 100%;
 `;
 
 const NoteTextarea = styled.textarea`
   width: 100%;
+  max-width: 100%;
   min-height: calc(12px * 1.4 * 3 + 12px); /* 3 lines + padding */
   padding: 6px 8px;
   font-family: var(--font-monospace);
@@ -347,7 +353,11 @@ const NoteTextarea = styled.textarea`
   border-radius: 2px;
   color: var(--color-text);
   resize: none; /* Disable manual resize since we auto-grow */
-  overflow-y: hidden; /* Hide scrollbar during auto-grow */
+  overflow-y: auto; /* Allow scrolling for tall content */
+  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 */
+  box-sizing: border-box; /* Include padding in width calculation */
 
   &:focus {
     outline: none;