fix(diff-viewer): cap comment editor width for readability on wide panes

packages/diff-viewer/src/lib/utils/diffViewerHelpers.commentLayout.test.ts

@@ -0,0 +1,69 @@
+import { describe, expect, it } from 'vitest';
+import {
+  buildLineCommentEditorLayout,
+  buildRangeCommentEditorLayout,
+  MAX_COMMENT_EDITOR_WIDTH,
+} from './diffViewerHelpers';
+
+/** Minimal DOMRect stand-in; the layout builders only read top/bottom/left/width. */
+function rect(partial: Partial<DOMRect>): DOMRect {
+  return {
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    width: 0,
+    height: 0,
+    x: 0,
+    y: 0,
+    toJSON: () => ({}),
+    ...partial,
+  } as DOMRect;
+}
+
+const viewerRect = rect({ top: 0, left: 0, width: 2400 });
+const anchorLineRect = rect({ top: 300, bottom: 320 });
+const EDITOR_HEIGHT = 120;
+const PANE_HORIZONTAL_PADDING = 12;
+
+describe('buildRangeCommentEditorLayout', () => {
+  it('spans the pane minus padding when the pane is narrow', () => {
+    const paneRect = rect({ top: 0, bottom: 800, left: 0, width: 500 });
+    const layout = buildRangeCommentEditorLayout(
+      viewerRect,
+      paneRect,
+      anchorLineRect,
+      'below',
+      EDITOR_HEIGHT,
+      PANE_HORIZONTAL_PADDING
+    );
+    expect(layout.width).toBe(500 - 2 * PANE_HORIZONTAL_PADDING);
+  });
+
+  it('clamps to MAX_COMMENT_EDITOR_WIDTH on a wide pane', () => {
+    const paneRect = rect({ top: 0, bottom: 800, left: 0, width: 2400 });
+    const layout = buildRangeCommentEditorLayout(viewerRect, paneRect, anchorLineRect, 'below');
+    expect(layout.width).toBe(MAX_COMMENT_EDITOR_WIDTH);
+  });
+});
+
+describe('buildLineCommentEditorLayout', () => {
+  it('spans the pane minus padding when the pane is narrow', () => {
+    const paneRect = rect({ top: 0, bottom: 800, left: 0, width: 500 });
+    const layout = buildLineCommentEditorLayout(
+      viewerRect,
+      paneRect,
+      anchorLineRect,
+      'below',
+      EDITOR_HEIGHT,
+      PANE_HORIZONTAL_PADDING
+    );
+    expect(layout.width).toBe(500 - 2 * PANE_HORIZONTAL_PADDING);
+  });
+
+  it('clamps to MAX_COMMENT_EDITOR_WIDTH on a wide pane', () => {
+    const paneRect = rect({ top: 0, bottom: 800, left: 0, width: 2400 });
+    const layout = buildLineCommentEditorLayout(viewerRect, paneRect, anchorLineRect, 'below');
+    expect(layout.width).toBe(MAX_COMMENT_EDITOR_WIDTH);
+  });
+});

packages/diff-viewer/src/lib/utils/diffViewerHelpers.ts

@@ -273,6 +273,13 @@ export function getTokensForLine(tokens: Token[][], index: number): Token[] {
   return tokens[index] || [{ content: '', color: 'inherit' }];
 }
 
+/**
+ * Comment text stays readable on very wide panes (e.g. a fullscreen viewer on
+ * a wide monitor) by capping the editor at a comfortable prose measure instead
+ * of stretching edge to edge with the pane.
+ */
+export const MAX_COMMENT_EDITOR_WIDTH = 640;
+
 export function decideCommentPositionBySpace(
   spaceBelow: number,
   spaceAbove: number,
@@ -303,7 +310,7 @@ export function buildRangeCommentEditorLayout(
   return {
     top,
     left: paneRect.left - viewerRect.left + paneHorizontalPadding,
-    width: paneRect.width - paneHorizontalPadding * 2,
+    width: Math.min(paneRect.width - paneHorizontalPadding * 2, MAX_COMMENT_EDITOR_WIDTH),
     position,
     visible,
   };
@@ -329,7 +336,7 @@ export function buildLineCommentEditorLayout(
   return {
     top,
     left: paneRect.left - viewerRect.left + paneHorizontalPadding,
-    width: paneRect.width - paneHorizontalPadding * 2,
+    width: Math.min(paneRect.width - paneHorizontalPadding * 2, MAX_COMMENT_EDITOR_WIDTH),
     visible,
     position,
   };