From d071f101deb3ff1ea829ae98a144a8df03538777 Mon Sep 17 00:00:00 2001 From: Ammar Date: Tue, 21 Oct 2025 15:31:21 -0500 Subject: [PATCH] =?UTF-8?q?=F0=9F=A4=96=20Fix=20code=20review=20textarea?= =?UTF-8?q?=20wrapping?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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. --- src/components/shared/DiffRenderer.tsx | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/src/components/shared/DiffRenderer.tsx b/src/components/shared/DiffRenderer.tsx index 864f710f8..826c83e10 100644 --- a/src/components/shared/DiffRenderer.tsx +++ b/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;