From eb355dbc9cbcc5db01d0a52279026e4b2d81982a Mon Sep 17 00:00:00 2001
From: Naiyuan Qing <145280634+NevilleQingNY@users.noreply.github.com>
Date: Fri, 3 Apr 2026 10:44:04 +0800
Subject: [PATCH] fix(editor): improve mention card sizing and vertical
 alignment
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Restore card to readable size (py-0.5, px-2, text-xs, rounded-md)
- Add max-w-72 and truncate on title for long issue names
- Move vertical-align: middle to [data-node-view-wrapper] (outermost
  inline element) instead of inner <a> — fixes centering within line
- Always render card style even when issue not in store (fallback shows
  identifier only)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 apps/web/features/editor/content-editor.css   |  2 +-
 .../editor/extensions/mention-view.tsx        | 25 ++++++++-----------
 2 files changed, 12 insertions(+), 15 deletions(-)

diff --git a/apps/web/features/editor/content-editor.css b/apps/web/features/editor/content-editor.css
index 8b0fc2ba..0ed12232 100644
--- a/apps/web/features/editor/content-editor.css
+++ b/apps/web/features/editor/content-editor.css
@@ -301,7 +301,6 @@
 .rich-text-editor a.issue-mention {
   color: inherit;
   text-decoration: none;
-  vertical-align: middle;
 }
 
 .rich-text-editor a.issue-mention:hover {
@@ -339,6 +338,7 @@
 /* Mention NodeView inline layout fix */
 .rich-text-editor [data-node-view-wrapper] {
   display: inline;
+  vertical-align: middle;
 }
 
 /* Images — shared styling for both editing and readonly */
diff --git a/apps/web/features/editor/extensions/mention-view.tsx b/apps/web/features/editor/extensions/mention-view.tsx
index 2827762b..b721140a 100644
--- a/apps/web/features/editor/extensions/mention-view.tsx
+++ b/apps/web/features/editor/extensions/mention-view.tsx
@@ -38,27 +38,24 @@ function IssueMention({
     window.open(`/issues/${issueId}`, "_blank", "noopener,noreferrer");
   };
 
+  const cardClass =
+    "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";
+
   if (!issue) {
     return (
-      <a
-        href={`/issues/${issueId}`}
-        onClick={handleClick}
-        className="issue-mention text-primary font-medium cursor-pointer hover:underline"
-      >
-        {fallbackLabel ?? issueId.slice(0, 8)}
+      <a href={`/issues/${issueId}`} onClick={handleClick} className={cardClass}>
+        <span className="font-medium text-muted-foreground">
+          {fallbackLabel ?? issueId.slice(0, 8)}
+        </span>
       </a>
     );
   }
 
   return (
-    <a
-      href={`/issues/${issueId}`}
-      onClick={handleClick}
-      className="issue-mention inline-flex items-center gap-2 rounded-md border mx-0.5 px-2.5 py-px text-xs leading-relaxed hover:bg-accent transition-colors cursor-pointer"
-    >
-      <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>
+    <a href={`/issues/${issueId}`} onClick={handleClick} className={cardClass}>
+      <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>
     </a>
   );
 }