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

@@ -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">