From 5e770b2e2fd4f87f6cc053d107c0cfa43f7351e1 Mon Sep 17 00:00:00 2001
From: Naiyuan Qing <145280634+NevilleQingNY@users.noreply.github.com>
Date: Wed, 8 Apr 2026 13:46:58 +0800
Subject: [PATCH] fix(editor): align IssueMentionCard styling and behavior with
 Tiptap

- Remove align-middle from IssueMentionCard (alignment is container's job)
- Add inline align-middle wrapper span in ReadonlyContent for vertical alignment
- Add img component with max-width constraint to prevent overflow
- Issue mention clicks open in new tab (matches Tiptap behavior)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 apps/web/features/editor/readonly-content.tsx | 24 ++++++++++++++++++-
 .../issues/components/issue-mention-card.tsx  | 14 ++++++-----
 2 files changed, 31 insertions(+), 7 deletions(-)

diff --git a/apps/web/features/editor/readonly-content.tsx b/apps/web/features/editor/readonly-content.tsx
index 8d6937d2..2dd5f8a1 100644
--- a/apps/web/features/editor/readonly-content.tsx
+++ b/apps/web/features/editor/readonly-content.tsx
@@ -63,7 +63,19 @@ const components: Partial<Components> = {
             : Array.isArray(children)
               ? children.join("")
               : undefined;
-        return <IssueMentionCard issueId={match[2]} fallbackLabel={label} />;
+        // Wrap in inline span for vertical alignment (mimics Tiptap's NodeViewWrapper)
+        return (
+          <span
+            className="inline align-middle"
+            onClick={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              window.open(`/issues/${match[2]}`, "_blank", "noopener,noreferrer");
+            }}
+          >
+            <IssueMentionCard issueId={match[2]} fallbackLabel={label} />
+          </span>
+        );
       }
       // Member / agent / all mentions
       return <span className="mention">{children}</span>;
@@ -83,6 +95,16 @@ const components: Partial<Components> = {
     );
   },
 
+  // Images — constrain width (matches Tiptap Image extension inline style)
+  img: ({ src, alt, ...props }) => (
+    <img
+      src={src}
+      alt={alt ?? ""}
+      style={{ maxWidth: "100%", height: "auto" }}
+      {...props}
+    />
+  ),
+
   // Tables — wrap in tableWrapper div for border/radius/scroll (matches Tiptap)
   table: ({ children }) => (
     <div className="tableWrapper">
diff --git a/apps/web/features/issues/components/issue-mention-card.tsx b/apps/web/features/issues/components/issue-mention-card.tsx
index f115c8d4..92cfe967 100644
--- a/apps/web/features/issues/components/issue-mention-card.tsx
+++ b/apps/web/features/issues/components/issue-mention-card.tsx
@@ -21,9 +21,11 @@ export function IssueMentionCard({ issueId, fallbackLabel }: IssueMentionCardPro
     return (
       <Link
         href={`/issues/${issueId}`}
-        className="text-primary font-medium cursor-pointer hover:underline"
+        className="issue-mention inline-flex items-center gap-1.5 rounded-md border mx-0.5 px-2 py-0.5 text-xs hover:bg-accent transition-colors cursor-pointer max-w-72"
       >
-        {fallbackLabel ?? issueId.slice(0, 8)}
+        <span className="font-medium text-muted-foreground">
+          {fallbackLabel ?? issueId.slice(0, 8)}
+        </span>
       </Link>
     );
   }
@@ -31,11 +33,11 @@ export function IssueMentionCard({ issueId, fallbackLabel }: IssueMentionCardPro
   return (
     <Link
       href={`/issues/${issueId}`}
-      className="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-sm hover:bg-accent transition-colors cursor-pointer no-underline"
+      className="issue-mention inline-flex items-center gap-1.5 rounded-md border mx-0.5 px-2 py-0.5 text-xs hover:bg-accent transition-colors cursor-pointer max-w-72"
     >
-      <StatusIcon status={issue.status} className="h-3.5 w-3.5" />
-      <span className="font-medium text-muted-foreground">{issue.identifier}</span>
-      <span className="text-foreground">{issue.title}</span>
+      <StatusIcon status={issue.status} className="h-3.5 w-3.5 shrink-0" />
+      <span className="font-medium text-muted-foreground shrink-0">{issue.identifier}</span>
+      <span className="text-foreground truncate">{issue.title}</span>
     </Link>
   );
 }