From 6773c629e253830f436ac8fca4399d931cdaaffe Mon Sep 17 00:00:00 2001
From: "claude[bot]" <209825114+claude[bot]@users.noreply.github.com>
Date: Wed, 13 May 2026 09:35:05 +0000
Subject: [PATCH] fix: make "view" in comments feed an anchor link

Previously the "view" control was a <button> that called window.open in
its onClick handler. As a result, middle-click (mouse-wheel click) did
not open a new tab and instead triggered the browser's autoscroll
cursor. Render it as a real anchor with target="_blank" so native
middle-click and ctrl/cmd-click behavior works.

Fixes #4585

Co-authored-by: Cemre Inanc <cemreinanc@users.noreply.github.com>
---
 .../src/components/comment_feed/comment_card.tsx | 16 +++++++++-------
 .../comment_feed/comment_feed_card.tsx           | 11 +++--------
 2 files changed, 12 insertions(+), 15 deletions(-)

diff --git a/front_end/src/components/comment_feed/comment_card.tsx b/front_end/src/components/comment_feed/comment_card.tsx
index f335d38bb6..328ae79799 100644
--- a/front_end/src/components/comment_feed/comment_card.tsx
+++ b/front_end/src/components/comment_feed/comment_card.tsx
@@ -31,7 +31,7 @@ type Props = {
   keyFactorVotesScore: number;
   className?: string;
   expandOverride?: "auto" | "expanded" | "collapsed";
-  onViewComment?: () => void;
+  commentUrl?: string;
   disableVoting?: boolean;
   collapsedHeight?: number;
 };
@@ -84,14 +84,14 @@ const ExpandableCommentContent = ({
   isExpanded,
   needsExpand,
   contentRef,
-  onViewComment,
+  commentUrl,
   collapsedHeight,
 }: {
   comment: BECommentType;
   isExpanded: boolean;
   needsExpand: boolean;
   contentRef: React.RefObject<HTMLDivElement | null>;
-  onViewComment?: () => void;
+  commentUrl?: string;
   collapsedHeight: number;
 }) => {
   const locale = useLocale();
@@ -125,10 +125,12 @@ const ExpandableCommentContent = ({
             })}
           </span>
         </div>
-        {onViewComment && (
+        {commentUrl && (
           <Button
             variant="text"
-            onClick={onViewComment}
+            href={commentUrl}
+            target="_blank"
+            rel="noopener noreferrer"
             size="sm"
             className="gap-2 border-none px-2.5 py-1 font-normal text-blue-700 dark:text-blue-700-dark"
           >
@@ -177,7 +179,7 @@ const CommentCard: FC<Props> = ({
   changedMyMindCount,
   keyFactorVotesScore,
   expandOverride = "auto",
-  onViewComment,
+  commentUrl,
   disableVoting = false,
   collapsedHeight = DEFAULT_collapsedHeight,
 }) => {
@@ -278,7 +280,7 @@ const CommentCard: FC<Props> = ({
         isExpanded={effectiveExpanded}
         needsExpand={needsExpand}
         contentRef={contentRef}
-        onViewComment={onViewComment}
+        commentUrl={commentUrl}
         collapsedHeight={collapsedHeight}
       />
 
diff --git a/front_end/src/components/comment_feed/comment_feed_card.tsx b/front_end/src/components/comment_feed/comment_feed_card.tsx
index 3038a0b870..578724cf43 100644
--- a/front_end/src/components/comment_feed/comment_feed_card.tsx
+++ b/front_end/src/components/comment_feed/comment_feed_card.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { FC, memo, useCallback } from "react";
+import { FC, memo } from "react";
 
 import CommentCard from "@/components/comment_feed/comment_card";
 import CommentPostPreview from "@/components/comment_feed/comment_post_preview";
@@ -14,12 +14,7 @@ type Props = {
 };
 
 const CommentFeedCard: FC<Props> = ({ comment, post }) => {
-  const handleViewComment = useCallback(() => {
-    window.open(
-      `/questions/${comment.on_post}/#comment-${comment.id}`,
-      "_blank"
-    );
-  }, [comment.on_post, comment.id]);
+  const commentUrl = `/questions/${comment.on_post}/#comment-${comment.id}`;
 
   return (
     <div
@@ -48,7 +43,7 @@ const CommentFeedCard: FC<Props> = ({ comment, post }) => {
             className="mt-0 border-none dark:border-none md:mt-0"
             expandOverride="collapsed"
             collapsedHeight={222}
-            onViewComment={handleViewComment}
+            commentUrl={commentUrl}
           />
         </div>
       </div>