fix(editor): improve mention card sizing and vertical alignment

- 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

@@ -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 */

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>
   );
 }