🤖 fix: remove review line tooltip

Stop rendering the floating review comment helper from the review gutter so
hovering line controls no longer obscures nearby code while keeping inline
comment actions and range selection intact.

---

_Generated with `mux` • Model: `openai:gpt-5.4` • Thinking: `xhigh` • Cost: `$0.92`_

<!-- mux-attribution: model=openai:gpt-5.4 thinking=xhigh costs=0.92 -->

Author: ammar-agent

src/browser/features/Shared/DiffRenderer.tsx

@@ -5,13 +5,11 @@
  */
 
 import React, { useEffect, useMemo, useState } from "react";
-import { createPortal } from "react-dom";
 import { stopKeyboardPropagation } from "@/browser/utils/events";
 import { cn } from "@/common/lib/utils";
 import { getLanguageFromPath } from "@/common/utils/git/languageDetector";
 import { useOverflowDetection } from "@/browser/hooks/useOverflowDetection";
 import { MessageSquare } from "lucide-react";
-import { TOOLTIP_SURFACE_CLASSNAME } from "@/browser/components/Tooltip/Tooltip";
 import { InlineReviewNote, type ReviewActionCallbacks } from "./InlineReviewNote";
 import { groupDiffLines } from "@/browser/utils/highlighting/diffChunking";
 import { useTheme, type ThemeMode } from "@/browser/contexts/ThemeContext";
@@ -672,15 +670,6 @@ interface LineSelection {
   endIndex: number;
 }
 
-interface TooltipAnchorRect {
-  left: number;
-  top: number;
-  width: number;
-  height: number;
-}
-
-const REVIEW_COMMENT_TOOLTIP = "Add review comment (Shift-click or drag to select range)";
-
 // CSS class for diff line wrapper - used by arbitrary selector in CommentButton
 const SELECTABLE_DIFF_LINE_CLASS = "selectable-diff-line";
 
@@ -1029,49 +1018,6 @@ export const SelectableDiffRenderer = React.memo<SelectableDiffRendererProps>(
     const [selection, setSelection] = React.useState<LineSelection | null>(null);
     const [selectionInitialNoteText, setSelectionInitialNoteText] = React.useState("");
 
-    const reviewTooltipTriggerRef = React.useRef<HTMLButtonElement | null>(null);
-    const [reviewTooltipAnchorRect, setReviewTooltipAnchorRect] =
-      React.useState<TooltipAnchorRect | null>(null);
-
-    const hideReviewTooltip = React.useCallback((trigger?: HTMLButtonElement | null) => {
-      if (trigger && reviewTooltipTriggerRef.current !== trigger) {
-        return;
-      }
-
-      reviewTooltipTriggerRef.current = null;
-      setReviewTooltipAnchorRect(null);
-    }, []);
-
-    const syncReviewTooltipAnchor = React.useCallback(() => {
-      const trigger = reviewTooltipTriggerRef.current;
-      if (!trigger?.isConnected) {
-        hideReviewTooltip();
-        return;
-      }
-
-      const { left, top, width, height } = trigger.getBoundingClientRect();
-      setReviewTooltipAnchorRect((previousRect) => {
-        if (
-          previousRect?.left === left &&
-          previousRect?.top === top &&
-          previousRect?.width === width &&
-          previousRect?.height === height
-        ) {
-          return previousRect;
-        }
-
-        return { left, top, width, height };
-      });
-    }, [hideReviewTooltip]);
-
-    const showReviewTooltip = React.useCallback(
-      (trigger: HTMLButtonElement) => {
-        reviewTooltipTriggerRef.current = trigger;
-        syncReviewTooltipAnchor();
-      },
-      [syncReviewTooltipAnchor]
-    );
-
     const flushPendingDragSelection = React.useCallback(() => {
       const anchorIndex = dragAnchorRef.current;
       const pendingLineIndex = pendingDragLineIndexRef.current;
@@ -1139,34 +1085,6 @@ export const SelectableDiffRenderer = React.memo<SelectableDiffRendererProps>(
       };
     }, []);
 
-    React.useEffect(() => {
-      if (!reviewTooltipAnchorRect) {
-        return;
-      }
-
-      const handleViewportChange = () => {
-        syncReviewTooltipAnchor();
-      };
-
-      window.addEventListener("resize", handleViewportChange);
-      window.addEventListener("scroll", handleViewportChange, true);
-
-      return () => {
-        window.removeEventListener("resize", handleViewportChange);
-        window.removeEventListener("scroll", handleViewportChange, true);
-      };
-    }, [reviewTooltipAnchorRect, syncReviewTooltipAnchor]);
-
-    React.useEffect(() => {
-      if (!reviewTooltipTriggerRef.current) {
-        return;
-      }
-
-      // File/hunk switches can remove the hovered trigger during a normal React render without any
-      // scroll/resize event, so resync here too to avoid leaving a stale floating tooltip behind.
-      syncReviewTooltipAnchor();
-    });
-
     const { theme } = useTheme();
 
     const lastExternalSelectionRequestIdRef = React.useRef<number | null>(null);
@@ -1368,8 +1286,6 @@ export const SelectableDiffRenderer = React.memo<SelectableDiffRendererProps>(
           return;
         }
 
-        hideReviewTooltip();
-
         // Notify parent that this hunk should become active.
         onLineClick?.();
         onLineIndexSelect?.(lineIndex, shiftKey);
@@ -1396,7 +1312,7 @@ export const SelectableDiffRenderer = React.memo<SelectableDiffRendererProps>(
           return { startIndex: anchor, endIndex: lineIndex };
         });
       },
-      [hideReviewTooltip, onLineClick, onLineIndexSelect, onReviewNote, renderSelectionStartIndex]
+      [onLineClick, onLineIndexSelect, onReviewNote, renderSelectionStartIndex]
     );
 
     const updateDragSelection = React.useCallback(
@@ -1413,8 +1329,6 @@ export const SelectableDiffRenderer = React.memo<SelectableDiffRendererProps>(
     );
 
     const handleCommentButtonClick = (lineIndex: number, shiftKey: boolean) => {
-      hideReviewTooltip();
-
       // Keep immersive cursor/hunk selection in sync with inline comment actions.
       onLineClick?.();
       onLineIndexSelect?.(lineIndex, shiftKey);
@@ -1573,17 +1487,12 @@ export const SelectableDiffRenderer = React.memo<SelectableDiffRendererProps>(
                     reviewButton={
                       onReviewNote && (
                         <>
-                          {/* Regular review can mount thousands of diff lines at once, so keep
-                              one shared tooltip anchored to the active button instead of mounting
-                              a full Radix tooltip tree for every individual line. */}
+                          {/* Review mode already turns the gutter into a hover target, so keep the
+                              action inline without an extra floating tooltip covering nearby lines. */}
                           <button
                             type="button"
                             className="pointer-events-none absolute inset-0 flex items-center justify-center rounded-sm text-[var(--color-review-accent)]/60 opacity-0 transition-opacity group-hover:pointer-events-auto group-hover:opacity-100 hover:text-[var(--color-review-accent)] active:scale-90"
                             style={{ position: "absolute", inset: 0 }}
-                            onMouseEnter={(event) => showReviewTooltip(event.currentTarget)}
-                            onMouseLeave={(event) => hideReviewTooltip(event.currentTarget)}
-                            onFocus={(event) => showReviewTooltip(event.currentTarget)}
-                            onBlur={(event) => hideReviewTooltip(event.currentTarget)}
                             onClick={(e) => {
                               e.stopPropagation();
                               handleCommentButtonClick(displayIndex, e.shiftKey);
@@ -1645,25 +1554,6 @@ export const SelectableDiffRenderer = React.memo<SelectableDiffRendererProps>(
             );
           })}
         </DiffContainer>
-        {reviewTooltipAnchorRect &&
-          createPortal(
-            <div
-              className={cn(
-                TOOLTIP_SURFACE_CLASSNAME,
-                "pointer-events-none fixed z-[10001] border-separator-light"
-              )}
-              style={{
-                left: reviewTooltipAnchorRect.left + reviewTooltipAnchorRect.width + 8,
-                top: reviewTooltipAnchorRect.top + reviewTooltipAnchorRect.height / 2,
-                maxWidth: "min(20rem, calc(100vw - 24px))",
-                transform: "translateY(-50%)",
-              }}
-            >
-              <span className="border-border-medium bg-modal-bg absolute top-1/2 left-0 h-2 w-2 -translate-x-1/2 -translate-y-1/2 rotate-45 border-b border-l" />
-              {REVIEW_COMMENT_TOOLTIP}
-            </div>,
-            document.body
-          )}
       </>
     );
   }

src/browser/features/Shared/SelectableDiffRenderer.dragSelect.test.tsx

@@ -103,7 +103,7 @@ describe("SelectableDiffRenderer drag selection", () => {
     }
   });
 
-  test("hovering the review button uses the full custom range-selection tooltip", async () => {
+  test("hovering the review button does not show a tooltip", async () => {
     const content = "+const a = 1;\n+const b = 2;";
 
     const { container } = render(
@@ -128,11 +128,9 @@ describe("SelectableDiffRenderer drag selection", () => {
 
     fireEvent.mouseEnter(commentButton!);
 
-    await waitFor(() => {
-      expect(document.body.textContent).toContain(
-        "Add review comment (Shift-click or drag to select range)"
-      );
-    });
+    expect(document.body.textContent).not.toContain(
+      "Add review comment (Shift-click or drag to select range)"
+    );
   });
 
   test("dragging on the indicator column selects a line range", async () => {