From 3bfbc6a6ec7df8946462d5bd691d638df48585a6 Mon Sep 17 00:00:00 2001
From: Austin Chen <akrolsmir@gmail.com>
Date: Sat, 10 Sep 2022 19:22:47 -0700
Subject: [PATCH] Render contracts as half-size cards

---
 web/components/editor/mention.tsx | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/web/components/editor/mention.tsx b/web/components/editor/mention.tsx
index 22375620..2801e2e5 100644
--- a/web/components/editor/mention.tsx
+++ b/web/components/editor/mention.tsx
@@ -14,9 +14,13 @@ const MentionComponent = (props: any) => {
   const contract = useContract(props.node.attrs.id)
 
   return (
-    <NodeViewWrapper className={clsx(name, 'not-prose text-indigo-700')}>
-      {/* <Linkify text={'@' + props.node.attrs.label} /> */}
-      {contract && <ContractCard contract={contract} />}
+    <NodeViewWrapper className={clsx(name, 'not-prose')}>
+      {contract && (
+        <ContractCard
+          contract={contract}
+          className="my-2 w-full border border-gray-100"
+        />
+      )}
     </NodeViewWrapper>
   )
 }
@@ -30,5 +34,8 @@ export const DisplayMention = Mention.extend({
   parseHTML: () => [{ tag: name }],
   renderHTML: ({ HTMLAttributes }) => [name, mergeAttributes(HTMLAttributes)],
   addNodeView: () =>
-    ReactNodeViewRenderer(MentionComponent, { className: 'inline-block' }),
+    ReactNodeViewRenderer(MentionComponent, {
+      // On desktop, render cards below half-width so you can stack two
+      className: 'inline-block sm:w-[calc(50%-1rem)] sm:mr-1',
+    }),
 })